/* ============================================================================
 * typography.css — tc-type-*
 * ----------------------------------------------------------------------------
 * Verbindliches Typo-Rollen-System (M3-inspiriert: Display / Headline / Title /
 * Body / Label / Num). Ordnet die bestehende Token-Groessen-Skala
 * (--tc-text-2xs … 4xl) festen ROLLEN zu, statt dass jede Seite ihre H1–Hx
 * selbst zusammenstellt.
 *
 * QUELLE: Die type-scale-Sektion der component-library.html ist die Referenz;
 * diese Datei macht die dort gezeigten Rollen als echte Klassen verfuegbar.
 *
 * GRUNDREGELN:
 *   - Cinzel (--tc-font-display) fuer Display/Headline/Title/Num
 *   - Lato (--tc-font-body) fuer Body/Label
 *   - Pro Seite genau EIN Display ODER H1 (Seiten-Haupttitel)
 *   - Groesse NIE willkuerlich — immer ueber die Rolle
 *   - Auf akzentfarbigem Banner: --tc-on-banner statt --tc-accent (sonst z.B.
 *     AoS rot-auf-rot). Dafuer Modifier .tc-type--on-banner.
 *
 * GEWICHTE (08.06.2026, Tim — bewusst reduziert, Cinzel wirkt sonst klobig):
 *   Display 700 · H1/H2/H3 600 · Title 600 · Num 700 · Body 400 · Label 600
 *
 * THEME-GETRIEBEN: H1 + Num nutzen --tc-accent (folgt aktivem Theme). Alle
 * anderen nutzen die neutralen Text-Tokens.
 * ============================================================================ */

/* === DISPLAY — Hero-Seitentitel / Victory-Screen (max 1x pro Seite) ======= */
.tc-type-display {
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: var(--tc-text-4xl, 3rem);
  font-weight: var(--tc-weight-bold, 700);
  color: var(--tc-text-strong);
  line-height: var(--tc-leading-tight, 1.1);
  letter-spacing: 0.02em;
  margin: 0;
}

/* === HEADLINES ============================================================ */
.tc-type-h1 {
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: var(--tc-text-3xl, 2.2rem);
  font-weight: var(--tc-weight-semibold, 600);
  color: var(--tc-highlight);
  line-height: 1.15;
  margin: 0;
}

.tc-type-h2 {
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: var(--tc-text-2xl, 1.6rem);
  font-weight: var(--tc-weight-semibold, 600);
  color: var(--tc-text-strong);
  line-height: var(--tc-leading-tight, 1.2);
  margin: 0;
}

.tc-type-h3 {
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: var(--tc-text-xl, 1.3rem);
  font-weight: var(--tc-weight-semibold, 600);
  color: var(--tc-text-strong);
  line-height: 1.25;
  margin: 0;
}

/* === TITLE — Listen-Item-Titel, Sub-Header, betonte Werte ================= */
.tc-type-title {
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: var(--tc-text-lg, 1.1rem);
  font-weight: var(--tc-weight-semibold, 600);
  color: var(--tc-text-strong);
  line-height: 1.3;
  margin: 0;
}

/* === BODY ================================================================= */
.tc-type-body {
  font-family: var(--tc-font-body, 'Lato', sans-serif);
  font-size: var(--tc-text-base, 0.95rem);
  font-weight: var(--tc-weight-normal, 400);
  color: var(--tc-text-default);
  line-height: var(--tc-leading-normal, 1.5);
  margin: 0;
}

.tc-type-body-sm {
  font-family: var(--tc-font-body, 'Lato', sans-serif);
  font-size: var(--tc-text-sm, 0.82rem);
  font-weight: var(--tc-weight-normal, 400);
  color: var(--tc-text-default);
  line-height: var(--tc-leading-normal, 1.5);
  margin: 0;
}

/* === LABEL — Stat-Labels, Tab-Beschriftungen, Feld-Label ================== */
.tc-type-label {
  font-family: var(--tc-font-body, 'Lato', sans-serif);
  font-size: var(--tc-text-xs, 0.72rem);
  font-weight: var(--tc-weight-semibold, 600);
  color: var(--tc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.3;
  margin: 0;
}

/* === META — die Nebenzeile: Datum, Zaehler, Herkunft, Hinweis ==============
   (11.10.2026, #467) Die haeufigste Zeile der Plattform hatte keine Rolle:
   klein, gedaempft, normales Gewicht, KEINE Versalien. Wer sie brauchte, nahm
   `tc-type-label` (und bekam Versalien) oder setzte .68/.7/.72rem von Hand —
   im GM-Cockpit allein 60-mal in zwanzig verschiedenen Groessen.
   `-sm` ist die Stufe darunter fuer Zusaetze IN einer Zeile (Zaehler am
   Zeilenende, Kuerzel hinter einem Namen). Kleiner als 10px wird nichts. */
.tc-type-meta {
  font-family: var(--tc-font-body, 'Lato', sans-serif);
  font-size: var(--tc-text-xs, 0.72rem);
  font-weight: var(--tc-weight-normal, 400);
  color: var(--tc-text-muted);
  line-height: var(--tc-leading-snug, 1.4);
  margin: 0;
}

.tc-type-meta-sm {
  font-family: var(--tc-font-body, 'Lato', sans-serif);
  font-size: var(--tc-text-2xs, 0.625rem);
  font-weight: var(--tc-weight-normal, 400);
  color: var(--tc-text-muted);
  line-height: 1.3;
  margin: 0;
}

/* === NUM — grosse Zahlen (Score, VP, Rating), tabular gegen Layout-Jitter == */
.tc-type-num {
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: var(--tc-text-3xl, 2.2rem);
  font-weight: var(--tc-weight-bold, 700);
  color: var(--tc-highlight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* === MODIFIER ============================================================= */
/* Farb-Overrides (Rolle behaelt Groesse/Gewicht, nur Farbe wechselt) */
/* `.tc-type--accent` ist am 17.08.2026 ERSATZLOS GESTRICHEN. Die Utility hatte
   genau einen Zweck — Text in der Akzentfarbe —, und den gibt es nicht mehr
   (§9: der Akzent faerbt Flaechen und Raender, keinen Text). Ein Alias auf
   --highlight waere ein zweiter Name fuer dieselbe Sache und haette die Falle
   nur umbenannt. Wer die Klasse noch irgendwo stehen hat, bekommt jetzt die
   geerbte Textfarbe: lesbar, nur ohne Betonung. Die drei Aufrufstellen
   (js/bb/bb-league.js) sind auf --highlight umgestellt. */
.tc-type--highlight { color: var(--tc-highlight); }
.tc-type--strong    { color: var(--tc-text-strong); }
.tc-type--muted     { color: var(--tc-text-muted); }
.tc-type--default   { color: var(--tc-text-default); }
/* Zustandsfarben (11.10.2026, #467): geschafft, Achtung, Gefahr, Hinweis.
   Das sind Daten-Farben — sie sagen etwas ueber den Inhalt, nicht ueber das
   Theme, und bleiben deshalb in jedem System gleich. */
.tc-type--success   { color: var(--tc-success); }
.tc-type--warning   { color: var(--tc-warning); }
.tc-type--danger    { color: var(--tc-danger); }
.tc-type--info      { color: var(--tc-info); }

/* Gewicht: eine Zeile betonen, ohne die Rolle zu wechseln (Zeilentitel in
   einer Liste, ein Wert im Fliesstext). `--strong` oben ist die FARBE. */
.tc-type--fett      { font-weight: var(--tc-weight-semibold, 600); }

/* Banner-sicher: Titel auf akzentfarbigem Banner (verhindert rot-auf-rot, z.B. AoS) */
.tc-type--on-banner {
  color: var(--tc-on-banner, var(--tc-text-strong));
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* Ausrichtung */
.tc-type--center { text-align: center; }
.tc-type--right  { text-align: right; }

/* Kapitaelchen-Variante (z.B. fuer ornamentale PF/Mordheim-Titel) */
.tc-type--smallcaps { font-variant: small-caps; letter-spacing: 0.04em; }

/* Truncation (eine Zeile, Ellipsis) */
.tc-type--truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
 * tc-fliesstext — Absätze, Listen und Hervorhebungen in einem Textblock
 * (05.10.2026, #180)
 * ----------------------------------------------------------------------------
 * Fuer erklaerenden Text in einer Karte: Handbuch, Regelhinweise, Lore.
 * Die Abstaende kommen von hier, nicht aus den Browser-Raendern eines <p>
 * (ein ganzes em oben UND unten — in einer Karte mit eigenem Polster ergab
 * das sichtbare Luecken am Anfang und Ende). Erstes und letztes Kind stehen
 * buendig, dazwischen ein fester Abstand.
 *
 *   <div class="tc-card__body tc-fliesstext"><p>…</p><ul>…</ul></div>
 *
 * `strong` traegt --tc-highlight wie Werte und Headlines (§9); der Akzent
 * faerbt keinen Text.
 * ========================================================================== */
.tc-fliesstext {
  font-size: var(--tc-text-sm);
  line-height: var(--tc-leading-normal);
  color: var(--tc-text-default);
  overflow-wrap: break-word;
}
.tc-fliesstext > * { margin: 0; }
.tc-fliesstext > * + * { margin-top: var(--tc-space-2); }
.tc-fliesstext strong { color: var(--tc-highlight); }
/* Nur Listen OHNE eigene Klasse sind Fliesstext-Listen. Eine Komponente im
   Text (`tc-card__zeilen`) bringt ihre Abstaende selbst mit — sonst gewaenne
   die hoehere Spezifitaet von hier und schoebe sie ein. */
.tc-fliesstext :where(ul:not([class]), ol:not([class])) { padding-left: 1.25em; }
.tc-fliesstext :where(ul:not([class]), ol:not([class])) > li + li { margin-top: var(--tc-space-1); }
.tc-fliesstext code {
  font-family: var(--tc-font-mono);
  font-size: 0.92em;
  padding: 1px var(--tc-space-1);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-bg-surface-2);
  overflow-wrap: anywhere;
}
.tc-fliesstext a {
  color: var(--tc-highlight);
  text-underline-offset: 2px;
}