:root {
  color-scheme: light dark;
  --paper: #f5f6f2;
  --surface: #ffffff;
  --surface-subtle: #ebeee7;
  --ink: #18201d;
  --green: #243d34;
  --accent: #c7ed86;
  --on-green: #f5f6f2;
  --on-accent: #18201d;
  --muted: #66716b;
  --line: #dce1db;
  --danger: #a33c35;
  --danger-surface: #fff0ed;
  --focus: #527b36;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-sm: 16px;
  --radius: 24px;
  --radius-pill: 999px;
  --tap: 56px;
  --duration-fast: 160ms;
  --duration: 260ms;
  --duration-slow: 640ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-soft: 0 20px 64px #18201d0a;
  --gutter: clamp(24px, 5vw, 88px);
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111814;
    --surface: #1c2821;
    --surface-subtle: #253329;
    --ink: #f5f6f2;
    --green: #d8e9d5;
    --on-green: #18201d;
    --muted: #a7b2a9;
    --line: #344139;
    --danger: #ffaba0;
    --danger-surface: #39211e;
    --focus: #c7ed86;
    --shadow-soft: 0 20px 64px #0000001f;
  }
}