:root {
  /* Sizes are the values measured off the source at a 1440-wide layout. */
  --text-2xs: 10px;   /* uppercase sidebar section labels */
  --text-xs: 11px;    /* axis ticks, delta %, footnotes */
  --text-sm: 12px;    /* legends, column meta */
  --text-base: 13px;  /* table cells, dense body */
  --text-md: 14px;    /* nav items, default body */
  --text-lg: 16px;    /* card titles */
  --text-xl: 20px;
  --text-2xl: 24px;   /* KPI figures */
  --text-3xl: 28px;   /* hero figure in a focus card */
  --text-4xl: 36px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;   /* figures */
  --leading-snug: 1.3;     /* titles */
  --leading-normal: 1.45;  /* body */
  --leading-relaxed: 1.6;  /* prose */

  --tracking-label: 0.08em;   /* uppercase micro labels */
  --tracking-normal: 0;
  --tracking-figure: -0.02em; /* 20px+ numerals */

  /* Composed roles */
  --type-section-label: var(--weight-semibold) var(--text-2xs) / var(--leading-normal) var(--font-sans);
  --type-card-title: var(--weight-semibold) var(--text-lg) / var(--leading-snug) var(--font-sans);
  --type-figure: var(--weight-bold) var(--text-2xl) / var(--leading-tight) var(--font-sans);
  --type-body: var(--weight-regular) var(--text-md) / var(--leading-normal) var(--font-sans);
  --type-cell: var(--weight-medium) var(--text-base) / var(--leading-normal) var(--font-sans);
  --type-caption: var(--weight-regular) var(--text-xs) / var(--leading-normal) var(--font-sans);
}