:root {
  /* ---- Family --------------------------------------------------------- */
  /* Apple's own sites ship San Francisco via the system-font mechanism:
   * -apple-system / BlinkMacSystemFont render genuine SF (with automatic
   * Display vs. Text optical sizing by size) on Apple hardware. Inter is the
   * shippable cross-platform webfont fallback (see fonts.css). If you license
   * SF Pro, add an @font-face in fonts.css and prepend "SF Pro Display". */
  --font-display: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

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

  /* ---- Type scale (px) — Apple-style large display ------------------- */
  --size-hero:     80px;  /* page hero headline */
  --size-display:  56px;  /* section headline */
  --size-title-1:  40px;
  --size-title-2:  28px;
  --size-title-3:  22px;
  --size-body-lg:  21px;  /* intro / lede */
  --size-body:     17px;  /* default body */
  --size-callout:  15px;
  --size-caption:  13px;
  --size-footnote: 12px;

  /* ---- Line heights --------------------------------------------------- */
  --leading-tight: 1.05;   /* hero / display */
  --leading-snug: 1.14;    /* titles */
  --leading-normal: 1.47;  /* body */

  /* ---- Letter spacing ------------------------------------------------- */
  --tracking-hero: -0.022em;
  --tracking-display: -0.018em;
  --tracking-title: -0.012em;
  --tracking-body: -0.003em;
  --tracking-caps: 0.06em;   /* eyebrow / all-caps labels */

  /* ---- Semantic aliases ----------------------------------------------- */
  --text-hero-font: var(--font-display);
  --text-body-font: var(--font-text);
}