/* Design tokens. Components only use these variables, never raw values.
   Dark colors apply when the system prefers dark (unless the user chose light) or
   when the user chose dark (`<html data-theme="dark">`). */
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;

  --control-height: 2.75rem;
  --focus-ring: 0 0 0 3px var(--color-focus);
  --transition: 120ms ease;

  color-scheme: light;
  --color-bg: #f6f7fb;
  --color-surface: #ffffff;
  --color-surface-muted: #f0f2f8;
  --color-border: #d9dde8;
  --color-text: #1b1f2a;
  --color-text-muted: #545b6e;
  --color-primary: #4338ca;
  --color-primary-hover: #3730a3;
  --color-primary-contrast: #ffffff;
  --color-primary-soft: #eef0ff;
  --color-focus: rgb(67 56 202 / 0.35);
  --color-success: #15803d;
  --color-danger: #b91c1c;
  --color-danger-soft: #fdecec;
  --color-warning: #8a4b00;
  --color-warning-soft: #fff4e0;

  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.06);
  --shadow-md: 0 4px 16px rgb(16 24 40 / 0.08);
  --shadow-lg: 0 12px 40px rgb(16 24 40 / 0.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0f1117;
    --color-surface: #181b24;
    --color-surface-muted: #20242f;
    --color-border: #313748;
    --color-text: #e8eaf0;
    --color-text-muted: #a3aabb;
    --color-primary: #a5b4fc;
    --color-primary-hover: #c7d2fe;
    --color-primary-contrast: #11131a;
    --color-primary-soft: #23264a;
    --color-focus: rgb(165 180 252 / 0.4);
    --color-success: #4ade80;
    --color-danger: #fca5a5;
    --color-danger-soft: #3b1d22;
    --color-warning: #fcd34d;
    --color-warning-soft: #3a2e12;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.6);
  }
}

/* Same values as above, for an explicit choice. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0f1117;
  --color-surface: #181b24;
  --color-surface-muted: #20242f;
  --color-border: #313748;
  --color-text: #e8eaf0;
  --color-text-muted: #a3aabb;
  --color-primary: #a5b4fc;
  --color-primary-hover: #c7d2fe;
  --color-primary-contrast: #11131a;
  --color-primary-soft: #23264a;
  --color-focus: rgb(165 180 252 / 0.4);
  --color-success: #4ade80;
  --color-danger: #fca5a5;
  --color-danger-soft: #3b1d22;
  --color-warning: #fcd34d;
  --color-warning-soft: #3a2e12;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.6);
}