/* generated from DESIGN.md (Blue Hour) — edit DESIGN.md first, then sync tokens.json and this file */

html {
  color-scheme: light dark;
}

:root {
  --color-primary: #0e5a63;
  --color-primary-hover: #0a464e;
  --color-on-primary: #ffffff;
  --color-accent: #d98e32;
  --color-surface: #faf7f2;
  --color-surface-raised: #ffffff;
  --color-on-surface: #25302e;
  --color-on-surface-strong: #182220;
  --color-on-surface-muted: #5c6b69;
  --color-accent-border: #e5dfd5;
  --color-danger: #b3423a;
  --color-crisis: #9e2b25;
  --color-on-crisis: #ffffff;
  --color-outline: #0e5a63;
  --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-weight-bold: 700;
  --font-weight-label: 600;
  --font-weight-regular: 400;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --rounded-md: 12px;
}

/* dark scheme: system preference or explicit choice via data-theme.
   the two identical blocks are the Widely Available pattern —
   light-dark() would dedupe them but is only Newly Available */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #5fb0b7;
    --color-primary-hover: #79c2c8;
    --color-on-primary: #0e1b1a;
    --color-accent: #e0a45c;
    --color-surface: #101716;
    --color-surface-raised: #182220;
    --color-on-surface: #eae5db;
    --color-on-surface-strong: #ffffff;
    --color-on-surface-muted: #9aa8a5;
    --color-accent-border: #2a3533;
    --color-danger: #e08079;
    --color-outline: #5fb0b7;
  }
}
:root[data-theme="dark"] {
  --color-primary: #5fb0b7;
  --color-primary-hover: #79c2c8;
  --color-on-primary: #0e1b1a;
  --color-accent: #e0a45c;
  --color-surface: #101716;
  --color-surface-raised: #182220;
  --color-on-surface: #eae5db;
  --color-on-surface-strong: #ffffff;
  --color-on-surface-muted: #9aa8a5;
  --color-accent-border: #2a3533;
  --color-danger: #e08079;
  --color-outline: #5fb0b7;
}