:root{
  /* Sizes — the whole system lives in 10px–24px. */
  --text-24:1.5rem;     /* Section Title */
  --text-18:1.125rem;   /* Feature Heading */
  --text-16:1rem;       /* Body */
  --text-14:0.875rem;   /* Button, nav, caption */
  --text-12:0.75rem;    /* Small */
  --text-10-5:0.65625rem; /* Badge */
  --text-10:0.625rem;   /* Micro */

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

  /* Line heights */
  --leading-tight:1.0;
  --leading-heading:1.3;
  --leading-badge:1.33;
  --leading-normal:normal;
  --leading-relaxed:1.5;

  /* Letter spacing */
  --tracking-normal:normal;
  --tracking-button:0.14px;
  --tracking-caps-tight:1.4px;
  --tracking-caps-wide:2px;

  /* Role composites */
  --type-section-title:var(--weight-bold) var(--text-24)/var(--leading-normal) var(--font-display);
  --type-feature-heading:var(--weight-semibold) var(--text-18)/var(--leading-heading) var(--font-ui);
  --type-body:var(--weight-regular) var(--text-16)/var(--leading-normal) var(--font-ui);
  --type-body-bold:var(--weight-bold) var(--text-16)/var(--leading-normal) var(--font-ui);
  --type-button:var(--weight-bold) var(--text-14)/var(--leading-tight) var(--font-ui);
  --type-nav:var(--weight-regular) var(--text-14)/var(--leading-normal) var(--font-ui);
  --type-nav-active:var(--weight-bold) var(--text-14)/var(--leading-normal) var(--font-ui);
  --type-caption:var(--weight-regular) var(--text-14)/var(--leading-normal) var(--font-ui);
  --type-caption-bold:var(--weight-bold) var(--text-14)/var(--leading-relaxed) var(--font-ui);
  --type-small:var(--weight-regular) var(--text-12)/var(--leading-normal) var(--font-ui);
  --type-small-bold:var(--weight-bold) var(--text-12)/var(--leading-relaxed) var(--font-ui);
  --type-badge:var(--weight-semibold) var(--text-10-5)/var(--leading-badge) var(--font-ui);
  --type-micro:var(--weight-regular) var(--text-10)/var(--leading-normal) var(--font-ui);
}