/* ============================================================
   TYPOGRAPHY
   Single family (--font-sans). Display weight stays at 500 —
   never bold. CTA + nav labels render uppercase with tracking.
   Negative letter-spacing on display sizes only; body stays at 0.
   Each role is exposed as a composite token + matching utility class.
   ============================================================ */

:root {
  /* Family */
  --font-sans: 'Inter', -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;

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

  /* ---- Display ---- */
  --type-display-mega-size: 80px;
  --type-display-mega-weight: 500;
  --type-display-mega-lh: 1.05;
  --type-display-mega-ls: -1.6px;

  --type-display-xl-size: 56px;
  --type-display-xl-weight: 500;
  --type-display-xl-lh: 1.1;
  --type-display-xl-ls: -1.12px;

  --type-display-lg-size: 36px;
  --type-display-lg-weight: 500;
  --type-display-lg-lh: 1.2;
  --type-display-lg-ls: -0.36px;

  --type-display-md-size: 26px;
  --type-display-md-weight: 500;
  --type-display-md-lh: 1.5;
  --type-display-md-ls: 0.195px;

  /* ---- Titles ---- */
  --type-title-md-size: 18px;
  --type-title-md-weight: 700;
  --type-title-md-lh: 1.2;
  --type-title-md-ls: 0;

  --type-title-sm-size: 16px;
  --type-title-sm-weight: 500;
  --type-title-sm-lh: 1.4;
  --type-title-sm-ls: 0.08px;

  /* ---- Body ---- */
  --type-body-md-size: 14px;
  --type-body-md-weight: 400;
  --type-body-md-lh: 1.5;
  --type-body-md-ls: 0;

  --type-body-sm-size: 13px;
  --type-body-sm-weight: 400;
  --type-body-sm-lh: 1.5;
  --type-body-sm-ls: 0;

  /* ---- Caption ---- */
  --type-caption-size: 12px;
  --type-caption-weight: 400;
  --type-caption-lh: 1.4;
  --type-caption-ls: 0;

  --type-caption-uppercase-size: 11px;
  --type-caption-uppercase-weight: 600;
  --type-caption-uppercase-lh: 1.4;
  --type-caption-uppercase-ls: 1.1px;

  /* ---- Functional labels ---- */
  --type-button-size: 14px;
  --type-button-weight: 700;
  --type-button-lh: 1.0;
  --type-button-ls: 1.4px;

  --type-nav-link-size: 13px;
  --type-nav-link-weight: 600;
  --type-nav-link-lh: 1.4;
  --type-nav-link-ls: 0.65px;

  --type-number-display-size: 80px;
  --type-number-display-weight: 700;
  --type-number-display-lh: 1.0;
  --type-number-display-ls: -1.6px;
}

/* ---- Utility classes (apply a full role in one shot) ---- */
.t-display-mega {
  font: var(--type-display-mega-weight) var(--type-display-mega-size)/var(--type-display-mega-lh) var(--font-sans);
  letter-spacing: var(--type-display-mega-ls);
}
.t-display-xl {
  font: var(--type-display-xl-weight) var(--type-display-xl-size)/var(--type-display-xl-lh) var(--font-sans);
  letter-spacing: var(--type-display-xl-ls);
}
.t-display-lg {
  font: var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-lh) var(--font-sans);
  letter-spacing: var(--type-display-lg-ls);
}
.t-display-md {
  font: var(--type-display-md-weight) var(--type-display-md-size)/var(--type-display-md-lh) var(--font-sans);
  letter-spacing: var(--type-display-md-ls);
}
.t-title-md {
  font: var(--type-title-md-weight) var(--type-title-md-size)/var(--type-title-md-lh) var(--font-sans);
}
.t-title-sm {
  font: var(--type-title-sm-weight) var(--type-title-sm-size)/var(--type-title-sm-lh) var(--font-sans);
  letter-spacing: var(--type-title-sm-ls);
}
.t-body-md {
  font: var(--type-body-md-weight) var(--type-body-md-size)/var(--type-body-md-lh) var(--font-sans);
}
.t-body-sm {
  font: var(--type-body-sm-weight) var(--type-body-sm-size)/var(--type-body-sm-lh) var(--font-sans);
}
.t-caption {
  font: var(--type-caption-weight) var(--type-caption-size)/var(--type-caption-lh) var(--font-sans);
}
.t-caption-uppercase {
  font: var(--type-caption-uppercase-weight) var(--type-caption-uppercase-size)/var(--type-caption-uppercase-lh) var(--font-sans);
  letter-spacing: var(--type-caption-uppercase-ls);
  text-transform: uppercase;
}
.t-button {
  font: var(--type-button-weight) var(--type-button-size)/var(--type-button-lh) var(--font-sans);
  letter-spacing: var(--type-button-ls);
  text-transform: uppercase;
}
.t-nav-link {
  font: var(--type-nav-link-weight) var(--type-nav-link-size)/var(--type-nav-link-lh) var(--font-sans);
  letter-spacing: var(--type-nav-link-ls);
  text-transform: uppercase;
}
.t-number-display {
  font: var(--type-number-display-weight) var(--type-number-display-size)/var(--type-number-display-lh) var(--font-sans);
  letter-spacing: var(--type-number-display-ls);
}