:root{
  /* ---- Families ---- */
  --font-serif:'Spectral',Georgia,'Times New Roman',serif;      /* quotes, reflections, display */
  --font-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; /* interface */

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

  /* ---- Type scale (mobile-first, px) ---- */
  --fs-display:34px;   /* big serif quote / hero */
  --fs-title:26px;     /* screen title (serif) */
  --fs-heading:20px;   /* section heading (sans) */
  --fs-body-lg:17px;   /* reading body */
  --fs-body:15px;      /* UI body */
  --fs-label:13px;     /* labels, nav */
  --fs-caption:11.5px; /* captions, meta */
  --fs-micro:10px;     /* overline / stat units */

  /* ---- Line heights ---- */
  --lh-tight:1.15;     /* @kind font */
  --lh-snug:1.3;       /* @kind font */
  --lh-normal:1.5;     /* @kind font */
  --lh-relaxed:1.65;   /* @kind font */

  /* ---- Tracking ---- */
  --ls-tight:-0.02em;  /* @kind font */
  --ls-normal:0;       /* @kind font */
  --ls-wide:0.02em;    /* @kind font */
  --ls-overline:0.14em; /* @kind font */

  /* ---- Semantic text roles (font shorthand) ---- */
  --text-quote:var(--fs-display)/var(--lh-snug) var(--font-serif);   /* @kind font */
  --text-title:var(--fs-title)/var(--lh-tight) var(--font-serif);    /* @kind font */
  --text-heading:var(--fs-heading)/var(--lh-snug) var(--font-sans);  /* @kind font */
}