:root {
  --font-sans: "Inter", sans-serif;
  --font-display: "Inter Tight", "Inter", sans-serif;
  --font-button: var(--font-display);

  /* Desktop defaults (>=1024px) */
  --text-caption: 400 16px/20px var(--font-sans);
  --text-button: 500 16px/20px var(--font-sans);

  --text-h1: 500 64px/1.2 var(--font-display);
  --text-h2: 500 48px/1.2 var(--font-display);
  --text-h3: 500 32px/1.2 var(--font-display);
  --text-h4: 500 20px/1.2 var(--font-display);
  --text-h5: 500 16px/1.2 var(--font-display);

  --text-body: 400 16px/1.5 var(--font-sans);
  --text-lead: 400 18px/1.5 var(--font-sans);
  --text-mobile-nav-link: 400 18px/1.2 var(--font-sans);
}

@media (min-width: 640px) and (max-width: 1023px) {
  :root {
    /* Tablet overrides (640px–1023px) */
    --text-h1: 500 52px/1.2 var(--font-display);
    --text-h2: 500 40px/1.2 var(--font-display);
    --text-h3: 500 28px/1.2 var(--font-display);
    --text-h4: 500 20px/1.2 var(--font-display);
    --text-h5: 500 16px/1.2 var(--font-display);
  }
}

@media (max-width: 639px) {
  :root {
    /* Mobile overrides (<640px) */
    --text-caption: 400 16px/20px var(--font-sans);
    --text-button: 500 16px/20px var(--font-sans);

    --text-h1: 500 36px/1.2 var(--font-display);
    --text-h2: 500 32px/1.2 var(--font-display);
    --text-h3: 500 24px/1.2 var(--font-display);
    --text-h4: 500 18px/1.2 var(--font-display);
    --text-h5: 500 16px/1.2 var(--font-display);

    --text-body: 400 14px/1.5 var(--font-sans);
    --text-lead: 400 16px/1.5 var(--font-sans);
  }
}