/* ==========================================================================
   Typography roles — the one place to tweak general-page text.

   Retro forum chrome (cards, forum tables, section bars) keeps its own
   long-standing semantic classes in legacy.css / application.tailwind.css.
   THIS file owns the modern/general pages (admin, static pages, wiki, maps,
   feature stubs): every heading / body / caption there gets a role class
   here instead of a raw Tailwind text-size utility.

   Roles set ONLY font-size + line-height. Weight, family, and color stay
   orthogonal — apply them with the token-backed utilities in markup
   (font-semibold/-medium/-bold, font-code, text-fg*/text-fg-muted). That
   keeps a heading's size and its weight independently tweakable and avoids
   the `font:` shorthand clobbering a utility.

   Sizes resolve to the --text-* tokens in tokens.css. To resize a whole
   tier, change the token; to re-map a role to a different tier, change it
   here. Nothing else references these px directly.

     role          size (token)     px    typical use
     .type-display  --text-5xl       24    page hero title
     .type-h1       --text-4xl       20    section heading
     .type-h2       --text-3xl       18    subsection heading
     .type-lead     --text-3xl       18    intro / lead paragraph
     .type-body     --text-lg        14    default prose, labels, values
     .type-meta     --text-base      12    small print, captions, chips
     .type-fine     --text-2xs        9    legalese / footnote
     .type-emoji    --text-6xl       60    decorative glyph
   ========================================================================== */

.type-display {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
}

.type-h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
}

.type-h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

.type-lead {
  font-size: var(--text-3xl);
  line-height: var(--leading-normal);
}

.type-body {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.type-meta {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.type-fine {
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
}

.type-emoji {
  font-size: var(--text-6xl);
  line-height: 1;
}