:root{
  /* Regular / medium text: the real supplied Avenir Next cut. */
  --font-core:"Avenir Next","Avenir Next LT Pro",Mulish,"Segoe UI",system-ui,sans-serif;
  /* Weights 600+ : Mulish first, because no Avenir Next bold cut was supplied
     and a real bold beats a synthesised one. Use this for ALL bold type. */
  --font-display:Mulish,"Avenir Next","Segoe UI",system-ui,sans-serif;
  --font-bold:var(--font-display);
  --font-body:var(--font-core);
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --weight-regular:400;
  --weight-medium:500;
  --weight-demi:600;
  --weight-bold:700;
  --weight-heavy:800;

  /* Type scale — 1.25 ratio off a 16px body */
  --size-3xs:11px;
  --size-2xs:12px;
  --size-xs:13px;
  --size-sm:15px;
  --size-md:17px;
  --size-lg:21px;
  --size-xl:27px;
  --size-2xl:34px;
  --size-3xl:44px;
  --size-4xl:58px;
  --size-5xl:76px;

  --leading-tight:1.04;
  --leading-snug:1.18;
  --leading-normal:1.5;
  --leading-loose:1.65;

  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-wide:0.06em;
  --tracking-eyebrow:0.18em;

  /* Roles */
  --type-display:var(--weight-bold) var(--size-4xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-bold) var(--size-3xl)/var(--leading-tight) var(--font-display);
  --type-h2:var(--weight-bold) var(--size-2xl)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-demi) var(--size-xl)/var(--leading-snug) var(--font-display);
  --type-h4:var(--weight-demi) var(--size-lg)/var(--leading-snug) var(--font-display);
  --type-lead:var(--weight-regular) var(--size-lg)/var(--leading-normal) var(--font-body);
  --type-body:var(--weight-regular) var(--size-md)/var(--leading-loose) var(--font-body);
  --type-small:var(--weight-regular) var(--size-sm)/var(--leading-normal) var(--font-body);
  --type-caption:var(--weight-medium) var(--size-2xs)/var(--leading-normal) var(--font-body);
  --type-eyebrow:var(--weight-bold) var(--size-2xs)/1.2 var(--font-display);
}