:root {
  --color-navy-950: oklch(17% 0.08 287);
  --color-navy-900: oklch(22% 0.12 285);
  --color-navy-700: oklch(38% 0.16 282);
  --color-pink: oklch(68% 0.25 10);
  --color-pink-dark: oklch(59% 0.24 10);
  --color-green: oklch(88% 0.22 151);
  --color-green-hover: oklch(82% 0.23 151);
  --color-lilac: oklch(93% 0.035 289);
  --color-paper: oklch(99% 0.004 286);
  --color-white: oklch(100% 0 0);
  --color-ink: oklch(24% 0.055 286);
  --color-muted: oklch(49% 0.025 286);
  --color-border: oklch(86% 0.025 286);

  --font-display: "Oswald", "Franklin Gothic Condensed", sans-serif;
  --font-body: "Montserrat", "Trebuchet MS", sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;
  --text-hero: clamp(2.35rem, 5.4vw, 5.4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-section: clamp(4rem, 8vw, 7rem);

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 0 color-mix(in oklch, var(--color-navy-950) 7%, transparent);
  --shadow-md: 0 18px 45px color-mix(in oklch, var(--color-navy-950) 14%, transparent);
  --shadow-lg: 0 28px 80px color-mix(in oklch, var(--color-navy-950) 28%, transparent);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 650ms;
}