/*
 * NimbleLine design tokens — the AgentLabs direction.
 *
 * Chosen 2026-09-10 from `preview-agentlabs.html`, against a real reference
 * screen the owner reacted to. Three earlier rounds were built against an
 * abstract spec ("what makes an AI dashboard look generic") and all three were
 * rejected; a concrete reference beats an abstract rule.
 *
 * WHAT THIS WORLD IS (chosen 2026-09-16 from the owner's reference dashboard,
 * previewed in preview-batch1.html and approved 2026-09-17): a dark
 * slate-teal navigation rail in both themes, white cards on a cool grey
 * ground, a teal brand accent, tinted status pills, compact 44px rows.
 * The live-call green is kept separate from the teal accent on purpose:
 * ONLY A LIVE CALL IS ALLOWED TO BE BRIGHT, and a brand that shares its hue
 * would compete with it.
 *
 * Every token NAME here is unchanged from the previous world. The values moved;
 * the vocabulary did not, so this file can land on its own without touching the
 * 694 var() uses in console.css.
 */

:root {
  --bg:            #F4F6F8;
  --surface:       #FFFFFF;
  --surface-hover: #F3F5F7;
  --surface-sunken:#F8FAFB;
  --rail:          #1B2B30;   /* dark in BOTH themes now — see rail tokens */
  --rail-2:        #16242A;
  --rail-line:     rgba(255,255,255,.07);
  --rail-ink:      #E8EEF0;
  --rail-ink-2:    #9AAAB0;
  --rail-ink-3:    #87999F;

  --border:        #E6EAEE;
  --border-strong: #D9DEE4;

  --text-primary:   #0F172A;
  --text-secondary: #5B6472;
  /* Darkened 2026-09-17: at #94A0AE the page-head eyebrow read 2.45:1 and the
     stat caption 2.66:1 on the cool ground. Muted is still the third rank —
     it is just now a legible one. Measured by scripts/console-contrast.mjs. */
  --text-muted:     #64707C;

  /* Teal is the brand. The live-call green below is deliberately NOT this
     hue, so a live call is still the only bright thing on the screen. */
  --accent:      #0D9488;
  --accent-ink:  #0F766E;
  --accent-wash: #F0FDFA;
  --accent-wash-2: #CCFBF1;
  /* What a filled primary button is made of.
     It is the other place a label sits on a saturated fill, and it carried the
     same bug the door's CTA was fixed for — white on --accent (#0D9488) is
     3.74:1, below AA. The deeper --accent-ink carries white at 5.47:1: same
     hue, same family, no new colour. Dark inverts the pair instead. */
  --accent-solid: var(--accent-ink);
  --on-accent:    #FFFFFF;

  --warn:      #D97706;
  --warn-wash: #FEF5E6;
  --danger:      #E11D48;
  --danger-wash: #FDECF0;
  /* White clears AA on the light rose (4.70:1); on the dark one it does not,
     so the label flips there the way --on-accent does. */
  --on-danger:   #FFFFFF;

  /* Per-domain hues. These carry hero bands and stat-tile icons — never
     navigation at rest, and never a status chip. */
  --blue:   #2563EB;  --blue-wash:   #EAF1FE;
  --amber:  #D97706;  --amber-wash:  #FEF5E6;
  --violet: #7C3AED;  --violet-wash: #F1ECFE;
  --rose:   #E11D48;  --rose-wash:   #FDECF0;
  --cyan:   #0891B2;  --cyan-wash:   #E6F6FA;

  /* Call state, kept semantically distinct from the accent — a live call is
   * not a UI accent, it is the one thing on screen allowed to be bright. */
  --live:      #10A37F;
  --live-glow: rgba(16, 163, 127, .32);
  --live-wash: #E8F8F2;
  --ring:      #D97706;
  --ring-glow: rgba(217, 119, 6, .30);
  /* A lamp and a word are not the same job. --live/--ring/--danger stay bright
     because a dot has to catch an eye across a desk; the *-ink pair is the
     same state written down, dark enough to read at 11.5px on its own wash.
     In dark the two collapse — the lifted hue already clears AA there. */
  --live-ink:   #0B6B54;
  --ring-ink:   #92400E;
  --danger-ink: #BE123C;
  --queue:      #2563EB;
  --queue-glow: rgba(37, 99, 235, .28);

  --font-ui: -apple-system, Inter, 'Segoe UI', 'Noto Sans Bengali', 'Hind Siliguri', system-ui, sans-serif;
  --font-num: ui-monospace, 'SF Mono', Menlo, monospace;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px;

  --r1: 6px; --r2: 8px; --r3: 12px; --r4: 16px;

  /* Compact: 44px rows, 38px heads. A two-line identity cell opts into
     .is-tall (52px) on the row. */
  --row-h: 44px;
  --head-h: 38px;

  --lift-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03);
  --lift-2: 0 6px 20px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.04);
  --lift-3: 0 16px 40px rgba(15,23,42,.14), 0 4px 10px rgba(15,23,42,.06);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: 120ms;
  --med:  200ms;

  /* Compatibility aliases. 193 of console.css's 694 var() uses go through
   * these — the door, the wallboard, the reports and the IVR editor all read
   * the palette this way. Pointing them at the new values is what lets this
   * file land alone: those surfaces re-colour without being edited.
   * An alias is a rename, not a way to keep the old world alive underneath. */
  --ink: var(--text-primary);
  --ink-muted: var(--text-secondary);
  --ink-faint: var(--text-muted);
  --ground: var(--bg);
  --ground-raised: var(--surface);
  --ground-sunken: var(--surface-sunken);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --field: var(--surface);
  --edge-2: var(--border-strong);
  --sheen: rgba(255,255,255,.9);
  --grain: .18;
  /* Directional: the door sweeps these 102deg, so each step must be deeper
     than the last. Aliasing them onto surface/bg collapsed the ramp. */
  --paper-1: #FFFFFF;
  --paper-2: #FAFAF9;
  --paper-3: #F2F3F3;
  /* The deeper teal, not --accent. The door's CTA is the one place a white
     label sits on a saturated fill at 14.5px, and white on #0D9488 measures
     3.74:1 — below AA. On --accent-ink (#0F766E) it is 5.47:1. Same hue, same
     family, no new colour. Dark keeps --accent because dark puts INK on the
     mint (#06231a) rather than white, and that measures 8.93:1.
     Both numbers come from scripts/console-contrast.mjs, which measured no
     door surface at all until 2026-09-17 — which is why this sat unfound. */
  --door-cta: var(--accent-ink);
}

:root[data-theme="dark"] {
  --bg:            #0E1113;
  --surface:       #161A1D;
  --surface-hover: #1F252A;
  --surface-sunken:#181C20;
  --rail:          #0B1416;
  --rail-2:        #080F11;
  --rail-line:     rgba(255,255,255,.06);
  --rail-ink:      #E8EEF0;
  --rail-ink-2:    #8E9CA3;
  --rail-ink-3:    #85939A;

  --border:        #252B31;
  --border-strong: #313940;

  --text-primary:   #EEF1F3;
  --text-secondary: #9AA5AF;
  --text-muted:     #7B8791;

  --accent:      #2DD4BF;
  --accent-ink:  #5EEAD4;
  --accent-wash: rgba(45, 212, 191, .12);
  --accent-wash-2: rgba(45, 212, 191, .20);
  /* Dark keeps the bright mint and puts INK on it, the way the door already
     does: white on #2DD4BF is 1.86:1 — unreadable — and the ground colour on
     the same fill is 10.18:1. */
  --accent-solid: var(--accent);
  --on-accent:    #0E1113;

  --warn:      #FBBF24;
  --warn-wash: rgba(251, 191, 36, .13);
  --danger:      #FB7185;
  --danger-wash: rgba(251, 113, 133, .13);
  /* White on #FB7185 is 2.69:1 — the lifted rose is too bright to carry it.
     The ground colour on the same fill is 7.04:1. */
  --on-danger:   #0E1113;

  /* Hues are lifted for the dark ground, never reused — the light-theme blue
     and green both go muddy on ink. */
  --blue:   #60A5FA;  --blue-wash:   rgba(96, 165, 250, .13);
  --amber:  #FBBF24;  --amber-wash:  rgba(251, 191, 36, .13);
  --violet: #A78BFA;  --violet-wash: rgba(167, 139, 250, .13);
  --rose:   #FB7185;  --rose-wash:   rgba(251, 113, 133, .13);
  --cyan:   #22D3EE;  --cyan-wash:   rgba(34, 211, 238, .12);

  --live:      #2DD4A7;
  --live-glow: rgba(45, 212, 167, .42);
  --live-wash: rgba(45, 212, 167, .10);
  --ring:      #FBBF24;
  --ring-glow: rgba(251, 191, 36, .38);
  --live-ink:   var(--live);
  --ring-ink:   var(--ring);
  --danger-ink: var(--danger);
  --queue:      #60A5FA;
  --queue-glow: rgba(96, 165, 250, .34);

  --lift-1: 0 1px 2px rgba(0,0,0,.4);
  --lift-2: 0 6px 20px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
  --lift-3: 0 16px 40px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.35);

  /* var() resolves against the scope where the alias was DECLARED, not where
   * it is used — proved by testing, not assumed. A var(--ink) declared only in
   * :root keeps pointing at :root's --text-primary even under
   * [data-theme="dark"], so every alias must be redeclared per theme. */
  --ink: var(--text-primary);
  --ink-muted: var(--text-secondary);
  --ink-faint: var(--text-muted);
  --ground: var(--bg);
  --ground-raised: var(--surface);
  --ground-sunken: var(--surface-sunken);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --field: var(--surface);
  --edge-2: var(--border-strong);
  --sheen: rgba(255,255,255,.08);
  --grain: .12;
  --paper-1: #15171A;
  --paper-2: #111316;
  --paper-3: #0B0D0F;
  --door-cta: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0E1113;
    --surface:       #161A1D;
    --surface-hover: #1F252A;
    --surface-sunken:#181C20;
    --rail:          #0B1416;
    --rail-2:        #080F11;
    --rail-line:     rgba(255,255,255,.06);
    --rail-ink:      #E8EEF0;
    --rail-ink-2:    #8E9CA3;
    --rail-ink-3:    #85939A;

    --border:        #252B31;
    --border-strong: #313940;

    --text-primary:   #EEF1F3;
    --text-secondary: #9AA5AF;
    --text-muted:     #7B8791;

    --accent:      #2DD4BF;
    --accent-ink:  #5EEAD4;
    --accent-wash: rgba(45, 212, 191, .12);
    --accent-wash-2: rgba(45, 212, 191, .20);
    --accent-solid: var(--accent);
    --on-accent:    #0E1113;

    --warn:      #FBBF24;
    --warn-wash: rgba(251, 191, 36, .13);
    --danger:      #FB7185;
    --danger-wash: rgba(251, 113, 133, .13);
    --on-danger:   #0E1113;

    --blue:   #60A5FA;  --blue-wash:   rgba(96, 165, 250, .13);
    --amber:  #FBBF24;  --amber-wash:  rgba(251, 191, 36, .13);
    --violet: #A78BFA;  --violet-wash: rgba(167, 139, 250, .13);
    --rose:   #FB7185;  --rose-wash:   rgba(251, 113, 133, .13);
    --cyan:   #22D3EE;  --cyan-wash:   rgba(34, 211, 238, .12);

    --live:      #2DD4A7;
    --live-glow: rgba(45, 212, 167, .42);
    --live-wash: rgba(45, 212, 167, .10);
    --ring:      #FBBF24;
    --ring-glow: rgba(251, 191, 36, .38);
    --live-ink:   var(--live);
    --ring-ink:   var(--ring);
    --danger-ink: var(--danger);
    --queue:      #60A5FA;
    --queue-glow: rgba(96, 165, 250, .34);

    --lift-1: 0 1px 2px rgba(0,0,0,.4);
    --lift-2: 0 6px 20px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
    --lift-3: 0 16px 40px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.35);

    --ink: var(--text-primary);
    --ink-muted: var(--text-secondary);
    --ink-faint: var(--text-muted);
    --ground: var(--bg);
    --ground-raised: var(--surface);
    --ground-sunken: var(--surface-sunken);
    --line: var(--border);
    --line-strong: var(--border-strong);
    --field: var(--surface);
    --edge-2: var(--border-strong);
    --sheen: rgba(255,255,255,.08);
    --grain: .12;
    --paper-1: #15171A;
    --paper-2: #111316;
    --paper-3: #0B0D0F;
    --door-cta: var(--accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}