/* Semantic design tokens only. No raw component colors outside these variables. */
:root {
  --color-bg: #f4f1ea;
  --color-bg-elevated: #fffdf8;
  --color-text: #1c1914;
  --color-text-muted: #5c564c;
  --color-accent: #6b4f2a;
  --color-accent-contrast: #fffdf8;
  --color-border: #d9d0c3;
  --color-ok: #215c3a;
  --color-ko: #8a1f1f;
  --color-focus: #0f6e8c;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --radius: 1rem;
  --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --shadow: 0 12px 40px color-mix(in srgb, var(--color-text) 8%, transparent);
}

:root[data-theme="dark"] {
  --color-bg: #14110e;
  --color-bg-elevated: #1e1a16;
  --color-text: #f4efe6;
  --color-text-muted: #b7aea1;
  --color-accent: #e0b36a;
  --color-accent-contrast: #1a150f;
  --color-border: #3a332c;
  --color-ok: #8ddeb0;
  --color-ko: #f0a0a0;
  --color-focus: #7fd0e6;
  --shadow: 0 12px 40px rgb(0 0 0 / 35%);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme-mode="auto"]:not([data-theme="light"]) {
    color-scheme: dark;
  }
}