/* css/tokens.css — design tokens */
:root {
  color-scheme: light dark;

  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --text: #161a1f;
  --text-muted: #5b6573;
  --border: #d8dee6;
  --primary: #2f6df6;
  --primary-text: #ffffff;
  --danger: #d83a52;

  --radius: 12px;
  --radius-sm: 8px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
  --maxw: 600px;
}

/* Dark via system preference, unless the user forced light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1216;
    --surface: #171b21;
    --surface-2: #1f242c;
    --text: #e8ecf1;
    --text-muted: #9aa6b2;
    --border: #2a313a;
    --primary: #4d86ff;
    --shadow: none;
  }
}

/* Dark when the user forces it manually */
:root[data-theme="dark"] {
  --bg: #0f1216;
  --surface: #171b21;
  --surface-2: #1f242c;
  --text: #e8ecf1;
  --text-muted: #9aa6b2;
  --border: #2a313a;
  --primary: #4d86ff;
  --shadow: none;
}