/* core/server/web/tokens.css — THE CONSOLE'S DESIGN TOKENS, ported verbatim from the
   owner's design system handoff (Content Factory Design System, "Control Room",
   2026-08-31). Every colour is a ROLE in oklch; light is :root, dark is
   [data-theme="dark"] and the product default. Bind to these, never to a hex.
   Do not edit by hand: re-port from the handoff's tokens/ folder. */

/* ── tokens/fonts.css ── */
/* Webfonts — Google Fonts. No binaries vendored (see readme CAVEATS). */
@import url("https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+Devanagari:wght@400;500;600&display=swap");

/* ── tokens/colors.css ── */
/* Color roles — bind to roles, never hexes. Light = :root, dark = [data-theme="dark"] (the product default). */
:root{
  /* base ramp: cool graphite */
  --n-0:oklch(0.99 0.002 250);--n-50:oklch(0.97 0.003 250);--n-100:oklch(0.94 0.005 250);--n-200:oklch(0.90 0.007 250);--n-300:oklch(0.84 0.009 250);--n-400:oklch(0.71 0.012 250);--n-500:oklch(0.59 0.014 250);--n-600:oklch(0.49 0.015 250);--n-700:oklch(0.39 0.015 250);--n-800:oklch(0.29 0.014 250);--n-850:oklch(0.235 0.013 250);--n-900:oklch(0.19 0.012 250);--n-950:oklch(0.155 0.011 250);--n-1000:oklch(0.125 0.01 250);
  /* signal phosphor green — the on-air light */
  --signal-600:oklch(0.48 0.12 158);--signal-500:oklch(0.55 0.135 158);--signal-400:oklch(0.8 0.17 158);--signal-100:oklch(0.95 0.05 158);
  /* surfaces */
  --surface-page:var(--n-50);--surface-raised:var(--n-0);--surface-sunken:var(--n-100);--surface-hover:var(--n-100);--surface-active:var(--n-200);--surface-overlay:var(--n-0);--surface-inverse:var(--n-900);--surface-media:oklch(0.15 0.008 250);
  /* text */
  --text-primary:var(--n-900);--text-secondary:var(--n-600);--text-tertiary:var(--n-500);--text-inverse:var(--n-50);--text-on-accent:oklch(0.99 0.002 250);
  /* borders */
  --border-subtle:var(--n-200);--border-strong:var(--n-300);
  /* accent = primary action, human gate, live/on-air */
  --accent:var(--signal-600);--accent-hover:oklch(0.42 0.11 158);--accent-subtle:oklch(0.94 0.05 158);--accent-text:oklch(0.42 0.11 158);--gate:var(--accent);
  /* status */
  --pass:oklch(0.55 0.12 152);--pass-subtle:oklch(0.94 0.04 152);--pass-text:oklch(0.44 0.11 152);
  --warn:oklch(0.68 0.14 80);--warn-subtle:oklch(0.95 0.045 85);--warn-text:oklch(0.50 0.11 75);
  --fail:oklch(0.55 0.19 22);--fail-subtle:oklch(0.94 0.03 25);--fail-text:oklch(0.47 0.18 24);
  --info:oklch(0.55 0.11 245);--info-subtle:oklch(0.94 0.025 245);--info-text:oklch(0.46 0.11 245);
  /* focus + overlay */
  --focus-ring:oklch(0.6 0.14 158 / 0.9);--scrim:oklch(0.12 0.01 250 / 0.55);
  --shadow-menu:0 4px 16px oklch(0.12 0.01 250 / 0.12),0 1px 3px oklch(0.12 0.01 250 / 0.08);
  --shadow-dialog:0 12px 40px oklch(0.12 0.01 250 / 0.2),0 2px 8px oklch(0.12 0.01 250 / 0.1);
  color-scheme:light;
}
[data-theme="dark"]{
  --surface-page:var(--n-1000);--surface-raised:var(--n-950);--surface-sunken:oklch(0.108 0.009 250);--surface-hover:var(--n-900);--surface-active:var(--n-850);--surface-overlay:var(--n-900);--surface-inverse:var(--n-100);--surface-media:oklch(0.09 0.007 250);
  --text-primary:var(--n-100);--text-secondary:var(--n-400);--text-tertiary:var(--n-500);--text-inverse:var(--n-900);--text-on-accent:oklch(0.14 0.03 158);
  --border-subtle:oklch(0.24 0.013 250);--border-strong:oklch(0.32 0.014 250);
  --accent:var(--signal-400);--accent-hover:oklch(0.85 0.18 158);--accent-subtle:oklch(0.24 0.055 158);--accent-text:oklch(0.82 0.16 158);
  --pass:oklch(0.72 0.13 152);--pass-subtle:oklch(0.23 0.045 152);--pass-text:oklch(0.78 0.12 152);
  --warn:oklch(0.78 0.13 82);--warn-subtle:oklch(0.24 0.05 85);--warn-text:oklch(0.82 0.12 85);
  --fail:oklch(0.68 0.17 24);--fail-subtle:oklch(0.23 0.05 25);--fail-text:oklch(0.76 0.14 25);
  --info:oklch(0.72 0.1 245);--info-subtle:oklch(0.23 0.04 245);--info-text:oklch(0.78 0.09 245);
  --focus-ring:oklch(0.78 0.16 158 / 0.9);--scrim:oklch(0.04 0.005 250 / 0.65);
  --shadow-menu:0 4px 16px oklch(0 0 0 / 0.4),0 1px 3px oklch(0 0 0 / 0.3);
  --shadow-dialog:0 12px 40px oklch(0 0 0 / 0.55),0 2px 8px oklch(0 0 0 / 0.35);
  color-scheme:dark;
}

/* ── tokens/typography.css ── */
/* Type — multi-script from day one: Devanagari fallbacks in every stack. */
:root{
  --font-display:"Familjen Grotesk","Noto Sans Devanagari",-apple-system,sans-serif;
  --font-sans:"Hanken Grotesk","Noto Sans Devanagari",-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","Noto Sans Devanagari",ui-monospace,monospace;
  --text-xs:12px;--text-sm:13px;--text-md:14px;--text-lg:16px;--text-xl:20px;--text-2xl:25px;--text-3xl:32px;--text-display:40px;
  --leading-tight:1.15;--leading-normal:1.5;--leading-loose:1.65;
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;
  --tracking-eyebrow:0.08em; /* tiny mono ALL-CAPS labels only */
  --tracking-display:-0.02em;
}

/* ── tokens/spacing.css ── */
/* Spacing (4px base), radius (sharp — console geometry), borders, elevation. */
:root{
  --space-05:2px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  --radius-sm:2px;--radius-md:4px;--radius-lg:6px;--radius-xl:8px;--radius-full:999px;
  --border-w:1px;
}

/* ── tokens/density.css ── */
/* Two-density rule: comfortable (default, self-serve) vs compact (operator).
   Same components, same tokens — set data-density="compact" on any subtree. */
:root{
  --control-h:36px;--control-h-sm:28px;--row-h:52px;--text-ui:14px;--gap-ui:12px;--pad-cell:16px;--pad-page:32px;
}
[data-density="compact"]{
  --control-h:28px;--control-h-sm:24px;--row-h:36px;--text-ui:13px;--gap-ui:8px;--pad-cell:10px;--pad-page:20px;
}

/* ── tokens/motion.css ── */
/* Motion — disciplined, physical. One easing family. Never decorative loops. */
:root{
  --dur-micro:120ms; /* @kind other */
  --dur-standard:200ms; /* @kind other */
  --dur-structural:320ms; /* @kind other */
  --ease-settle:cubic-bezier(0.2,0,0,1); /* @kind other */
  --ease-exit:cubic-bezier(0.4,0,1,1); /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-micro:0ms; /* @kind other */ --dur-standard:80ms; /* @kind other */ --dur-structural:80ms /* @kind other */}
}

