/* ============================================================
   MatterMake — Typography
   Headings & UI: Titling Gothic FB (standard). Big statements
   and the signature oversized numerals: Titling Gothic FB Wide.
   Body: Suisse Intl. Headings lean sentence-case / lowercase,
   often closed with a trailing full stop ("about us.").
   ============================================================ */

:root {
  /* --- Families --- */
  --font-display: "Titling Gothic FB", "Helvetica Neue", Arial, sans-serif;
  --font-display-wide: "Titling Gothic FB Wide", "Titling Gothic FB", "Helvetica Neue", sans-serif;
  --font-display-ext: "Titling Gothic FB Ext", "Titling Gothic FB", "Helvetica Neue", sans-serif;
  --font-body: "Suisse Intl", "Helvetica Neue", Arial, sans-serif;
  --font-numeral: "Titling Gothic FB Wide", "Titling Gothic FB", sans-serif;

  /* --- Weights --- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* --- Type scale (px on a 1.0rem = 16px base) --- */
  --text-3xs: 0.6875rem;   /* 11 — micro labels, page numbers */
  --text-2xs: 0.75rem;     /* 12 — meta, captions */
  --text-xs: 0.8125rem;    /* 13 — small UI */
  --text-sm: 0.9375rem;    /* 15 — secondary body */
  --text-base: 1.0625rem;  /* 17 — body */
  --text-md: 1.25rem;      /* 20 — lead / large body */
  --text-lg: 1.625rem;     /* 26 — H4 / subhead */
  --text-xl: 2.25rem;      /* 36 — H3 */
  --text-2xl: 3.25rem;     /* 52 — H2 */
  --text-3xl: 4.5rem;      /* 72 — H1 */
  --text-4xl: 6.5rem;      /* 104 — display */
  --text-numeral: 12rem;   /* 192 — oversized section numerals */

  /* --- Line heights --- */
  --leading-none: 1;
  --leading-tight: 1.08;   /* display headlines */
  --leading-snug: 1.22;    /* subheads */
  --leading-body: 1.55;    /* body copy, comfortable */
  --leading-loose: 1.7;    /* multi-column body */

  /* --- Letter-spacing --- */
  --tracking-tight: -0.02em;   /* large display */
  --tracking-normal: 0;
  --tracking-wide: 0.04em;     /* labels */
  --tracking-caps: 0.14em;     /* all-caps eyebrows */

  /* ---------- Semantic roles ---------- */
  --type-display: var(--weight-regular) var(--text-4xl)/var(--leading-tight) var(--font-display-wide);
  --type-h1: var(--weight-regular) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --type-h2: var(--weight-regular) var(--text-2xl)/var(--leading-tight) var(--font-display);
  --type-h3: var(--weight-medium) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-h4: var(--weight-medium) var(--text-lg)/var(--leading-snug) var(--font-display);
  --type-lead: var(--weight-regular) var(--text-md)/var(--leading-body) var(--font-body);
  --type-body: var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-body);
  --type-small: var(--weight-regular) var(--text-sm)/var(--leading-body) var(--font-body);
  --type-caption: var(--weight-regular) var(--text-2xs)/var(--leading-snug) var(--font-body);
  --type-eyebrow: var(--weight-medium) var(--text-2xs)/var(--leading-none) var(--font-display);
}