:root{
  /* Families */
  --font-display:"Saira Condensed","Oswald","Arial Narrow",sans-serif; /* headings, ranks, hero numbers */
  --font-body:"Barlow","Helvetica Neue",Arial,sans-serif;              /* body, labels, controls */
  --font-numeric:"Saira Condensed","Oswald",sans-serif;                /* scores, timers, PRs */

  /* Weights */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-black:900; /* @kind font */

  /* Display / hero numbers — Saira Condensed, uppercase, tight */
  --type-hero-size:80px;    --type-hero-lh:0.88; /* @kind other */  --type-hero-ls:-0.01em; /* @kind other */  --type-hero-weight:900; /* @kind other */
  --type-display-1-size:56px; --type-display-1-lh:0.94; /* @kind other */ --type-display-1-ls:0em; /* @kind other */ --type-display-1-weight:800; /* @kind other */
  --type-display-2-size:40px; --type-display-2-lh:1.0; /* @kind other */  --type-display-2-ls:0.01em; /* @kind other */ --type-display-2-weight:700; /* @kind other */

  /* Headings — Saira Condensed */
  --type-h1-size:32px; --type-h1-lh:1.05; /* @kind other */ --type-h1-ls:0.02em; /* @kind other */ --type-h1-weight:700; /* @kind other */
  --type-h2-size:26px; --type-h2-lh:1.1; /* @kind other */  --type-h2-ls:0.02em; /* @kind other */ --type-h2-weight:700; /* @kind other */
  --type-h3-size:21px; --type-h3-lh:1.15; /* @kind other */ --type-h3-ls:0.03em; /* @kind other */ --type-h3-weight:600; /* @kind other */
  --type-h4-size:17px; --type-h4-lh:1.2; /* @kind other */  --type-h4-ls:0.04em; /* @kind other */ --type-h4-weight:600; /* @kind other */

  /* Body — Barlow */
  --type-body-lg-size:17px; --type-body-lg-lh:1.5; /* @kind other */
  --type-body-size:15px;    --type-body-lh:1.5; /* @kind other */
  --type-body-sm-size:13px; --type-body-sm-lh:1.45; /* @kind other */

  /* Labels & micro — Barlow, uppercase, wide */
  --type-label-size:13px;   --type-label-lh:1.2; /* @kind other */ --type-label-ls:0.08em; /* @kind other */ --type-label-weight:600; /* @kind other */
  --type-caption-size:11px; --type-caption-lh:1.2; /* @kind other */ --type-caption-ls:0.12em; /* @kind other */ --type-caption-weight:600; /* @kind other */

  /* Controls */
  --type-button-size:16px; --type-button-ls:0.06em; /* @kind other */ --type-button-weight:700; /* @kind other */
}