/* Design tokens. Light is the default; dark follows the viewer's system or the header toggle (data-theme). */
:root {
  --bg: #FFFFFF;
  --band: #F3F6FB;
  --surface: #FFFFFF;
  --surface-2: #F3F6FB;
  --line: #DCE3EE;
  --line-2: #B9C6DB;
  --fg: #10264A;
  --muted: #4A5B78;
  --teal: #0B7F7B;
  --teal-hover: #095F5C;
  --teal-text: #0B7F7B;
  --on-teal: #FFFFFF;
  --spark: #F2A93B;
  --spark-text: #8A5A06;
  --sev-low: #1C7F7A;
  --sev-mid: #F2A93B;
  --sev-high: #F0716A;
  --danger: #C0392B;

  /* navy hero and footer bands keep their own fixed palette in both themes */
  --hero-bg: #0C1F3F;
  --hero-surface: #12294D;
  --hero-fg: #FFFFFF;
  --hero-muted: #B9C6DD;
  --hero-line: #2E4A7A;
  --hero-teal: #1FB5AD;
  --hero-teal-text: #5FD8D1;
  --strip-bg: #081530;

  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  --maxw: 1240px;
  --radius: 12px;
  --radius-sm: 8px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1424; --band: #0D1A2F; --surface: #101E36; --surface-2: #0D1A2F;
    --line: #1F3355; --line-2: #2E4A7A; --fg: #E8EEF8; --muted: #9FB0CC;
    --teal: #1FB5AD; --teal-hover: #5FD8D1; --teal-text: #5FD8D1; --on-teal: #06121F;
    --spark-text: #F2A93B; --danger: #F0716A;
    --hero-bg: #0D1A2F; --strip-bg: #060F20;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1424; --band: #0D1A2F; --surface: #101E36; --surface-2: #0D1A2F;
  --line: #1F3355; --line-2: #2E4A7A; --fg: #E8EEF8; --muted: #9FB0CC;
  --teal: #1FB5AD; --teal-hover: #5FD8D1; --teal-text: #5FD8D1; --on-teal: #06121F;
  --spark-text: #F2A93B; --danger: #F0716A;
  --hero-bg: #0D1A2F; --strip-bg: #060F20;
  color-scheme: dark;
}