:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --accent: #2563eb;
  --danger: #dc2626;

  /* Dark theme tokens (used for explicit dark and device-preferred dark). */
  --dark-bg: #0b0f14;
  --dark-surface: #0f172a;
  --dark-text: #e5e7eb;
  --dark-muted: #9ca3af;
  --dark-border: #223047;
  --dark-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 46px rgba(0, 0, 0, 0.45);
  --dark-accent: #60a5fa;
  --dark-danger: #f87171;
}

:root[data-theme="dark"] {
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --border: var(--dark-border);
  --shadow: var(--dark-shadow);
  --accent: var(--dark-accent);
  --danger: var(--dark-danger);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --text: var(--dark-text);
    --muted: var(--dark-muted);
    --border: var(--dark-border);
    --shadow: var(--dark-shadow);
    --accent: var(--dark-accent);
    --danger: var(--dark-danger);
  }
}