/* Design tokens — Cobalt Grid v3. Drop-in replacement for the token block (lines 3–79) of app/static/style.css.
   Every existing variable name is kept; new: --admin-soft, --viz-1, --viz-2, --st-good, --st-warn, --st-crit, --pin, --ease-out, --dur-fast, --dur.
   Fonts load from /static/fonts/fonts.css (see spec.md §3).
   --viz-muted is kept from the Usage charts (not in the handoff): light #b7beca, dark #4a5365. */
:root {
  color-scheme: light dark;
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --surface-2: #F3F3F1;
  --border: #E6E6E3;
  --border-strong: #C9CBCF;
  --text: #0B0F17;
  --muted: #5B6270;
  --accent: #2F5BFF;
  --accent-hover: #2348E0;
  --accent-soft: #EBF0FF;
  --accent-contrast: #FFFFFF;
  --ok: #0B7A52;
  --ok-soft: #E4F4EC;
  --warn: #9A5000;
  --warn-soft: #FFF1DE;
  --danger: #C42B2B;
  --danger-soft: #FCE8E8;
  --admin: #6D3FD1;
  --admin-soft: #F2ECFF;
  --admin-ink: #6D3FD1;
  --viz-1: #2F5BFF;
  --viz-2: #D9541F;
  --viz-muted: #b7beca;
  --st-good: #0B7A52;
  --st-warn: #9A5000;
  --st-crit: #C42B2B;
  --pin: #FF6B3D;
  --shadow: 0 1px 2px rgba(11, 15, 23, 0.05), 0 1px 3px rgba(11, 15, 23, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(11, 15, 23, 0.22);
  --overlay: rgba(11, 15, 23, 0.5);
  --radius: 12px;
  --radius-sm: 8px;
  --gap: 16px;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 150ms;
  --dur: 240ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0C10;
    --surface: #12151B;
    --surface-2: #1A1E26;
    --border: #232833;
    --border-strong: #363D4B;
    --text: #EDEFF3;
    --muted: #9AA3B2;
    --accent: #6F8BFF;
    --accent-hover: #8AA0FF;
    --accent-soft: #1C2547;
    --accent-contrast: #0A0C10;
    --ok: #3DD69B;
    --ok-soft: #10291F;
    --warn: #F0B24A;
    --warn-soft: #33260E;
    --danger: #FF7B82;
    --danger-soft: #3A191C;
    --admin: #7C5CE6;
    --admin-soft: #251C40;
    --admin-ink: #B09DF0;
    --viz-1: #6F8BFF;
    --viz-2: #FF8A63;
    --viz-muted: #4a5365;
    --st-good: #3DD69B;
    --st-warn: #F0B24A;
    --st-crit: #FF7B82;
    --pin: #FF8A63;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
    --overlay: rgba(0, 0, 0, 0.66);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0C10;
  --surface: #12151B;
  --surface-2: #1A1E26;
  --border: #232833;
  --border-strong: #363D4B;
  --text: #EDEFF3;
  --muted: #9AA3B2;
  --accent: #6F8BFF;
  --accent-hover: #8AA0FF;
  --accent-soft: #1C2547;
  --accent-contrast: #0A0C10;
  --ok: #3DD69B;
  --ok-soft: #10291F;
  --warn: #F0B24A;
  --warn-soft: #33260E;
  --danger: #FF7B82;
  --danger-soft: #3A191C;
  --admin: #7C5CE6;
  --admin-soft: #251C40;
  --admin-ink: #B09DF0;
  --viz-1: #6F8BFF;
  --viz-2: #FF8A63;
  --viz-muted: #4a5365;
  --st-good: #3DD69B;
  --st-warn: #F0B24A;
  --st-crit: #FF7B82;
  --pin: #FF8A63;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  --overlay: rgba(0, 0, 0, 0.66);
}
:root[data-theme="light"] { color-scheme: light; }