:root {
  --wash: oklch(99.5% 0.002 250);
  --wash-deep: oklch(98.2% 0.004 250);
  --surface: #fff;
  --inset: oklch(98.4% 0.004 250);
  --ink: oklch(22% 0.018 255);
  --muted: oklch(42% 0.018 250);
  --faint: oklch(56% 0.016 250);
  --accent: oklch(46% 0.12 250);
  --hairline: oklch(86% 0.012 250);
  --hairline-strong: oklch(73% 0.02 250);
  --rule: oklch(28% 0.02 250 / 0.16);

  --font-display: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;

  --text-display: clamp(2.55rem, 5.25vw, 4.75rem);
  --text-xl: clamp(1.9rem, 3.2vw, 2.8rem);
  --text-lg: clamp(1.2rem, 1.8vw, 1.45rem);
  --text-md: 1.0625rem;
  --text-sm: 0.9375rem;
  --text-xs: 0.78rem;

  --leading-display: 0.98;
  --leading-body: 1.62;
  --tracking-display: -0.035em;

  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.25rem;
  --space-9: 6.5rem;

  --radius: 999px;
  --radius-card: 18px;
  --shadow-soft: 0 16px 50px oklch(26% 0.02 250 / 0.08);
  --shadow-lift: 0 22px 65px oklch(26% 0.02 250 / 0.12);
  --nav-h: 4.25rem;
  --content-w: 72rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 280ms;

  --px: 0.5;
  --py: 0.32;
  --pv: 0;
  --grain-opacity: 0.028;
  --grain-spot: 0.045;
}

@media (max-width: 575.98px) {
  :root {
    --text-display: clamp(2.35rem, 10.5vw, 2.75rem);
    --text-xl: clamp(1.8rem, 8vw, 2.2rem);
    --space-8: 3.25rem;
    --space-9: 4.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
  }
}