/* Theme layer: custom properties only. To restyle or add a theme, override
   these variables (e.g. a second file loaded after this one, or a
   [data-theme="…"] block) — style.css never hardcodes a color. */
:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #666666;
  --accent: #7c3aed;
  --surface: #f5f5f7;
  --border: #dddddd;
  --error: #c0392b;
  --ok: #2e8b57;

  --font: system-ui, sans-serif;
  --radius: 8px;
  --space: 1rem;
  --content-width: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131316;
    --fg: #e8e8e8;
    --muted: #999999;
    --surface: #1e1e24;
    --border: #333333;
  }
}