:root,
[data-theme="light"] {
  color-scheme: light;
  --color-canvas: #f7f6f2;
  --color-surface: #ffffff;
  --color-surface-soft: #efefec;
  --color-ink: #171717;
  --color-muted: #666662;
  --color-faint: #8b8b86;
  --color-line: #d9d8d3;
  --color-line-strong: #b9b8b2;
  --color-focus: #315e8a;
  --color-danger: #a04b45;

  --chart-1: #171717;
  --chart-2: #333331;
  --chart-3: #52524f;
  --chart-4: #737370;
  --chart-5: #8b8b86;
  --chart-6: #a3a3a0;
  --chart-7: #b9b8b2;
  --chart-8: #d4d4d0;

  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --text-label: 11px;
  --text-ui: 14px;
  --text-body: 16px;
  --text-subheading: 22px;
  --text-heading: clamp(30px, 4vw, 56px);
  --text-display: clamp(48px, 7vw, 104px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-control: 12px;
  --radius-panel: 16px;
  --radius-pill: 999px;
  --line-width: 1px;
  --content-width: 1200px;
  --page-gutter: 40px;
  --motion-fast: 160ms;
  --motion-base: 220ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #0a0a0a;
  --color-surface: #171717;
  --color-surface-soft: #22211f;
  --color-ink: #fafafa;
  --color-muted: #a3a3a0;
  --color-faint: #737370;
  --color-line: #333331;
  --color-line-strong: #52524f;
  --color-focus: #78a9da;
  --color-danger: #e58b83;

  --chart-1: #fafafa;
  --chart-2: #e5e5e2;
  --chart-3: #d4d4d0;
  --chart-4: #b9b8b2;
  --chart-5: #a3a3a0;
  --chart-6: #737370;
  --chart-7: #52524f;
  --chart-8: #333331;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-canvas: #0a0a0a;
    --color-surface: #171717;
    --color-surface-soft: #22211f;
    --color-ink: #fafafa;
    --color-muted: #a3a3a0;
    --color-faint: #737370;
    --color-line: #333331;
    --color-line-strong: #52524f;
    --color-focus: #78a9da;
    --color-danger: #e58b83;
    --chart-1: #fafafa;
    --chart-2: #e5e5e2;
    --chart-3: #d4d4d0;
    --chart-4: #b9b8b2;
    --chart-5: #a3a3a0;
    --chart-6: #737370;
    --chart-7: #52524f;
    --chart-8: #333331;
  }
}

@media (max-width: 760px) {
  :root { --page-gutter: 22px; }
}

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