/* ══════════════════════════════════════════════════════════════════
   11 — TOKENS (client portal redesign, Phase 1)
   The single authoritative token layer. Loads after 10-design-system
   and wins the cascade. Source of truth: the designer handoff package
   (handoff_client_portal — README + Client Shell Component Layer),
   which itself canonizes what 01/10 already shipped.

   What this closes (friction F13–F16, F21):
   - Two competing --color-* blocks (01-base vs 10-design-system)
     → ONE semantic mapping, defined here, wins everywhere.
   - The --wom-* duplicate palette → aliased to the bare names, so
     both prefixes resolve to a single definition.
   - --space-*, --container-*, --radius-pill/full, --fs-* referenced
     with silent fallbacks for months → actually defined.
   - Radius: the SHIPPED values are canonized (6/10/14/20), not the
     authored intent (12/16) — nothing shifts visually.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Type scale — six steps cover every client screen ───────────
     Gilroy, three weights only (300/500/800), no italic. Emphasis is
     weight contrast or a shift to Oak — never a new size. */
  --fs-h1: 30px;        /* page title    · 800 · -0.025em */
  --fs-h2: 24px;        /* section head  · 800 · -0.02em  */
  --fs-h3: 16px;        /* card title    · 800            */
  --fs-body: 15px;      /* body          · 300 · lh 1.65 (16px on mobile — see below) */
  --fs-body-sm: 12.5px; /* secondary / helper text · 300  */
  --fs-label: 11px;     /* eyebrow       · 500 · 0.14em · uppercase */
  --ls-label: 0.14em;   /* canonized: the handoff's eyebrow tracking */

  /* ─── Spacing — 4px scale, finally defined ─────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Layout ───────────────────────────────────────────────────── */
  --container-xl: 1200px;
  --container-lg: 960px;
  --container-md: 720px;

  /* ─── Radii — shipped values canonized + the missing two ───────── */
  --radius-sm: 6px;     /* buttons, inputs */
  --radius-md: 10px;
  --radius-lg: 14px;    /* cards */
  --radius-xl: 20px;
  --radius-pill: 40px;
  --radius-full: 9999px;

  /* ─── Semantic colors — THE one mapping ────────────────────────
     success = sage · warning = amber · attention = oak ·
     danger = rust · info = slate blue. */
  --color-success:    var(--sage);
  --color-success-bg: var(--sage-bg);
  --color-warning:    var(--amber);
  --color-warning-bg: var(--amber-bg);
  --color-danger:     var(--rust);
  --color-danger-bg:  var(--rust-bg);
  --color-info:       var(--slate-blue);
  --color-info-bg:    var(--slate-bg);
  --color-attention:  var(--oak);
  --color-attention-bg: var(--oak-bg);
  --color-white:      #ffffff;

  /* Legacy aliases kept stable (same values as layer 10 — restated so
     this file alone is the answer to "what does --color-primary mean") */
  --color-primary:        var(--oak);
  --color-primary-hover:  var(--oak-light);
  --color-primary-light:  var(--oak-bg);
  --color-navy:           var(--navy-deep);
  --color-navy-light:     var(--navy);
  --color-cream:          var(--cream);
  --color-cream-dark:     var(--cream-dark);
  --color-text:           var(--navy-deep);
  --color-text-secondary: var(--navy);
  --color-text-muted:     var(--dim);
  --color-border:         var(--cream-dark);

  /* ─── --wom-* duplicate prefix → aliases onto the bare names ─────
     JS templates still reference both prefixes; until those are
     rewritten, both resolve HERE. Do not add new --wom-* uses. */
  --wom-oak: var(--oak);
  --wom-oak-light: var(--oak-light);
  --wom-navy: var(--navy);
  --wom-navy-deep: var(--navy-deep);
  --wom-midnight: var(--midnight);
  --wom-cream: var(--cream);
  --wom-cream-dark: var(--cream-dark);
  --wom-warm-white: var(--warm-white);
  --wom-stone: var(--stone);
  --wom-dim: var(--dim);
  --wom-amber: var(--amber);
  --wom-amber-bg: var(--amber-bg);
  --wom-gold: var(--gold);
  --wom-sage: var(--sage);
  --wom-sage-bg: var(--sage-bg);
  --wom-forest: var(--forest);
  --wom-slate: var(--slate-blue);
  --wom-slate-bg: var(--slate-bg);
  --wom-rust: var(--rust);
  --wom-rust-bg: var(--rust-bg);
  --wom-blush: var(--blush);
  --wom-terracotta: var(--terracotta);
  --wom-copper: var(--copper);
}

/* Body text is 16px on mobile so form fields never trigger iOS zoom. */
@media (max-width: 768px) {
  :root { --fs-body: 16px; }
}