/* tokens.css — HMS-2026-CROWN-DASHBOARD design tokens (DESIGN §2).
   Token STRUCTURE ported from Kestrel FUI :root (commit 45678b9, MIT — see
   THIRD_PARTY_NOTICES.md). R4 palette: the Emperor redirected D04 from
   amber phosphor to a Persian imperial turquoise — فیروزه‌ای — with gold
   as the royal accent and ivory ink on a night-teal ground.
   THE ONLY FILE in web/ permitted to carry literal colours
   (check_no_raw_colors, N-05). Contrast figures are against --bg. */
:root {
  /* ── 2.1 Colour ─────────────────────────────────────────────── */
  --bg:         #071012;   /* page ground — night teal */
  --bg-2:       #0b1a1d;   /* gradient base, window body */
  --bg-panel:   #091517;   /* panel / tile fill */
  --ink:        #e8e3d5;   /* primary text, ivory        15.0:1 */
  --ink-dim:    #9fb0a9;   /* secondary text, labels      8.5:1 */
  --ink-mute:   #5c6d69;   /* DECORATION ONLY             3.5:1 */
  --accent:     #3fd9c6;   /* turquoise — primary, crown, focus  10.9:1 */
  --accent-hot: #8ff2e4;   /* turquoise light — emphasis        14.6:1 */
  --gold:       #e9c46a;   /* royal gold — ornament, titles     11.5:1 */
  --gold-hot:   #f6dc9a;   /* gold light — display numbers      14.3:1 */
  --green:      #7fffb0;   /* healthy, COMPLETED, approved      15.4:1 */
  --red:        #ff6b6b;   /* FAILED, rejected, exhausted        6.9:1 */
  --red-deep:   #8f1f1f;   /* destructive-action ground */
  --blue:       #82c7ff;   /* informational, links, in-flight   10.6:1 */
  --violet:     #cfaeff;   /* High Council arbitration          10.2:1 */
  --grid:       rgba(63, 217, 198, .09);
  --border:     rgba(120, 214, 202, .22);

  /* Translucent derivatives (all literals live here so every other
     sheet stays token-only). */
  --accent-a45: rgba(63, 217, 198, .45);
  --accent-a30: rgba(63, 217, 198, .30);
  --accent-a25: rgba(63, 217, 198, .25);
  --accent-a14: rgba(63, 217, 198, .14);
  --accent-a08: rgba(63, 217, 198, .08);
  --accent-a05: rgba(63, 217, 198, .05);
  --gold-a60:   rgba(233, 196, 106, .60);
  --gold-a35:   rgba(233, 196, 106, .35);
  --gold-a18:   rgba(233, 196, 106, .18);
  --gold-a08:   rgba(233, 196, 106, .08);
  --red-a50:    rgba(255, 107, 107, .50);
  --red-a15:    rgba(255, 107, 107, .15);
  --green-a20:  rgba(127, 255, 176, .20);
  --violet-a20: rgba(207, 174, 255, .20);
  --blue-a20:   rgba(130, 199, 255, .20);
  --ink-a40:    rgba(232, 227, 213, .40);
  --shadow-60:  rgba(0, 0, 0, .60);
  --shadow-70:  rgba(0, 0, 0, .70);
  --scrim:      rgba(2, 8, 10, .62);
  --scanline:   rgba(0, 0, 0, .16);
  --vignette:   rgba(0, 0, 0, .58);
  --glow-accent:rgba(63, 217, 198, .16);
  --glow-gold:  rgba(233, 196, 106, .22);
  /* Windows are near-opaque: with turquoise text beneath, the Kestrel
     .86 translucency let overlapped windows bleed through each other.
     Legibility outranks atmosphere (DESIGN §1.2). */
  --win-top:    rgba(12, 28, 31, .965);
  --win-bot:    rgba(6, 14, 16, .975);
  /* R6 Royal Chat: canvas alias and glass surfaces. */
  --bg-canvas:  var(--bg);
  --glass-top:  rgba(16, 38, 42, .78);
  --glass-bot:  rgba(8, 20, 23, .90);
  --glass-emperor: rgba(63, 217, 198, .10);
  --glass-vizier:  rgba(233, 196, 106, .07);
  --gold-a12:   rgba(233, 196, 106, .12);
  --ink-a10:    rgba(232, 227, 213, .10);
  /* Sky (canvas background, full motion tier only): the JS reads these. */
  --sky-a:      #0a2a2c;
  --sky-b:      #06161a;
  --mote:       #e9c46a;
  --mote-cool:  #3fd9c6;

  /* ── 2.3 Typography ──────────────────────────────────────────── */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "VT323", var(--font-mono);
  /* Royal display faces (R4): titles, crown, window names — never body. */
  --font-royal: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-royal-fa: "Lalezar", "Vazirmatn", "Noto Naskh Arabic", serif;
  --fs-xs: 10px; --fs-sm: 11px; --fs-md: 12px; --fs-lg: 13px;
  --fs-xl: 16px; --fs-2xl: 22px; --fs-3xl: 30px;
  --lh-tight: 1.25;
  --lh-body: 1.55;
  --tracking-label: .16em;

  /* ── 2.4 Space, radius, motion ───────────────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --radius: 0;
  --border-w: 1px;
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 400ms;
  --dur-ceremony: 900ms;            /* R4: login and window ceremonies */
  --ease: cubic-bezier(.2, .6, .25, 1);
  --ease-royal: cubic-bezier(.16, .84, .24, 1);
  --z-win: 100; --z-dock: 500; --z-modal: 900; --z-toast: 1000;

  /* ── 2.2 Status colour mapping (chips always add glyph + label) ─ */
  --status-preparing: var(--blue);
  --status-progress:  var(--accent);
  --status-review:    var(--accent);
  --status-revision:  var(--gold);
  --status-council:   var(--violet);
  --status-waiting:   var(--gold-hot);
  --status-completed: var(--green);
  --status-failed:    var(--red);
  --status-cancelled: var(--ink-dim);
}

/* Motion tier "off" (Calm Mode) and reduced motion collapse every
   duration (DESIGN §2.4). The tier attribute is set by motion.js; the
   legacy [data-calm="1"] selector is kept so nothing that reads it
   changes behaviour. */
[data-calm="1"], [data-motion="off"] {
  --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-ceremony: 1ms;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-ceremony: 1ms;
  }
}