:root{
  /* Families */
  --font-display:"Impact","Haettenschweiler","Arial Narrow",sans-serif; /* condensed all-caps headlines */
  --font-headline:var(--font-display);                              /* alias */
  --font-stamp:"3rd Man","Impact",sans-serif;                       /* distressed street-poster accent — sparingly */
  --font-core:"Century Gothic Pan","Century Gothic","Questrial",sans-serif; /* everything else */
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; /* IDs, codes, doses */

  /* Scale — 1.25 major third, 16px base */
  --fs-3xs:11px;
  --fs-2xs:12px;
  --fs-xs:13px;
  --fs-sm:14px;
  --fs-base:16px;
  --fs-md:18px;
  --fs-lg:21px;
  --fs-xl:26px;
  --fs-2xl:32px;
  --fs-3xl:40px;
  --fs-4xl:52px;
  --fs-5xl:68px;
  --fs-6xl:88px;
  --fs-7xl:120px;

  --lh-tight:0.94; /* @kind other */
  --lh-snug:1.1; /* @kind other */
  --lh-heading:1.15; /* @kind other */
  --lh-body:1.6; /* @kind other */
  --lh-loose:1.75; /* @kind other */

  --ls-headline:0.01em; /* @kind other */   /* Impact caps need a hair of air */
  --ls-eyebrow:0.22em; /* @kind other */    /* wide-tracked lowercase eyebrows */
  --ls-label:0.08em; /* @kind other */
  --ls-body:0; /* @kind other */

  --fw-light:300; /* @kind other */
  --fw-regular:400; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:700; /* @kind other */
  --fw-black:900; /* @kind other */

  /* Semantic roles */
  --text-hero:var(--fs-6xl);
  --text-h1:var(--fs-4xl);
  --text-h2:var(--fs-3xl);
  --text-h3:var(--fs-xl);
  --text-body:var(--fs-base);
  --text-body-lg:var(--fs-md);
  --text-caption:var(--fs-sm);
  --text-legal:var(--fs-2xs);
}