:root {
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-text: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Weights — the ladder is 300 / 400 / 500 / 600 / 700. */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Display sizes — Bricolage Grotesque, tight tracking */
  --text-hero: 68px;
  --text-hero-lh: 1.02;
  --text-hero-ls: -0.03em;

  --text-display: 48px;
  --text-display-lh: 1.06;
  --text-display-ls: -0.025em;

  --text-title: 34px;
  --text-title-lh: 1.14;
  --text-title-ls: -0.02em;

  --text-heading: 24px;
  --text-heading-lh: 1.25;
  --text-heading-ls: -0.015em;

  --text-subhead: 19px;
  --text-subhead-lh: 1.35;
  --text-subhead-ls: -0.01em;

  /* Text sizes — Hanken Grotesk */
  --text-lead: 21px;
  --text-lead-lh: 1.55;
  --text-lead-ls: -0.005em;

  --text-body: 17px;
  --text-body-lh: 1.65;
  --text-body-ls: 0;

  --text-small: 15px;
  --text-small-lh: 1.55;
  --text-small-ls: 0;

  --text-caption: 13px;
  --text-caption-lh: 1.45;
  --text-caption-ls: 0.005em;

  /* Meta — JetBrains Mono, uppercase eyebrows and labels */
  --text-meta: 12px;
  --text-meta-lh: 1.4;
  --text-meta-ls: 0.08em;
}

/* Fluid display sizes: the hero shrinks before anything else does. */
@media (max-width: 900px) {
  :root {
    --text-hero: 44px;
    --text-display: 36px;
    --text-title: 28px;
    --text-heading: 21px;
    --text-lead: 19px;
  }
}
@media (max-width: 520px) {
  :root {
    --text-hero: 34px;
    --text-display: 29px;
    --text-title: 24px;
  }
}