/* sao.dev — Design System Tokens
   Warm-dark / cool-light. Theme via data-theme="dark|light" on <html>.
   Canonical source — blog/static/style.css consumes these values. */

:root {
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radius-sm: 3px;
  --rule-hair: 1px;
  --rule-strong: 2px;
  --track-label: 0.12em;
  --track-kicker: 0.2em;
}

/* Dark (default) — warm near-black */
:root, [data-theme="dark"] {
  --bg: #100d0b;
  --bg-inset: #0a0807;
  --surface: #171310;
  --surface-raised: #201b17;
  --border: #2a241f;
  --border-strong: #463c33;
  --hair: #241f1a;
  --text: #ece6df;
  --text-muted: #a39a8d;
  --text-dim: #6f675b;
  --accent: #ff6a1f;
  --accent-2: #52cfe0;
  --on-accent: #14100c;
  --ok: #34c98a;
  --warn: #ffb000;
  --bad: #ff3b30;
  --info: #3aa6ff;
}

/* Light — cool off-white */
[data-theme="light"] {
  --bg: #ecebe7;
  --bg-inset: #eeeeea;
  --surface: #fafaf7;
  --surface-raised: #ffffff;
  --border: #d7d5cd;
  --border-strong: #b6b1a8;
  --hair: #e0ddd5;
  --text: #1d1c19;
  --text-muted: #66635c;
  --text-dim: #99958d;
  --accent: #e8540a;
  --accent-2: #1c8a99;
  --on-accent: #ffffff;
  --ok: #159c66;
  --warn: #cf8e00;
  --bad: #dc342a;
  --info: #2a7fd0;
}

/* Signal semantics:
   --text (white) → primary action + active/running state
   --ok (green)   → health / success
   --bad (red)    → failure / danger
   --warn (amber) → warning
   --accent       → brand pop / "needs attention" (use sparingly)
   --accent-2     → data / informational highlight
   Most surface area stays neutral; color always means something. */