:root {
  color-scheme: light dark;
  --color-canvas: #f3f6f3;
  --color-surface: #e5ece7;
  --color-surface-strong: #d8e3dc;
  --color-ink: #17211c;
  --color-muted: #58655e;
  --color-line: rgba(23, 33, 28, 0.19);
  --color-accent: #146b50;
  --color-accent-ink: #f7faf8;
  /* Champagne fills use fixed dark ink in both color schemes. */
  --color-detail: #b49b67;
  --color-detail-ink: #17211c;
  --color-dark: #14231c;
  --color-dark-muted: #b8c5bd;
  --color-focus: #0b8060;
  --font-sans: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --container: calc(2880px + var(--gutter) * 2);
  --gutter: clamp(20px, 5vw, 160px);
  --reading-width: 720px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;
  --space-8: 9rem;
  --radius-control: 0.625rem;
  --radius-media: 0.875rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-instant: 120ms;
  --motion-fast: 180ms;
  --motion-base: 280ms;
  --motion-panel: 420ms;
  --z-header: 50;
  --z-menu: 60;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas: #111914;
    --color-surface: #19251e;
    --color-surface-strong: #223128;
    --color-ink: #edf3ef;
    --color-muted: #a9b7ae;
    --color-line: rgba(237, 243, 239, 0.16);
    --color-accent: #58b996;
    --color-accent-ink: #0d1b15;
    --color-dark: #0b120e;
    --color-dark-muted: #a9b7ae;
    --color-focus: #73d5af;
  }
}