/*
 * Tivra — Typography
 * ──────────────────
 * Átomos tipográficos da página. 5 níveis:
 *   .display  → herói (clamp 28-52px)
 *   .h1       → secções (clamp 18-26px)
 *   .h2       → eyebrow dentro de card (12px fixo)
 *   .lead     → subtítulo da hero/secção (20px)
 *   .caption  → rodapé, navegação secundária (12px)
 *
 * .display, .h1 e .h2 são Michroma (sempre uppercase).
 * .lead e .caption são Raleway.
 *
 * Tokens consumidos: --head, --body, --size-*, --lh-*, --tracking-*,
 *                     --text, --text-2, --mute.
 */

.display {
  font-family: var(--head);
  font-size: var(--size-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.h1 {
  font-family: var(--head);
  font-size: var(--size-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  text-transform: uppercase;
}

.h2 {
  font-family: var(--head);
  font-size: var(--size-h2);
  letter-spacing: var(--tracking-h2);
  text-transform: uppercase;
}

.lead {
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  max-width: 40ch;
  color: var(--text-2);
}

.caption {
  font-size: var(--size-caption);
  letter-spacing: 0.04em;
  color: var(--mute);
}