/* =====================================================================
   ADR design system · tokens.css
   Every visual decision is a CSS custom property. Components never use
   raw colors, sizes or durations; they read these tokens.

   Theme      <html data-theme="system|light|dark">   (default: system)
              Any subtree may set data-theme to form a themed island.
              Colors use light-dark(LIGHT, DARK), resolved per element from
              its color-scheme, so islands and the OS preference both work.
   Density    data-density="comfortable|compact|tv"     (default: comfortable)
              comfortable = agent workspace, compact = admin + supervisor,
              tv = wallboard read from 4 m.
   State      data-state="ready|queue|ring|incall|closer|paused|dispo|wrapup|
              dead|park|3way|preview|offline" aliases --st, --st-t, --st-s,
              --st-f, --st-on, --st-wash for the subtree.
   Tone       data-tone="neutral|accent|success|warning|danger|info" aliases
              --tone, --tone-t, --tone-s, --tone-f, --tone-on.
   Tenant     --brand / --brand-fg come from tenant settings at runtime.
   Contrast   tools/check-tokens.mjs verifies every text/surface pair below and
              every color + background pair components.css declares (text >= 4.5:1,
              UI boundaries and state marks >= 3:1); tools/contrast.mjs audits
              what the mockups actually render. Both run in light and dark.
   ===================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL 1.1, see fonts/) ---------- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
}

/* ---------- Theme-independent tokens ---------- */
:root {
  /* Type families. Sans for everything; tabular figures for numbers.
     Mono only for literal identifiers people search by: status codes,
     campaign / in-group / list IDs, legacy setting names. */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-features: normal;
  --font-features-num: "tnum" 1;

  /* Type scale (rem, so the browser font-size setting is respected).
     Minimum 11px anywhere, 12px on the wallboard, 20px in TV mode. */
  --fs-2xs: 0.6875rem;  --lh-2xs: 1rem;        /* 11/16  caps labels, kbd, legacy names */
  --fs-xs: 0.75rem;     --lh-xs: 1rem;         /* 12/16  help, meta, table headers */
  --fs-sm: 0.8125rem;   --lh-sm: 1.25rem;      /* 13/20  compact body, tables, controls */
  --fs-md: 0.875rem;    --lh-md: 1.25rem;      /* 14/20  default body */
  --fs-lg: 1rem;        --lh-lg: 1.5rem;       /* 16/24  panel titles, script text, customer name */
  --fs-xl: 1.25rem;     --lh-xl: 1.75rem;      /* 20/28  page titles */
  --fs-2xl: 1.5rem;     --lh-2xl: 2rem;        /* 24/32  KPI values */
  --fs-3xl: 2rem;       --lh-3xl: 2.25rem;     /* 32/36  hero talk timer */
  --fs-tv: 1.75rem;     --lh-tv: 2rem;         /* 28/32  TV agent names (spec 09 §4.6: >= 28px) */
  --fs-4xl: 3rem;       --lh-4xl: 3.25rem;     /* 48/52  TV tile timer */
  --fs-5xl: 4.5rem;     --lh-5xl: 4.75rem;     /* 72/76  TV secondary KPI */
  --fs-6xl: 6rem;       --lh-6xl: 6rem;        /* 96/96  TV primary KPI (spec 09 §4.6) */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-caps: 0.06em;    /* caps micro labels only */
  --tracking-title: -0.01em;  /* text >= 20px only; never on body text */

  /* Spacing: 2 px grid, named by pixel value */
  --s-0: 0;
  --s-1: 1px;
  --s-2: 2px;
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-10: 10px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-64: 64px;

  /* Radii: controls 8, cards 12, dialogs 14 (v2) */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* Borders and focus */
  --bw: 1px;
  --focus-w: 2px;

  /* Motion. Everything is zeroed under prefers-reduced-motion. */
  --dur-instant: 60ms;
  --dur-fast: 100ms;
  --dur: 160ms;
  --dur-slow: 240ms;
  --pulse-period: 2s;        /* own-state live pulse and ringing items only */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Z-index scale */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 10;
  --z-rail: 20;
  --z-topbar: 30;
  --z-drawer: 40;
  --z-overlay: 50;
  --z-modal: 60;
  --z-popover: 70;
  --z-toast: 80;
  --z-tooltip: 90;

  /* Layout */
  --topbar-h: 52px;
  --agentbar-h: 64px;
  --callbar-h: 64px;
  --legend-h: 28px;
  --rail-w: 240px;
  --rail-w-collapsed: 52px;
  --subnav-w: 220px;
  --drawer-w: 440px;
  --side-w: 304px;           /* supervisor right rail */
  --modal-w: 560px;
  --modal-w-lg: 760px;
  --palette-w: 640px;
  --savebar-h: 52px;
  --content-max: 1440px;
}

/* ---------- Density ---------- */
:root,
[data-density="comfortable"] {
  --ctl-h-sm: 26px;
  --ctl-h: 32px;
  --ctl-h-lg: 40px;
  --ctl-px: 12px;
  --ctl-fs: var(--fs-sm);
  --body-fs: var(--fs-md);
  --row-h: 36px;
  --row-h-wall: 36px;
  --cell-px: 12px;
  --table-fs: var(--fs-sm);
  --pad: 16px;          /* panel padding */
  --gap: 12px;          /* gap between panels */
  --field-gap: 12px;    /* vertical gap between fields */
  --icon: 16px;
}
[data-density="compact"] {
  --ctl-h-sm: 22px;
  --ctl-h: 28px;
  --ctl-h-lg: 34px;
  --ctl-px: 10px;
  --ctl-fs: var(--fs-sm);
  --body-fs: var(--fs-sm);
  --row-h: 28px;
  --row-h-wall: 32px;
  --cell-px: 8px;
  --table-fs: var(--fs-sm);
  --pad: 12px;
  --gap: 8px;
  --field-gap: 10px;
  --icon: 16px;
}
[data-density="tv"] {
  --ctl-h-sm: 36px;
  --ctl-h: 44px;
  --ctl-h-lg: 56px;
  --ctl-px: 16px;
  --ctl-fs: var(--fs-lg);
  --body-fs: var(--fs-xl);
  --row-h: 52px;
  --row-h-wall: 52px;
  --cell-px: 16px;
  --table-fs: var(--fs-xl);
  --pad: 24px;
  --gap: 16px;
  --field-gap: 16px;
  --icon: 24px;
}

/* ---------- Color: light-dark(LIGHT, DARK) ---------- */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: light-dark(#fafafa, #09090b);            /* app ground */
  --bg-sunken: light-dark(#f4f4f5, #050506);     /* wells, TV gutters */
  --surface: light-dark(#ffffff, #111113);       /* panels, tables, cards */
  --surface-2: light-dark(#f4f4f5, #18181b);     /* panel header, table header, read-only */
  --surface-3: light-dark(#ececef, #222226);     /* hover */
  --surface-4: light-dark(#e4e4e7, #2a2a2f);     /* pressed, neutral selected */
  --surface-raised: light-dark(#ffffff, #18181b);/* menus, popovers, modals */
  --surface-inverse: light-dark(#18181b, #f4f4f5);/* tooltip, toast */
  --overlay: light-dark(rgb(9 9 11 / 0.4), rgb(0 0 0 / 0.65));

  /* Lines. --border-input is the boundary of an editable control (>= 3:1). */
  --border: light-dark(#e7e7e9, #27272a);
  --border-subtle: light-dark(#f0f0f2, #1d1d20);
  --border-strong: light-dark(#d4d4d8, #3f3f46);
  --border-input: light-dark(#8a8a93, #6a6a74);
  --border-input-hover: light-dark(#6b6b73, #7e7e88);

  /* Text */
  --text: light-dark(#18181b, #f4f4f5);
  --text-2: light-dark(#52525b, #b4b4bb);          /* secondary */
  --text-3: light-dark(#62626a, #9a9aa2);          /* tertiary: meta, legacy names, counts (>= 4.5:1 on every surface) */
  --text-placeholder: light-dark(#6b6b73, #8a8a93);
  --text-disabled: light-dark(#a1a1aa, #52525b);   /* disabled only; exempt from contrast, never for content */
  --text-inverse: light-dark(#fafafa, #18181b);
  --text-inverse-2: light-dark(#a1a1aa, #52525b);
  --input-bg: light-dark(#ffffff, #0c0c0e);
  --input-bg-readonly: light-dark(#f4f4f5, #161618);

  /* Accent: interaction, selection, focus. Tenant may override if it passes the token check. */
  --accent: light-dark(#0a65d8, #4c9dff);
  --accent-hover: light-dark(#0855b8, #6eb0ff);
  --accent-press: light-dark(#07479a, #3a8cf0);
  --accent-fg: light-dark(#ffffff, #04101f);
  --accent-soft: light-dark(#eaf2fe, #0f2547);
  --accent-soft-2: light-dark(#d5e6fd, #15315c);
  --accent-text: light-dark(#0a5cc4, #8dc0ff);
  --link: var(--accent-text);
  --selection: light-dark(#edf4fe, #0f1c30);       /* selected rows: opaque (accent 10% / 14% over --surface) so sticky frozen cells never double the tint or show content through */
  --focus: var(--accent);
  --focus-ring: 0 0 0 var(--focus-w) var(--surface), 0 0 0 calc(var(--focus-w) * 2) var(--focus);

  /* Tenant brand (tenant chip, login header). Not used for interaction. */
  --brand: #e8a317;
  --brand-fg: #1d1400;

  /* Semantic tones: solid (icons, bars >= 3:1), text (>= 4.5:1 on surface and soft),
     soft (tint background), fill + on (solid surface with text, >= 4.5:1) */
  --success: light-dark(#16a34a, #2fcf78);
  --success-text: light-dark(#0f6b32, #63e39d);
  --success-soft: light-dark(#eaf7ef, #0c2a19);
  --success-fill: light-dark(#15803d, #2fcf78);
  --success-on: light-dark(#ffffff, #03140a);

  --warning: light-dark(#b86e00, #f4b63c);
  --warning-text: light-dark(#8f5200, #f8c96b);
  --warning-soft: light-dark(#fff4df, #2a1f08);
  --warning-fill: light-dark(#f5b301, #f4b63c);
  --warning-on: light-dark(#1d1400, #1d1400);

  --danger: light-dark(#c42129, #f2545b);
  --danger-hover: light-dark(#a51c22, #ff6b71);
  --danger-text: light-dark(#a51c22, #ff8b90);
  --danger-soft: light-dark(#fdeeee, #2c0d0f);
  --danger-fill: light-dark(#c42129, #f2545b);
  --danger-on: light-dark(#ffffff, #1a0204);

  --info: light-dark(#0b8fd3, #38b6f5);
  --info-text: light-dark(#036497, #7ccffa);
  --info-soft: light-dark(#e2f2fa, #182f3e);
  --info-fill: light-dark(#0369a1, #38b6f5);
  --info-on: light-dark(#ffffff, #03111a);

  /* Agent states. Never color alone: every use pairs the color with the
     state glyph shape and the VICIdial label (READY, INCALL, PAUSED...).
     --st-X       solid: stripe, dot, glyph, stacked bar   (>= 3:1 on surface)
     --st-X-text  label text on surface and on soft         (>= 4.5:1)
     --st-X-soft  tint: default pill, selected chip
     --st-X-fill  solid surface: hero pill, over-limit pill, TV exception tile
     --st-X-on    text and glyph on fill                    (>= 4.5:1) */
  --st-ready: light-dark(#0b8fd3, #38b6f5);
  --st-ready-text: light-dark(#036497, #7ccffa);
  --st-ready-soft: light-dark(#e2f2fa, #182f3e);
  --st-ready-fill: light-dark(#0369a1, #38b6f5);
  --st-ready-on: light-dark(#ffffff, #03111a);

  --st-queue: light-dark(#0d9e8e, #23ccb6);
  --st-queue-text: light-dark(#0b6d62, #62e2d1);
  --st-queue-soft: light-dark(#e2f3f1, #153234);
  --st-queue-fill: light-dark(#0f766e, #23ccb6);
  --st-queue-on: light-dark(#ffffff, #02140f);

  --st-incall: light-dark(#14984a, #2fcf78);
  --st-incall-text: light-dark(#0d7535, #63e39d);
  --st-incall-soft: light-dark(#e3f4e9, #17332a);
  --st-incall-fill: light-dark(#15803d, #2fcf78);
  --st-incall-on: light-dark(#ffffff, #03140a);

  --st-paused: light-dark(#b07a00, #f4b63c);
  --st-paused-text: light-dark(#865800, #f8c96b);
  --st-paused-soft: light-dark(#f7f0e0, #362f20);
  --st-paused-fill: light-dark(#f5b301, #f4b63c);
  --st-paused-on: light-dark(#1d1400, #1d1400);

  --st-dispo: light-dark(#7652f0, #a088ff);
  --st-dispo-text: light-dark(#5b36d1, #bfaeff);
  --st-dispo-soft: light-dark(#efeafd, #29273f);
  --st-dispo-fill: light-dark(#6d28d9, #a088ff);
  --st-dispo-on: light-dark(#ffffff, #0e0626);

  --st-dead: light-dark(#dc3038, #f2545b);
  --st-dead-text: light-dark(#b4141c, #ff8b90);
  --st-dead-soft: light-dark(#fbe6e7, #361f25);
  --st-dead-fill: light-dark(#c42129, #f2545b);
  --st-dead-on: light-dark(#ffffff, #1a0204);

  --st-park: light-dark(#e2661a, #ff8a3d);
  --st-park-text: light-dark(#a8460b, #ffab72);
  --st-park-soft: light-dark(#fcede4, #382820);
  --st-park-fill: light-dark(#c2410c, #ff8a3d);
  --st-park-on: light-dark(#ffffff, #1c0a00);

  --st-3way: light-dark(#cc2f93, #ee62c0);
  --st-3way-text: light-dark(#a51c74, #f78fd5);
  --st-3way-soft: light-dark(#f9e6f2, #352135);
  --st-3way-fill: light-dark(#9d1c72, #ee62c0);
  --st-3way-on: light-dark(#ffffff, #1c0414);

  --st-offline: light-dark(#828b99, #6b7585);
  --st-offline-text: light-dark(#59616d, #a3acba);
  --st-offline-soft: light-dark(#f1f2f4, #20242c);
  --st-offline-fill: light-dark(#4b5563, #8b95a5);
  --st-offline-on: light-dark(#ffffff, #0b0d11);

  /* Row wash strength for exception rows (mixed into --surface) */
  --wash: 7%;

  /* Charts: categorical slots in fixed order (validated with the dataviz
     validator, adjacent pairs, both modes). Never reuse state or tone colors as series. */
  --chart-1: light-dark(#2a78d6, #3987e5);
  --chart-2: light-dark(#eb6834, #d95926);
  --chart-3: light-dark(#1baf7a, #199e70);
  --chart-4: light-dark(#eda100, #c98500);
  --chart-5: light-dark(#e87ba4, #d55181);
  --chart-grid: light-dark(#ececef, #222226);
  --chart-axis: light-dark(#d4d4d8, #3f3f46);
  --chart-limit: var(--danger);

  /* Elevation: light uses shadows; dark relies on borders and a hairline ring */
  --shadow-xs: 0 1px 0 light-dark(rgb(0 0 0 / 0.03), rgb(0 0 0 / 0.3));
  --shadow-sm: 0 1px 2px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.4));
  --shadow-md: 0 1px 2px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0)), 0 4px 16px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.5)), 0 0 0 1px light-dark(rgb(0 0 0 / 0), #27272a);
  --shadow-lg: 0 16px 40px -8px light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.6)), 0 0 0 1px light-dark(rgb(0 0 0 / 0.04), #27272a);
  --shadow-inset: inset 0 1px 2px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.4));

  --kbd-bg: light-dark(#ffffff, #18181b);
  --kbd-border: light-dark(#c4c4ca, #4a4a52);
  --kbd-text: light-dark(#52525b, #c4c4ca);
  --scrollbar: light-dark(#d4d4d8, #3f3f46);
  --skeleton-a: light-dark(#f0f0f2, #18181b);
  --skeleton-b: light-dark(#f7f7f8, #222226);
  --mark-bg: light-dark(#eaf2fe, #0f2547);         /* script variables */
  --mark-text: light-dark(#07479a, #a9cfff);
  --hatch: light-dark(rgb(17 21 27 / 0.07), rgb(255 255 255 / 0.06)); /* closed slots, no-call days */

  /* Code editor (lead filter DSL, URL templates, dialplan, TTS). Syntax colors are
     text: each is >= 4.5:1 on --code-bg, --code-gutter and the error-line tint.
     Template variables (--A--field--B--) reuse --mark-bg / --mark-text. */
  --code-bg: var(--input-bg);
  --code-gutter: var(--surface-2);
  --code-key: light-dark(#0550ae, #79c0ff);      /* object keys, field names */
  --code-str: light-dark(#116329, #7ee787);      /* strings */
  --code-num: light-dark(#953800, #ffa657);      /* numbers, durations */
  --code-kw: light-dark(#6639ba, #d2a8ff);       /* operators, true/false/null, functions */
  --code-punct: var(--text-2);                   /* brackets, commas */
  --code-comment: var(--text-3);
}

[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="system"] { color-scheme: light dark; }

/* ---------- State aliases (one prop drives pill, stripe, glyph, banner, tile) ---------- */
[data-state] {
  --st: var(--st-offline); --st-t: var(--st-offline-text); --st-s: var(--st-offline-soft);
  --st-f: var(--st-offline-fill); --st-on: var(--st-offline-on);
}
[data-state="ready"],
[data-state="preview"] {
  --st: var(--st-ready); --st-t: var(--st-ready-text); --st-s: var(--st-ready-soft);
  --st-f: var(--st-ready-fill); --st-on: var(--st-ready-on);
}
[data-state="queue"],
[data-state="ring"] {
  --st: var(--st-queue); --st-t: var(--st-queue-text); --st-s: var(--st-queue-soft);
  --st-f: var(--st-queue-fill); --st-on: var(--st-queue-on);
}
[data-state="incall"],
[data-state="closer"] {
  --st: var(--st-incall); --st-t: var(--st-incall-text); --st-s: var(--st-incall-soft);
  --st-f: var(--st-incall-fill); --st-on: var(--st-incall-on);
}
[data-state="paused"] {
  --st: var(--st-paused); --st-t: var(--st-paused-text); --st-s: var(--st-paused-soft);
  --st-f: var(--st-paused-fill); --st-on: var(--st-paused-on);
}
[data-state="dispo"],
[data-state="wrapup"] {
  --st: var(--st-dispo); --st-t: var(--st-dispo-text); --st-s: var(--st-dispo-soft);
  --st-f: var(--st-dispo-fill); --st-on: var(--st-dispo-on);
}
[data-state="dead"] {
  --st: var(--st-dead); --st-t: var(--st-dead-text); --st-s: var(--st-dead-soft);
  --st-f: var(--st-dead-fill); --st-on: var(--st-dead-on);
}
[data-state="park"] {
  --st: var(--st-park); --st-t: var(--st-park-text); --st-s: var(--st-park-soft);
  --st-f: var(--st-park-fill); --st-on: var(--st-park-on);
}
[data-state="3way"] {
  --st: var(--st-3way); --st-t: var(--st-3way-text); --st-s: var(--st-3way-soft);
  --st-f: var(--st-3way-fill); --st-on: var(--st-3way-on);
}

/* ---------- Tone aliases (badges, banners, toasts, alerts) ---------- */
[data-tone] {
  --tone: var(--text-3); --tone-t: var(--text-2); --tone-s: var(--surface-3);
  --tone-f: var(--surface-4); --tone-on: var(--text);
}
[data-tone="accent"] {
  --tone: var(--accent); --tone-t: var(--accent-text); --tone-s: var(--accent-soft);
  --tone-f: var(--accent); --tone-on: var(--accent-fg);
}
[data-tone="success"] {
  --tone: var(--success); --tone-t: var(--success-text); --tone-s: var(--success-soft);
  --tone-f: var(--success-fill); --tone-on: var(--success-on);
}
[data-tone="warning"] {
  --tone: var(--warning); --tone-t: var(--warning-text); --tone-s: var(--warning-soft);
  --tone-f: var(--warning-fill); --tone-on: var(--warning-on);
}
[data-tone="danger"] {
  --tone: var(--danger); --tone-t: var(--danger-text); --tone-s: var(--danger-soft);
  --tone-f: var(--danger-fill); --tone-on: var(--danger-on);
}
[data-tone="info"] {
  --tone: var(--info); --tone-t: var(--info-text); --tone-s: var(--info-soft);
  --tone-f: var(--info-fill); --tone-on: var(--info-on);
}

/* ---------- Reduced motion: every duration and the live pulse go to zero ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --pulse-period: 0s;
  }
}