:root {
  color-scheme: light;
  --color-bg: #f3f6f6;
  --color-surface: #ffffff;
  --color-surface-soft: #eaf1f1;
  --color-text: #172329;
  --color-muted: #617278;
  --color-border: #ccd8da;
  --color-brand: #166f7a;
  --color-brand-strong: #0a4b54;
  --color-brand-soft: #dcedef;
  --color-accent: #e67e22;
  --color-accent-soft: #fff0df;
  --color-success: #24724f;
  --color-success-soft: #e4f4eb;
  --color-warning: #8a5700;
  --color-warning-soft: #fff4d7;
  --color-danger: #a63b32;
  --color-danger-soft: #fdebe8;
  --shadow-sm: 0 1px 2px rgb(10 75 84 / 8%);
  --shadow-md: 0 12px 30px rgb(10 75 84 / 12%);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-body: 1rem;
  --font-size-lead: clamp(1.05rem, 2vw, 1.2rem);
  --font-size-title: clamp(1.8rem, 5vw, 3.2rem);
  --line-body: 1.55;
  --motion-fast: 140ms;
  --motion-normal: 220ms;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0d1d21;
  --color-surface: #14282d;
  --color-surface-soft: #1a343a;
  --color-text: #f7fbfa;
  --color-muted: #abc0c4;
  --color-border: #355158;
  --color-brand: #6fc2c9;
  --color-brand-strong: #a0dce0;
  --color-brand-soft: #173c43;
  --color-accent: #f3a55f;
  --color-accent-soft: #4b2e19;
  --color-success: #7bd2a6;
  --color-success-soft: #173b2a;
  --color-warning: #f4ca71;
  --color-warning-soft: #493a16;
  --color-danger: #ffaaa1;
  --color-danger-soft: #4b2422;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 28%);
  --shadow-md: 0 16px 36px rgb(0 0 0 / 34%);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --color-bg: #0d1d21;
    --color-surface: #14282d;
    --color-surface-soft: #1a343a;
    --color-text: #f7fbfa;
    --color-muted: #abc0c4;
    --color-border: #355158;
    --color-brand: #6fc2c9;
    --color-brand-strong: #a0dce0;
    --color-brand-soft: #173c43;
    --color-accent: #f3a55f;
    --color-accent-soft: #4b2e19;
    --color-success: #7bd2a6;
    --color-success-soft: #173b2a;
    --color-warning: #f4ca71;
    --color-warning-soft: #493a16;
    --color-danger: #ffaaa1;
    --color-danger-soft: #4b2422;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 28%);
    --shadow-md: 0 16px 36px rgb(0 0 0 / 34%);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-normal: 0ms;
  }
}