/* TYPOGRAPHY — the whole system is ONE family in two optical sizes (display + text).
   Rules that make it read Apple-like:
   • Headlines: weight 600, negative tracking that tightens as size grows, line-height ~1.05–1.1.
   • Body: weight 400, POSITIVE tracking at 21px+, slightly negative at 17px and below.
   • Never letterspace out headlines; never use weight 700 on huge display sizes.
   • Numerals in price/stat display use tabular figures. */
:root {
  /* Display scale (marketing headlines) */
  --fs-display-1: 96px;
  --lh-display-1: 1.05;
  --tr-display-1: -0.015em;
  --fs-display-2: 80px;
  --lh-display-2: 1.05;
  --tr-display-2: -0.015em;
  --fs-display-3: 64px;
  --lh-display-3: 1.0625;
  --tr-display-3: -0.009em;
  --fs-headline-1: 56px;
  --lh-headline-1: 1.07143;
  --tr-headline-1: -0.005em;
  --fs-headline-2: 48px;
  --lh-headline-2: 1.08349;
  --tr-headline-2: -0.003em;
  --fs-headline-3: 40px;
  --lh-headline-3: 1.1;
  --tr-headline-3: 0em;
  --fs-title-1: 32px;
  --lh-title-1: 1.125;
  --tr-title-1: 0.004em;
  --fs-title-2: 28px;
  --lh-title-2: 1.14286;
  --tr-title-2: 0.007em;
  --fs-title-3: 24px;
  --lh-title-3: 1.16667;
  --tr-title-3: 0.009em;
  --fs-title-4: 21px;
  --lh-title-4: 1.19048;
  --tr-title-4: 0.011em;

  /* Text scale (body + UI) */
  --fs-body-lg: 21px;
  --lh-body-lg: 1.381;
  --tr-body-lg: 0.011em;
  --fs-body: 19px;
  --lh-body: 1.4211;
  --tr-body: 0.012em;
  --fs-body-sm: 17px;
  --lh-body-sm: 1.47059;
  --tr-body-sm: -0.022em;
  --fs-ui: 14px;
  --lh-ui: 1.42859;
  --tr-ui: -0.016em;
  --fs-caption: 12px;
  --lh-caption: 1.33337;
  --tr-caption: -0.01em;
  --fs-eyebrow: 19px;
  --lh-eyebrow: 1.2105;
  --tr-eyebrow: 0.012em;

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

  /* Mobile display steps (apply under 734px) */
  --fs-display-1-sm: 48px;
  --fs-display-2-sm: 40px;
  --fs-headline-1-sm: 32px;
  --fs-headline-2-sm: 28px;
  --fs-title-1-sm: 24px;
}