:root {
  --color-navy: oklch(18% 0.035 246);
  --color-navy-2: oklch(24% 0.045 246);
  --color-navy-3: oklch(31% 0.042 246);
  --color-paper: oklch(97% 0.006 246);
  --color-paper-2: oklch(93% 0.009 246);
  --color-ink: oklch(20% 0.03 246);
  --color-muted: oklch(47% 0.018 246);
  --color-rule: oklch(79% 0.014 246);
  --color-yellow: oklch(82% 0.17 89);
  --color-yellow-ink: oklch(24% 0.032 246);
  --color-focus: oklch(78% 0.2 89);
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-4xl: clamp(6rem, 12vw, 12rem);
  --text-xs: .75rem;
  --text-sm: .9375rem;
  --text-base: 1.125rem;
  --text-md: 1.375rem;
  --text-lg: clamp(1.7rem, 2.2vw, 2.25rem);
  --text-xl: clamp(2.5rem, 5vw, 5.75rem);
  --text-display: clamp(3.6rem, 8vw, 7.7rem);
  --container: min(1440px, calc(100vw - 64px));
  --nav-height: 72px;
  --rule-hair: 1px;
  --radius-none: 0;
  --dur-fast: 120ms;
  --dur-short: 200ms;
  --dur-medium: 450ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}