/* ==========================================================================
   Wintree Design System — Typography Tokens
   Display = Waldenburg Light @300 (licensed — not bundled; system-serif fallback until uploaded).
   Body / nav / caption / button = Inter, with subtle +0.15–0.18px tracking.
   ========================================================================== */

:root {
  /* --- Families ---------------------------------------------------------- */
  --font-display: 'Waldenburg', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* --- Display weight: the editorial signature. Never bold. -------------- */
  --weight-display: 300;     /* renders via system-serif fallback until Waldenburg is uploaded */
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* --- Display scale (Waldenburg, negative tracking) --------------------- */
  --type-display-mega-size: 64px;
  --type-display-mega-lh: 1.05;
  --type-display-mega-ls: -1.92px;

  --type-display-xl-size: 48px;
  --type-display-xl-lh: 1.08;
  --type-display-xl-ls: -0.96px;

  --type-display-lg-size: 36px;
  --type-display-lg-lh: 1.17;
  --type-display-lg-ls: -0.36px;

  --type-display-md-size: 32px;
  --type-display-md-lh: 1.13;
  --type-display-md-ls: -0.32px;

  --type-display-sm-size: 24px;
  --type-display-sm-lh: 1.2;
  --type-display-sm-ls: 0;

  /* --- Title scale (Inter, medium) -------------------------------------- */
  --type-title-md-size: 20px;
  --type-title-md-lh: 1.35;
  --type-title-md-ls: 0;

  --type-title-sm-size: 18px;
  --type-title-sm-lh: 1.44;
  --type-title-sm-ls: 0.18px;

  /* --- Body scale (Inter, subtle tracking) ------------------------------ */
  --type-body-md-size: 16px;
  --type-body-md-lh: 1.5;
  --type-body-md-ls: 0.16px;

  --type-body-sm-size: 15px;
  --type-body-sm-lh: 1.47;
  --type-body-sm-ls: 0.15px;

  --type-caption-size: 14px;
  --type-caption-lh: 1.5;
  --type-caption-ls: 0;

  --type-caption-upper-size: 12px;
  --type-caption-upper-lh: 1.4;
  --type-caption-upper-ls: 0.96px;

  /* --- UI text ----------------------------------------------------------- */
  --type-button-size: 15px;
  --type-button-lh: 1;
  --type-nav-size: 15px;
  --type-nav-lh: 1.4;
}

/* ==========================================================================
   Optional helper classes — use the vars directly in components,
   or these utilities for prose / specimen cards.
   ========================================================================== */
.t-display-mega {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-display-mega-size);
  line-height: var(--type-display-mega-lh);
  letter-spacing: var(--type-display-mega-ls);
  color: var(--text-display);
}
.t-display-xl {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-ls);
  color: var(--text-display);
}
.t-display-lg {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-ls);
  color: var(--text-display);
}
.t-display-md {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-display-md-size);
  line-height: var(--type-display-md-lh);
  letter-spacing: var(--type-display-md-ls);
  color: var(--text-display);
}
.t-display-sm {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-display-sm-size);
  line-height: var(--type-display-sm-lh);
  color: var(--text-display);
}
.t-title-md {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--type-title-md-size);
  line-height: var(--type-title-md-lh);
  color: var(--text-heading);
}
.t-title-sm {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--type-title-sm-size);
  line-height: var(--type-title-sm-lh);
  letter-spacing: var(--type-title-sm-ls);
  color: var(--text-heading);
}
.t-body-md {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  letter-spacing: var(--type-body-md-ls);
  color: var(--text-body);
}
.t-body-strong {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  letter-spacing: var(--type-body-md-ls);
  color: var(--text-body);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  letter-spacing: var(--type-body-sm-ls);
  color: var(--text-body);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--text-muted);
}
.t-caption-upper {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--type-caption-upper-size);
  line-height: var(--type-caption-upper-lh);
  letter-spacing: var(--type-caption-upper-ls);
  text-transform: uppercase;
  color: var(--text-muted);
}