/* ==========================================================================
   TYPOGRAPHY
   Style classes are NOT heading levels (design-rules §18). Use the correct
   semantic element, then apply a .t-* class for its visual level.
   R5: headings are Loos Wide at 700 (the kit has no Loos 600). Body, lead,
   labels, numerals and every control stay Mundial.
   ========================================================================== */

.t-display,
.t-h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  color: var(--color-text-heading);
  text-wrap: balance;
}

.t-h1 { font-size: var(--font-size-h1); }

.t-h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-heading);
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-heading);
  text-wrap: balance;
}

.t-lead {
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-lead);
  letter-spacing: var(--letter-spacing-lead);
  color: var(--color-text-body);
  max-width: var(--measure-prose-wide);
  text-wrap: pretty;
}

/* Weight 300 has a 22px floor (design-rules §5). The lead only reaches 22px
   at ≥992, so light is switched on there and nowhere else. Below that it
   stays 400 — a thin stroke at 18–20px on pure black thins further on most
   displays. This is why the floor is a rule and not a preference. */
@media (min-width: 992px) {
  .t-lead { font-weight: var(--font-weight-light); }
}

.t-body {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-body);
  max-width: var(--measure-prose);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   UPPERCASE
   Permitted for eyebrows, labels, metadata, and display headings of ≤4 words.
   Always carries positive tracking.
   -------------------------------------------------------------------------- */
.t-eyebrow {
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-accent-emphasis);
}

/* --------------------------------------------------------------------------
   NUMERAL
   Distinguished by SCALE and ACCENT, not by weight. Never below H3.
   STAYS IN MUNDIAL — see the note on --font-family-heading. Counters need
   tabular figures and must not reflow while counting.
   -------------------------------------------------------------------------- */
.t-numeral {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-heading);
}