/* ─────────────────────────────────────────────────────────────
   HHEO / Jawaher — Semantic Aliases
   Role-based tokens that map brand primitives to usage. Prefer
   these in components so a palette change flows everywhere.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Brand ──────────────────────────────────────── */
  --brand:            var(--maroon-600);
  --brand-strong:     var(--maroon-700);
  --brand-deep:       var(--maroon-900);
  --brand-tint:       var(--maroon-100);
  --brand-tint-soft:  var(--maroon-50);
  --brand-border:     var(--maroon-200);
  --brand-gradient:   linear-gradient(135deg, var(--maroon-600) 0%, var(--maroon-700) 100%);

  /* ── Text ───────────────────────────────────────── */
  --text-primary:     var(--ink);
  --text-secondary:   var(--neutral-500);
  --text-strong:      var(--neutral-700);
  --text-muted:       var(--neutral-400);
  --text-on-brand:    var(--white);
  --text-link:        var(--maroon-600);

  /* ── Surfaces ───────────────────────────────────── */
  --surface-page:     var(--neutral-50);
  --surface-card:     var(--white);
  --surface-sunken:   var(--neutral-100);
  --surface-alt:      var(--neutral-50);

  /* ── Lines ──────────────────────────────────────── */
  --border-subtle:    var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --divider:          var(--neutral-100);

  /* ── Fields ─────────────────────────────────────── */
  --field-bg:         var(--white);
  --field-border:     var(--neutral-300);
  --field-placeholder:var(--neutral-400);
  --focus-ring:       color-mix(in srgb, var(--maroon-600) 32%, transparent);
}