/* Manrope only. Weight does the work — 400 body, 500/600 UI, 700/800 headings. */
:root {
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --text-2xs: 10px;      --leading-2xs: 14px;   /* step hints */
  --text-11: 11px;       --leading-11: 15px;    /* dense meta rows */
  --text-xs: 12px;       --leading-xs: 16px;
  --text-sm: 14px;       --leading-sm: 20px;    /* the app's workhorse size */
  --text-base: 16px;     --leading-base: 24px;
  --text-lg: 18px;       --leading-lg: 28px;
  --text-xl: 20px;       --leading-xl: 28px;
  --text-2xl: 24px;      --leading-2xl: 32px;   /* hero panel h1 */
  --text-3xl: 30px;      --leading-3xl: 36px;   /* welcome screen h1 */
  --text-5xl: 48px;      --leading-5xl: 1;      /* celebration emoji */

  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;   /* uppercase eyebrows */

  /* Semantic roles */
  --type-hero: var(--font-weight-bold) var(--text-2xl) / var(--leading-2xl) var(--font-sans);
  --type-page-title: var(--font-weight-bold) var(--text-3xl) / var(--leading-3xl) var(--font-sans);
  --type-section: var(--font-weight-bold) var(--text-lg) / var(--leading-lg) var(--font-sans);
  --type-card-title: var(--font-weight-semibold) var(--text-sm) / var(--leading-sm) var(--font-sans);
  --type-body: var(--font-weight-regular) var(--text-sm) / var(--leading-sm) var(--font-sans);
  --type-meta: var(--font-weight-regular) var(--text-xs) / var(--leading-xs) var(--font-sans);
  --type-badge: var(--font-weight-semibold) var(--text-xs) / var(--leading-xs) var(--font-sans);
}