/* Design tokens. Light is the default; dark follows the OS unless the user picks a theme. */
:root {
  --bg: #f1f4f6;
  --surface: #ffffff;
  --surface-2: #f6f8f9;
  --text: #13202b;
  --muted: #56677a;
  --border: #d9e0e6;
  --accent: #0b6e7a;
  --accent-ink: #ffffff;
  --accent-soft: #dff0f2;
  --ok: #1b7a4a;
  --warn: #a8500a;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --focus: #1a73e8;
  --shadow: 0 1px 2px rgba(19, 32, 43, 0.06), 0 4px 16px rgba(19, 32, 43, 0.05);
  --glow: none;
  --bg-image: none;
  --bg-size: auto;
  --font-display: var(--font);
  --accent-2: #5b3fd1;
  --aura: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --edge: color-mix(in srgb, var(--accent) 38%, var(--border));
  --rail-bg: #f8fafc;

  --font: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --radius: 8px;
  --radius-sm: 5px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --sidebar-w: 256px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d151b;
    --surface: #15212a;
    --surface-2: #1b2933;
    --text: #e7eef2;
    --muted: #9aaebc;
    --border: #2a3b47;
    --accent: #52c2cf;
    --accent-ink: #072a30;
    --accent-soft: #17383e;
    --ok: #55c288;
    --warn: #f0a15a;
    --danger: #ff8b82;
    --danger-soft: #3a1d1b;
    --focus: #8ab4f8;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25);
    --accent-2: #a99bff;
    --aura: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
    --edge: color-mix(in srgb, var(--accent) 45%, var(--border));
    --rail-bg: #101a21;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0d151b;
  --surface: #15212a;
  --surface-2: #1b2933;
  --text: #e7eef2;
  --muted: #9aaebc;
  --border: #2a3b47;
  --accent: #52c2cf;
  --accent-ink: #072a30;
  --accent-soft: #17383e;
  --ok: #55c288;
  --warn: #f0a15a;
  --danger: #ff8b82;
  --danger-soft: #3a1d1b;
  --focus: #8ab4f8;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25);
  --accent-2: #a99bff;
  --aura: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --edge: color-mix(in srgb, var(--accent) 45%, var(--border));
  --rail-bg: #101a21;
  color-scheme: dark;
}