:root {
  color-scheme: light dark;
  --color-canvas: #f8f8f9;
  --color-surface: #ffffff;
  --color-surface-soft: #f0f1f3;
  --color-ink: #202124;
  --color-muted: #5e626b;
  --color-subtle: #777c86;
  --color-line: #dfe1e5;
  --color-accent: #245fe5;
  --color-accent-hover: #174fc8;
  --color-accent-soft: #edf3ff;
  --color-accent-foreground: #ffffff;
  --color-danger: #a92f3b;
  --color-danger-soft: #fff0f1;
  --color-danger-foreground: #ffffff;
  --color-success: #267347;
  --color-success-soft: #edf8f0;
  --font-family: -apple-system, BlinkMacSystemFont, "Wanted Sans Variable", "Wanted Sans", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-caption: 13px;
  --font-body: 16px;
  --font-heading: 24px;
  --font-display: clamp(36px, 5vw, 58px);
  --line-tight: 1.18;
  --line-body: 1.55;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-control: 11px;
  --radius-panel: 20px;
  --radius-large: 26px;
  --control-height: 48px;
  --border-width: 1px;
  --shadow-dialog: 0 18px 48px rgb(16 22 34 / 18%);
  --motion-fast: 150ms;
  --motion-standard: 220ms;
  --motion-expressive: 360ms;
  --ease-natural: cubic-bezier(.2, 0, 0, 1);
  --z-toast: 80;
  --z-dialog: 100;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas: #121316;
    --color-surface: #1a1b1f;
    --color-surface-soft: #22242a;
    --color-ink: #f3f4f6;
    --color-muted: #b6b9c1;
    --color-subtle: #91959e;
    --color-line: #373940;
    --color-accent: #a3baff;
    --color-accent-hover: #bdd0ff;
    --color-accent-soft: #252d3e;
    --color-accent-foreground: #121316;
    --color-danger: #ff9ba3;
    --color-danger-soft: #38262b;
    --color-danger-foreground: #211216;
    --color-success: #9bd7ad;
    --color-success-soft: #203127;
    --shadow-dialog: 0 18px 48px rgb(0 0 0 / 42%);
  }
}