/* Design tokens. Neutrals follow the Sandbox Studio apps (Open-Architecture-
   Planner) so they read as one family; the accent is Linkwright's rust.
   Light by default, dark when the OS asks for it, and either one when the
   visitor picks it (data-theme on <html>, set before first paint by
   js/theme-init.js). Text colors meet WCAG AA on every surface. */
:root {
  color-scheme: light;
  --bg: #eceff3;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef1f5;
  --text: #12181f;
  --text-2: #4f5a67;
  --text-3: #626d7a;
  --border: #dfe4ea;
  --border-strong: #c2cad4;
  --accent: #b85c1a;
  --accent-strong: #934410;
  --accent-soft: #fbeee4;
  --on-accent: #ffffff;
  --ok: #1d7347;
  --ok-soft: #e2f3e9;
  --warn: #8a5a12;
  --warn-soft: #fbf1df;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --focus: #1f6feb;

  /* Diagram and chart ink. The three link hues are the dataviz skill's validated
     categorical slots 1–3 (CVD-safe in every pairing, both modes); IC and RC are
     neutral ink, told apart by shape and text label. */
  --ink-upper: #eb6834;
  --ink-lower: #2a78d6;
  --ink-panhard: #1baf7a;
  --ink-ic: #12181f;
  --ink-rc: #4f5a67;
  --ink-cg: #12181f;
  --ink-series: #2a78d6;
  --ink-ground: #8a95a3;
  --ink-tire: #3d4652;
  --ink-frame: #6b7684;
  --ink-grid: #e3e8ee;

  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --shadow-1: 0 1px 2px rgba(18, 24, 31, 0.05), 0 1px 3px rgba(18, 24, 31, 0.07);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d1117;
    --surface: #151b23;
    --surface-2: #1a222c;
    --surface-3: #212b37;
    --text: #e8edf3;
    --text-2: #a9b4c1;
    --text-3: #8f9aa8;
    --border: #2a3441;
    --border-strong: #3b4757;
    --accent: #d9773a;
    --accent-strong: #f0a46f;
    --accent-soft: #33200f;
    --on-accent: #12181f;
    --ok: #4cc28c;
    --ok-soft: #10261b;
    --warn: #e0b04f;
    --warn-soft: #2b220e;
    --danger: #f27b6e;
    --danger-soft: #331715;
    --focus: #5b9bff;
    --ink-upper: #d95926;
    --ink-lower: #3987e5;
    --ink-panhard: #199e70;
    --ink-ic: #e8edf3;
    --ink-rc: #a9b4c1;
    --ink-cg: #e8edf3;
    --ink-series: #3987e5;
    --ink-ground: #6d7886;
    --ink-tire: #a9b4c1;
    --ink-frame: #8f9aa8;
    --ink-grid: #222b36;
    --shadow-1: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1117;
  --surface: #151b23;
  --surface-2: #1a222c;
  --surface-3: #212b37;
  --text: #e8edf3;
  --text-2: #a9b4c1;
  --text-3: #8f9aa8;
  --border: #2a3441;
  --border-strong: #3b4757;
  --accent: #d9773a;
  --accent-strong: #f0a46f;
  --accent-soft: #33200f;
  --on-accent: #12181f;
  --ok: #4cc28c;
  --ok-soft: #10261b;
  --warn: #e0b04f;
  --warn-soft: #2b220e;
  --danger: #f27b6e;
  --danger-soft: #331715;
  --focus: #5b9bff;
  --ink-upper: #d95926;
  --ink-lower: #3987e5;
  --ink-panhard: #199e70;
  --ink-ic: #e8edf3;
  --ink-rc: #a9b4c1;
  --ink-cg: #e8edf3;
  --ink-series: #3987e5;
  --ink-ground: #6d7886;
  --ink-tire: #a9b4c1;
  --ink-frame: #8f9aa8;
  --ink-grid: #222b36;
  --shadow-1: none;
}