/* ClutchCall design tokens — the one token file.
 *
 * Every console and the portal import this file first. The legacy token files
 * (packages/agent-ui/src/theme/tokens.css, packages/{fleet,streams,sapienscale}
 * /src/styles/tokens.css, the glass-family <console>.css files, src/styles/
 * theme.css) now hold only aliases that map their old names onto these.
 *
 * HOW THEMES WORK
 *   Each colour token carries both values: `light-dark(<light>, <dark>)`.
 *   The browser picks one from the element's `color-scheme`, so a theme switch
 *   is a single `color-scheme` declaration and it works on <html> and on a
 *   themed subtree alike (the contact-centre suite flips `data-mode` on a
 *   <div>, not on <html>). The switch selectors are at the end of this file:
 *     - `@media (prefers-color-scheme: dark)` follows the OS unless the page
 *       says light;
 *     - `:root[data-theme="dark"]`, `:root[data-mode="dark"]`, `:root.dark`
 *       are the explicit dark flags the consoles set today;
 *     - a console that is dark by default pins `color-scheme: dark` in its
 *       own alias file (one line, no values).
 *   Browser floor: light-dark() needs Chrome 123, Firefox 120, Safari 17.5.
 *   The consoles already require color-mix() and oklch(), so this is the
 *   same generation of browsers.
 *
 * ACCENT
 *   One accent per console, used for the brand mark and the primary action
 *   only. `html[data-console="<id>"]` selects it; until a console sets that
 *   attribute, its alias file selects the same named entry
 *   (`--console-accent-<id>`), so no console changes colour by surprise.
 *   `html[data-brand="telequick"]` overrides the accent for the TeleQuick
 *   brand. --accent-hover, --accent-soft and --ring derive from --accent, so
 *   an override only needs to set --accent (and --accent-fg when the accent
 *   is light enough to need dark text on it).
 *
 * TAILWIND
 *   --text-*, --leading-*, --font-sans, --font-mono, --shadow-sm/md and
 *   --radius-* are also Tailwind v4 theme names. Tailwind emits its copies
 *   inside `@layer theme`; the unlayered values here win, so they are set to
 *   Tailwind's own defaults where a utility reads them (--text-*, --leading-*)
 *   and nothing drifts.
 */

:root {
  color-scheme: light;

  /* ── Surfaces ───────────────────────────────────────────────────── */
  --bg:           light-dark(#f5f6f7, #0b0d10);   /* page */
  --bg-elevated:  light-dark(#ffffff, #13161b);   /* cards, panels, popovers */
  --bg-sunken:    light-dark(#eceef0, #070809);   /* wells, inputs, code */
  --bg-overlay:   light-dark(rgba(14, 17, 22, 0.55), rgba(0, 0, 0, 0.6)); /* scrim */
  --topbar-bg:    light-dark(#0e1116, #07090c);   /* near-black in both themes */
  --topbar-fg:    light-dark(#e8eaed, #e8eaed);
  --rail-bg:      light-dark(#ffffff, #0e1116);

  /* ── Text ───────────────────────────────────────────────────────── */
  --fg:           light-dark(#121417, #e8eaed);
  --fg-muted:     light-dark(#5b6471, #9aa3ad);
  --fg-subtle:    light-dark(#8a93a0, #6b7480);
  --fg-on-accent: var(--accent-fg);

  /* ── Lines ──────────────────────────────────────────────────────── */
  --border:        light-dark(#e2e5e9, #22272e);
  --border-strong: light-dark(#c7cdd4, #343b45);
  --ring:          color-mix(in srgb, var(--accent) 45%, transparent);

  /* ── Accent (brand teal; per-console overrides below) ───────────── */
  --accent:       var(--console-accent-portal);
  --accent-hover: light-dark(color-mix(in oklab, var(--accent), #000 12%),
                             color-mix(in oklab, var(--accent), #fff 12%));
  --accent-soft:  light-dark(color-mix(in srgb, var(--accent) 12%, transparent),
                             color-mix(in srgb, var(--accent) 16%, transparent));
  --accent-fg:    light-dark(#ffffff, #06201c);

  /* ── Semantic ───────────────────────────────────────────────────── */
  --ok:          light-dark(#0f7a4f, #34d399);
  --ok-soft:     color-mix(in srgb, var(--ok) 14%, transparent);
  --warn:        light-dark(#8a5a00, #fbbf24);
  --warn-soft:   color-mix(in srgb, var(--warn) 14%, transparent);
  --danger:      light-dark(#c7262c, #f87171);
  --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent);
  --info:        light-dark(#1d4fd8, #60a5fa);
  --info-soft:   color-mix(in srgb, var(--info) 14%, transparent);

  /* ── Shape ──────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 999px;

  /* ── Space (4/8 scale) ──────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* ── Type ───────────────────────────────────────────────────────── */
  --font-sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-brand: "Poppins", var(--font-sans); /* the brand lockup only */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-md:  1rem;      /* 16px */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.25rem;   /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --tracking-caps:  0.08em;

  /* ── Chart series (categorical) ────────────────────────────────────
     Identity of a series (a GPU card, a model). Assign in this order,
     never cycled; past 4 series, facet or fold into "Other". Validated
     with the dataviz palette checker (CVD and normal-vision separation,
     light and dark). Slots 3 and 4 are below 3:1 on light: a chart that
     uses them also shows a legend and a table. */
  --series-1: light-dark(#2a78d6, #3987e5);   /* blue */
  --series-2: light-dark(#eb6834, #d95926);   /* orange */
  --series-3: light-dark(#1baf7a, #199e70);   /* aqua */
  --series-4: light-dark(#eda100, #c98500);   /* yellow */

  /* ── Layout ─────────────────────────────────────────────────────── */
  --topbar-h:         48px;
  --rail-w:           240px;
  --rail-w-collapsed: 64px;
  --content-max:      1320px;

  /* ── Elevation (1px borders carry the hierarchy; shadows stay quiet) ── */
  --shadow-sm: 0 1px 2px light-dark(rgba(16, 18, 22, 0.06), rgba(0, 0, 0, 0.4));
  --shadow-md: 0 8px 24px light-dark(rgba(16, 18, 22, 0.10), rgba(0, 0, 0, 0.5));

  /* ── Per-console accents (the colour each console uses today) ───── */
  --console-accent-portal:    light-dark(#087f74, #04b2a2); /* brand teal */
  --console-accent-agent:     oklch(0.72 0.16 50);          /* contact-centre chassis, ClutchCall brand */
  --console-accent-voiceai:   oklch(0.72 0.16 50);          /* same chassis */
  --console-accent-optimus:   oklch(0.72 0.16 50);          /* fleet: robotics vertical */
  --console-accent-arena:     oklch(0.72 0.16 50);          /* fleet: games vertical */
  --console-accent-streams:   oklch(0.74 0.15 162);
  --console-accent-teleop:    light-dark(#038880, #04b2a2); /* SapienScale teal */
  --console-accent-fabric:    light-dark(#7c5cf6, #a78bfa); /* inference */
  --console-accent-realtime:  light-dark(#0891b2, #22d3ee);
  --console-accent-meet:      light-dark(#e8730c, #fb923c);
  --console-accent-crypto:    light-dark(#e8730c, #fb923c);
  --console-accent-tunnel:    light-dark(#e8730c, #fb923c);
  --console-accent-vpn:       light-dark(#e8730c, #fb923c);
  --console-accent-quickdesk: light-dark(#e8730c, #fb923c);
  --console-accent-ops:       light-dark(#0369a1, #38bdf8);
  --brand-accent-telequick:   oklch(0.66 0.14 210);
}

/* ── Console accent, keyed on <html data-console="…"> ─────────────── */
html[data-console="portal"]    { --accent: var(--console-accent-portal); }
html[data-console="agent"]     { --accent: var(--console-accent-agent); }
html[data-console="voiceai"]   { --accent: var(--console-accent-voiceai); }
html[data-console="optimus"]   { --accent: var(--console-accent-optimus); }
html[data-console="arena"]     { --accent: var(--console-accent-arena); }
html[data-console="streams"]   { --accent: var(--console-accent-streams); }
html[data-console="teleop"]    { --accent: var(--console-accent-teleop); }
html[data-console="fabric"]    { --accent: var(--console-accent-fabric); }
html[data-console="realtime"]  { --accent: var(--console-accent-realtime); }
html[data-console="meet"]      { --accent: var(--console-accent-meet); }
html[data-console="crypto"]    { --accent: var(--console-accent-crypto); }
html[data-console="tunnel"]    { --accent: var(--console-accent-tunnel); }
html[data-console="vpn"]       { --accent: var(--console-accent-vpn); }
html[data-console="quickdesk"] { --accent: var(--console-accent-quickdesk); }
html[data-console="ops"]       { --accent: var(--console-accent-ops); }

/* ── Brand override: TeleQuick ─────────────────────────────────────── */
html[data-brand="telequick"] {
  --accent: var(--brand-accent-telequick);
  --accent-fg: #ffffff;
}

/* ── Theme switches ────────────────────────────────────────────────── */

/* Follow the OS unless the page says light. `:where()` keeps this at the
   specificity of a bare `:root`, so a console's own one-line default
   (`:root:not(.dark) { color-scheme: light }`) can still override it. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"]):not([data-mode="light"]):not(.light)) {
    color-scheme: dark;
  }
}

/* Explicit flags on <html>: data-theme (glass family, voiceai), data-mode
   (fleet, streams, voiceai, sapienscale) and the portal's .dark class. */
:root[data-theme="dark"],
:root[data-mode="dark"],
:root.dark {
  color-scheme: dark;
}
:root[data-theme="light"],
:root[data-mode="light"],
:root.light {
  color-scheme: light;
}

/* A themed subtree: the contact-centre suite sets data-mode on its
   .screen-root <div>, and fleet/streams repeat it on theirs. */
:not(:root)[data-theme="dark"],
:not(:root)[data-mode="dark"] {
  color-scheme: dark;
}
:not(:root)[data-theme="light"],
:not(:root)[data-mode="light"] {
  color-scheme: light;
}