:root {
  --color-bg: #ECE9E2;
  --color-ink: #14211E;
  --color-accent: #0C755F;
  --color-mint: oklch(0.75 0.09 168);
  --color-vision: #E3D7C4;
  --color-card: #E4E0D7;
  --color-card-alt: #D8D4CA;

  --color-ink-66: rgba(20, 33, 30, 0.66);
  --color-ink-64: rgba(20, 33, 30, 0.64);
  --color-ink-62: rgba(20, 33, 30, 0.62);
  --color-ink-55: rgba(20, 33, 30, 0.55);
  --color-ink-50: rgba(20, 33, 30, 0.5);
  --color-ink-48: rgba(20, 33, 30, 0.48);
  --color-ink-38: rgba(20, 33, 30, 0.38);
  --color-ink-24: rgba(20, 33, 30, 0.24);
  --color-ink-22: rgba(20, 33, 30, 0.22);
  --color-ink-16: rgba(20, 33, 30, 0.16);
  --color-ink-14: rgba(20, 33, 30, 0.14);

  --color-cream-86: rgba(236, 233, 226, 0.86);
  --color-cream-82: rgba(236, 233, 226, 0.82);
  --color-cream-80: rgba(236, 233, 226, 0.8);
  --color-cream-72: rgba(236, 233, 226, 0.72);
  --color-cream-66: rgba(236, 233, 226, 0.66);
  --color-cream-60: rgba(236, 233, 226, 0.6);
  --color-cream-50: rgba(236, 233, 226, 0.5);
  --color-cream-38: rgba(236, 233, 226, 0.38);
  --color-cream-34: rgba(236, 233, 226, 0.34);
  --color-cream-30: rgba(236, 233, 226, 0.3);
  --color-cream-25: rgba(236, 233, 226, 0.25);
  --color-cream-24: rgba(236, 233, 226, 0.24);
  --color-cream-22: rgba(236, 233, 226, 0.22);
  --color-cream-20: rgba(236, 233, 226, 0.2);
  --color-cream-18: rgba(236, 233, 226, 0.18);

  --font-body: "Figtree", system-ui, -apple-system, sans-serif;
  --font-display: "Sora", system-ui, -apple-system, sans-serif;

  --radius: 0;
  --max-width: 97.5rem;
  --gutter: clamp(1.125rem, 4.5vw, 5.5rem);
  --section-gap: clamp(3.25rem, 8vw, 9.375rem);
  --header-height: 4.5rem;
  --touch-min: 44px;

  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 320ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease: var(--motion-base) var(--motion-ease-out);
  --z-nav: 90;
  --z-header: 100;
  --z-decor: 0;
  --z-content: 2;

  --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: var(--motion-fast);
  --ui-ease: var(--motion-ease-snap);
  --ui-focus-color: var(--color-accent);
}

@media (min-width: 768px) {
  :root {
    --section-gap: clamp(4.5rem, 9vw, 9.375rem);
  }
}