/* ==========================================================================
   themes.css
   Dark mode overrides. Every variable name here already exists in base.css —
   only the VALUES change. Nothing in layout.css or components.css needs to
   know which theme is active; it just uses var(--color-*).

   Two selectors are provided:
   - prefers-color-scheme: dark   → respected on first visit, before the
     user has made an explicit choice
   - [data-theme="dark"]          → set by theme-toggle.js once the user
     picks (or when a stored preference is restored). This always wins
     because it's applied directly by JS, later in the cascade.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b0b0d;
    --color-surface: #141416;
    --color-surface-hover: #1c1c20;
    --color-text: #f4f4f5;
    --color-text-secondary: #a1a1aa;
    --color-text-muted: #8b8b94;
    --color-border: #29292e;
    --color-accent: #818cf8;
    --color-accent-hover: #a5b4fc;
    --color-accent-soft: #1e1b4b;
    --color-accent-contrast: #0b0b0d;
    --color-danger: #f87171;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --color-bg: #0b0b0d;
  --color-surface: #141416;
  --color-surface-hover: #1c1c20;
  --color-text: #f4f4f5;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #8b8b94;
  --color-border: #29292e;
  --color-accent: #818cf8;
  --color-accent-hover: #a5b4fc;
  --color-accent-soft: #1e1b4b;
  --color-accent-contrast: #0b0b0d;
  --color-danger: #f87171;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
}