:root {
  --paper: #f3eee6;
  --paper-deep: #e7dfd2;
  --surface: #fffaf4;
  --ink: #1c1915;
  --ink-soft: #5a5349;
  --ink-faint: #7a7266;
  --accent: #9a4d2e;
  --accent-deep: #6e3420;
  --accent-soft: #c47855;
  --basalt: #241f1b;
  --on-accent: #fff7f2;
  --line: rgba(28, 25, 21, 0.12);
  --line-strong: rgba(28, 25, 21, 0.22);
  --cream: var(--on-accent);
  --accent-mist: #d4a08a;
  --cream-line: rgba(255, 247, 242, 0.14);
  --cream-mute: rgba(255, 247, 242, 0.68);
  --cream-dim: rgba(255, 247, 242, 0.48);
  --cream-soft: rgba(255, 247, 242, 0.82);
  --cream-hot: rgba(255, 247, 242, 0.88);

  --font: "Geist", system-ui, sans-serif;
  --font-display: "Sora", system-ui, sans-serif;
  --header-height: 4.25rem;
  --touch-min: 44px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --wrap: 72rem;
  --page: min(72rem, calc(100% - 2 * var(--gutter)));
  --section-y: clamp(4.5rem, 9vw, 7.5rem);
  --section-gap: clamp(2rem, 4vw, 3.5rem);
  --display: clamp(2.25rem, 4.6vw, 3.75rem);
  --display-lg: clamp(2.5rem, 5vw, 4rem);
  --hero-word: clamp(2.75rem, 6vw, 4.75rem);
  --footer-word: clamp(2rem, 5vw, 3.25rem);
  --lead: 1.125rem;
  --body: 1.0625rem;
  --small: 0.9375rem;
  --micro: 0.75rem;
  --track-display: -0.035em;
  --track-hero: -0.04em;
  --radius: 1rem;
  --radius-lg: 1.35rem;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 460ms;
  --motion-standard: cubic-bezier(0.2, 0.65, 0.3, 1);
  --motion-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease: var(--duration-fast) var(--motion-standard);
  --shadow: 0 1.25rem 2.75rem rgba(28, 25, 21, 0.08);

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-10: 40px;
  --ui-space-12: 48px;
  --ui-space-16: 64px;
  --ui-space-20: 80px;
  --ui-space-24: 96px;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-type-h1: clamp(2.25rem, 1.5rem + 3.8vw, 5rem);
  --ui-type-h2: clamp(1.75rem, 1.35rem + 2.3vw, 3.25rem);
  --ui-type-h3: clamp(1.25rem, 1.1rem + 0.9vw, 1.75rem);
  --ui-leading-heading: 1.08;
  --ui-leading-body: 1.55;
  --ui-tracking-heading: -0.02em;
  --ui-touch-target: 44px;
  --ui-duration: 180ms;
  --ui-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ui-focus-color: var(--accent);
}

@media (min-width: 768px) {
  :root {
    --header-height: 4.5rem;
  }
}