/* ============================================================
   TYPOGRAPHY — the unbreakable boundary:
   Display = SF Pro Display 600, negative tracking.
   Body    = SF Pro Text 400, 17px.
   Weight ladder is 300 / 400 / 600 / 700. 500 is ABSENT.
   ============================================================ */
:root {
  --font-display-family: var(--font-display);
  --font-text-family: var(--font-text);

  /* Weights */
  --weight-light: 300;   /* rare, airy moments only */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;    /* sparingly, taglines */

  /* ---- Type ramp: size / weight / line-height / tracking ---- */
  --type-hero-display: 600 56px/1.07 var(--font-display);
  --type-hero-tracking: -0.28px;

  --type-display-lg: 600 40px/1.10 var(--font-display);
  --type-display-lg-tracking: 0;

  --type-display-md: 600 34px/1.47 var(--font-text);
  --type-display-md-tracking: -0.374px;

  --type-lead: 400 28px/1.14 var(--font-text);
  --type-lead-tracking: 0.196px;

  --type-lead-airy: 300 24px/1.5 var(--font-text);
  --type-lead-airy-tracking: 0;

  --type-tagline: 600 21px/1.19 var(--font-text);
  --type-tagline-tracking: 0.231px;

  --type-body-strong: 600 17px/1.24 var(--font-text);
  --type-body-strong-tracking: -0.374px;

  --type-body: 400 17px/1.47 var(--font-text);
  --type-body-tracking: -0.374px;

  --type-dense-link: 400 17px/2.41 var(--font-text);
  --type-dense-link-tracking: 0;

  --type-caption: 400 14px/1.43 var(--font-text);
  --type-caption-tracking: -0.224px;

  --type-caption-strong: 600 14px/1.29 var(--font-text);
  --type-caption-strong-tracking: -0.224px;

  --type-button-large: 300 18px/1.0 var(--font-text);
  --type-button-large-tracking: 0;

  --type-button-utility: 400 14px/1.29 var(--font-text);
  --type-button-utility-tracking: -0.224px;

  --type-fine-print: 400 12px/1.0 var(--font-text);
  --type-fine-print-tracking: -0.12px;

  --type-micro-legal: 400 10px/1.3 var(--font-text);
  --type-micro-legal-tracking: -0.08px;

  --type-nav-link: 400 12px/1.0 var(--font-text);
  --type-nav-link-tracking: -0.12px;
}

/* ---- Utility classes (optional convenience) ---- */
.t-hero-display   { font: var(--type-hero-display);   letter-spacing: var(--type-hero-tracking); }
.t-display-lg     { font: var(--type-display-lg);     letter-spacing: var(--type-display-lg-tracking); }
.t-display-md     { font: var(--type-display-md);     letter-spacing: var(--type-display-md-tracking); }
.t-lead           { font: var(--type-lead);           letter-spacing: var(--type-lead-tracking); }
.t-lead-airy      { font: var(--type-lead-airy);      letter-spacing: var(--type-lead-airy-tracking); }
.t-tagline        { font: var(--type-tagline);        letter-spacing: var(--type-tagline-tracking); }
.t-body-strong    { font: var(--type-body-strong);    letter-spacing: var(--type-body-strong-tracking); }
.t-body           { font: var(--type-body);           letter-spacing: var(--type-body-tracking); }
.t-caption        { font: var(--type-caption);        letter-spacing: var(--type-caption-tracking); }
.t-fine-print     { font: var(--type-fine-print);     letter-spacing: var(--type-fine-print-tracking); }