:root {
  /* ---- Color ---- */
  --color-ink: #17201F;
  --color-ink-soft: #48504D;
  --color-ink-faint: #7A827E;

  --color-paper: #F5F2EC;
  --color-surface: #FFFFFF;
  --color-stone: #E7E2D9;

  --color-sage: #87958C;
  --color-sage-dim: #B7C0BA;

  --color-accent: #A66A4C;
  --color-accent-dim: #C99B84;
  --color-accent-tint: #F1E4DC;

  --color-border: rgba(23, 32, 31, 0.14);
  --color-border-soft: rgba(23, 32, 31, 0.08);

  /* ---- Type ---- */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;

  --heading-xl: clamp(3rem, 6.4vw, 6.75rem);
  --heading-lg: clamp(2.5rem, 4.6vw, 4.75rem);
  --heading-md: clamp(1.9rem, 3vw, 3.1rem);
  --heading-sm: clamp(1.4rem, 2.2vw, 1.9rem);

  /* ---- Layout ---- */
  --container-width: 1440px;
  --page-gutter: clamp(1.25rem, 4vw, 5rem);
  --content-max: 720px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-s: 350ms;
  --dur-m: 550ms;
  --dur-l: 800ms;

  --radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}