/* Design tokens. Every colour is a variable, so the light and dark themes share all the
   other styles. Dark is the base; light applies when the system prefers it (and no theme
   is chosen) or when the user picks it. */

:root {
  --bg: #0b1120;
  --surface: #131c31;
  --surface-2: #1a2540;
  --border: #25314f;
  --text: #e6ebf5;
  --muted: #8b98b8;
  --accent: #22d3ee;
  --accent-soft: rgba(34, 211, 238, 0.14);
  --on-accent: #04202a;
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --bad-soft: rgba(248, 113, 113, 0.1);
  --shadow: rgba(0, 0, 0, 0.35);
  --radius: 12px;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f3f5fa;
    --surface: #ffffff;
    --surface-2: #eef1f8;
    --border: #d9deec;
    --text: #151c2f;
    --muted: #5d6a8a;
    --accent: #0891b2;
    --accent-soft: rgba(8, 145, 178, 0.1);
    --good: #059669;
    --warn: #b45309;
    --bad: #dc2626;
    --bad-soft: rgba(220, 38, 38, 0.08);
    --shadow: rgba(21, 28, 47, 0.18);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f3f5fa;
  --surface: #ffffff;
  --surface-2: #eef1f8;
  --border: #d9deec;
  --text: #151c2f;
  --muted: #5d6a8a;
  --accent: #0891b2;
  --accent-soft: rgba(8, 145, 178, 0.1);
  --good: #059669;
  --warn: #b45309;
  --bad: #dc2626;
  --bad-soft: rgba(220, 38, 38, 0.08);
  --shadow: rgba(21, 28, 47, 0.18);
  color-scheme: light;
}