:root {
  --color-navy: #082d61;
  --color-dark-navy: #051e35;
  --color-ocean: #138ed0;
  --color-cyan: #32bcde;
  --color-light-blue: #edf7fb;
  --color-white: #ffffff;
  --color-ink: #102f4c;
  --color-muted: #5f778b;
  --color-line: #b8d2df;
  --color-line-dark: #29506e;

  --font-display: "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  --font-body: "Aptos", "Segoe UI", sans-serif;
  --font-editorial: Georgia, "Times New Roman", serif;

  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.6vw, 1.55rem);
  --text-2xl: clamp(2rem, 3.2vw, 3.75rem);
  --text-hero: clamp(3.6rem, 7.4vw, 7.25rem);

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

  --container: 1280px;
  --container-reading: 760px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius-sm: 2px;
  --radius-pill: 999px;
  --border: 1px solid var(--color-line);
  --shadow-lift: 0 24px 70px rgba(8, 45, 97, .12);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 720px) {
  :root {
    --space-7: 3.5rem;
    --space-8: 4.5rem;
    --space-9: 5.5rem;
  }
}