:root {
  --bg: #f3f6fb;
  --panel: #ffffff;
  --panel-elevated: #f8fafc;
  --line: #d5deea;
  --border: var(--line);
  --surface: var(--panel);
  --text: #0f172a;
  --muted: #5b6b82;
  --accent: #2563eb;
  --accent-soft: #1d4ed8;
  --accent-glow: rgba(37, 99, 235, 0.16);
  --good: #15803d;
  --warn: #c2410c;
  --bad: #b91c1c;
  --side: #0b1220;
  --side-text: #dbe7ff;
  --side-muted: #8ea3c4;
  --active: #172841;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow: 0 14px 40px rgba(15, 35, 75, 0.1);
  --shadow-sm: 0 4px 14px rgba(15, 35, 75, 0.06);
  --transition-base: 0.2s ease;
  --font: "Outfit", "Segoe UI", "Noto Sans", system-ui, sans-serif;
  --font-display: "Outfit", var(--font);
  --z-grain: 0;
  --z-sticky: 20;
  --z-drawer: 200;
  --z-modal: 300;
}

body[data-theme="dark"] {
  --bg: #050a12;
  --panel: #0a1220;
  --panel-elevated: #0f1a2e;
  --line: #243752;
  --border: var(--line);
  --surface: var(--panel);
  --text: #e8edf5;
  --muted: #8fa0b8;
  --accent: #4d8ef7;
  --accent-soft: #3b7ae8;
  --accent-glow: rgba(77, 142, 247, 0.18);
  --good: #34d17a;
  --warn: #fb923c;
  --bad: #f87171;
  --side: #050912;
  --side-text: #d9e4f7;
  --side-muted: #7f93b0;
  --active: #121f35;
  --shadow: 0 18px 48px rgba(2, 8, 24, 0.45);
  --shadow-sm: 0 6px 18px rgba(2, 8, 24, 0.28);
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    color-scheme: dark;
  }
}