/* tokens.css - the single source of color, type, space, motion.
   Every color in the app comes from a token here. A hard-coded hex outside
   this file is a bug. Dark theme redefines the same names under
   [data-theme="dark"]; an inline script in <head> sets data-theme before the
   first paint so there is no flash. */

:root {
  /* Type */
  --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Cascadia Code", ui-monospace, Consolas, monospace;

  /* PRISM: Higginbotham navy with refined blues. */
  --navy: #0f2d52;   --navy-deep: #102640;   --brand-tint: #eaf2fb;
  --prism-blue: #245f9e; --prism-mid: #397ebc; --prism-sky: #75b5e1; --prism-pale: #b5d8ef;
  --prism-mist: #8bbfe8; --prism-band: #569ad0;
  --primary: #245f9e;  --primary-strong: #194c83; --primary-soft: #eaf2fb; --primary-text: #20558d;

  /* Neutral foundation */
  --bg: #f4f6f9;  --bg-tint: #eef2f7;  --surface: #ffffff;  --surface-2: #f8fafc;
  --ink: #16202e;  --ink-2: #47546a;  --muted: #5f6b82;  --faint: #5f6e82;
  --line: #e7ebf1;  --line-strong: #d6dbe4;

  /* Semantic (tinted, not saturated) */
  --ok: #19755f;   --ok-bg: #eaf5f0;   --ok-text: #17664f;
  --warn: #466787; --warn-bg: #edf2f8; --warn-text: #385674;
  --danger: #ad315c; --danger-bg: #f9eaf0; --danger-text: #91264c;
  --info: #245f9e;  --info-bg: #e9f1fb; --info-text: #2866ad;

  /* Radius */
  --r-xs: 7px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-pill: 999px;

  /* Elevation. Real depth: an offset and a soft blur, never a flat colored halo. */
  --sh-1: 0 1px 2px rgba(16,32,50,.06), 0 1px 1px rgba(16,32,50,.05);
  --sh-2: 0 1px 3px rgba(16,32,50,.07), 0 8px 20px -8px rgba(16,32,50,.16);
  --sh-3: 0 20px 48px -16px rgba(16,32,50,.30);
  --ring: 0 0 0 3px rgba(47,116,201,.30);
  --ring-primary: 0 0 0 3px rgba(36,95,158,.28);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.3,1);
  --pop: cubic-bezier(.34,1.56,.64,1);
  --dur-1: .12s; --dur-2: .18s; --dur-3: .28s;

  /* Space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px;
  --topbar-h: 68px; --rail-w: 280px; --content-max: 1180px;

  /* Named surfaces the topbar reuses in both themes */
  --topbar-a: #0f2d52; --topbar-b: #102640;
  --scrim: rgba(10,30,52,.44);
  --on-navy: rgba(255,255,255,.96);
  --on-navy-soft: rgba(255,255,255,.72);
  --on-navy-line: rgba(255,255,255,.24);
  --on-navy-fill: rgba(255,255,255,.10);
  --on-navy-fill-2: rgba(255,255,255,.20);
}

[data-theme="dark"] {
  --navy: #143a5c; --navy-deep: #0d2740; --brand-tint: #1a2a3d;
  --prism-blue: #8bbfe8; --prism-mid: #75b5e1; --prism-sky: #a4cef2; --prism-pale: #d4e8f7;
  --primary: #316fab; --primary-strong: #3676b2; --primary-soft: #172f49; --primary-text: #a4cef2;

  --bg: #0b1219; --bg-tint: #0f1720; --surface: #141e2a; --surface-2: #1a2634;
  --ink: #e6ecf3; --ink-2: #b3c0d0; --muted: #92a0b3; --faint: #99a8bc;
  --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.15);

  --ok: #3ecf8e; --ok-bg: #10241c; --ok-text: #6fdba8;
  --warn: #668aad; --warn-bg: #192c40; --warn-text: #bbd3ea;
  --danger: #b94370; --danger-bg: #331e2c; --danger-text: #f3aec7;
  --info: #5fa2e8; --info-bg: #12233a; --info-text: #8ec0f2;

  --sh-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 1px rgba(0,0,0,.24);
  --sh-2: 0 1px 3px rgba(0,0,0,.34), 0 10px 24px -10px rgba(0,0,0,.55);
  --sh-3: 0 24px 56px -18px rgba(0,0,0,.66);
  --ring: 0 0 0 3px rgba(95,162,232,.40);
  --ring-primary: 0 0 0 3px rgba(36,95,158,.36);

  --topbar-a: #10314f; --topbar-b: #0a2237;
  --scrim: rgba(0,0,0,.58);
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
button { font-family: inherit; }

/* Themed browser surfaces: focus ring, selection, caret, scrollbars, numerals. */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }
::selection { background: rgba(36,95,158,.18); }
[data-theme="dark"] ::selection { background: rgba(36,95,158,.30); }
:root { accent-color: var(--primary); caret-color: var(--primary); }
.tnum, td.num, .v, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; }
* { scrollbar-color: var(--line-strong) transparent; }

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