:root {
  --color-paper: #F1E8D5;
  --color-paper-soft: #ECE2CB;
  --color-ink: #1F1A14;
  --color-ink-soft: #3A322A;
  --color-ink-mute: #6B5B49;
  --color-ink-faint: #9A8A75;
  --color-accent: #7A4A2B;

  --font-display: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --font-text: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-meta: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;

  --type-display-1: clamp(2.75rem, 6vw + 1rem, 5.25rem);
  --type-lede:      clamp(1.0625rem, 0.6vw + 1rem, 1.25rem);
  --type-body:      1rem;
  --type-meta:      0.8125rem;

  --leading-display: 1.04;
  --leading-lede:    1.5;
  --leading-body:    1.55;

  --tracking-tight:  -0.022em;
  --tracking-eyebrow: 0.16em;

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-2: 4px;
  --radius-pill: 999px;

  --motion-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-quick: 240ms;
  --motion-medium: 600ms;

  --grain-ink: rgba(31, 26, 20, 0.025);

  --hero-frame-max: 380px;

  --layout-max: 1240px;
  --layout-gutter: clamp(1.25rem, 4vw, 4rem);
}

:root[data-theme="dark"] {
  --color-paper: #1A1612;
  --color-paper-soft: #221D17;
  --color-ink: #F1E8D5;
  --color-ink-soft: #D6CBB4;
  --color-ink-mute: #A89880;
  --color-ink-faint: #756855;
  --color-accent: #C68A66;
  --grain-ink: rgba(241, 232, 213, 0.03);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #1A1612;
    --color-paper-soft: #221D17;
    --color-ink: #F1E8D5;
    --color-ink-soft: #D6CBB4;
    --color-ink-mute: #A89880;
    --color-ink-faint: #756855;
    --color-accent: #C68A66;
    --grain-ink: rgba(241, 232, 213, 0.03);
  }
}