/* ============================================================================
   TYPOGRAFIE · Familien, Skala & semantische Rollen
   ----------------------------------------------------------------------------
   Familien zeigen auf die Zielschriften (siehe tokens/fonts.css). Größen nur
   aus der Skala; Zahlen in Tabellen/KPIs mit .u-tabular (tabellarisch, geschlitzte Null).
============================================================================ */

:root {

  --font-display:"Playfair Display",Georgia,serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  /* ---- DIE SCHRIFT DER ZAHLEN ----
     Alle drei Gruppen (--font-zahl-tabelle/-kennzahl/-zeit) zeigen heute auf
     --font-zahl = Inter, bewusst einzeln benannt für spätere Differenzierung.
     ⚠ `tnum` MUSS MIT: Inter braucht `font-feature-settings: 'tnum' 1, 'zero' 1`
     für gleich breite Ziffern (JetBrains Mono hatte das eingebaut) — ohne das
     springen Tabellenspalten bei jedem Wert. */
  --font-zahl:var(--font-body);
  --font-zahl-tabelle:var(--font-zahl);   /* Werte in Tabellen und Rechenwerken */
  --font-zahl-kennzahl:var(--font-zahl);  /* KPI, Fakten, Zähler, Badges */
  --font-zahl-zeit:var(--font-zahl);      /* Uhrzeiten, Datumsangaben */

  /* ==== DIE DREI GRÖSSEN (§1.2) ==============================================
       --text-display  20px  Seitentitel, Wortmarke, Kennzahl-Werte
       --text-ui       16px  alles Bedienbare: Zellen, Knöpfe, Feldwerte, Fließtext
       --text-meta     12px  Labels, Overline, Badge, Tabellenkopf
     Keine Zwischengrößen (13/14/15/18); Größen über 20px folgen später eigens.
     Skaliert wird die GANZE Ansicht über `zoom: var(--skala)` — nicht die
     Schrift allein. Deshalb steht hier kein Faktor mehr.
     ======================================================================== */
  --text-display:1.25rem;  /* 20px */
  --text-ui:1rem;          /* 16px */
  --text-meta:0.75rem;     /* 12px — Untergrenze */

  /* ---- Größen-Skala (rem, 16px-Basis) ----
     xs…lg sind ABBILDUNGEN auf die drei Größen — der Hebel, mit dem der
     Bestand mitwandert, ohne jede Stelle anzufassen. Größen ÜBER der
     Display-Stufe gibt es bewusst nicht: Wer sie braucht (Landingpage), legt
     sie mit dem echten Bedarf an, nicht auf Vorrat. */
  --text-xs:var(--text-meta);--text-sm:var(--text-ui);--text-base:var(--text-ui);--text-md:var(--text-display);--text-lg:var(--text-display);

  /* ---- Gewichte / Zeilenhöhen / Laufweiten ----
     Zeilenhöhen nach §1.2: 1.2 (Titel ab 20 px), 1.3 (Karten-/Zeilentitel),
     1.5 (Fließtext und Meta). Gewichte: 400/500/600/700 — kein 800/900. */
  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
  --leading-tight:1.2;--leading-snug:1.3;--leading-normal:1.5;--leading-relaxed:1.65;
  /* ⚠ DREI STUFEN, MEHR NICHT — niemand sieht feinere Unterschiede, aber jede
     zusätzliche Zahl müsste gepflegt werden. `widest` ist bewusst 0,1em:
     derselbe Wert, den Tailwind für `tracking-widest` mitbringt. */
  --tracking-tight:-0.02em;--tracking-normal:0;--tracking-widest:0.1em;

  /* Numerik-Feature: tabellarisch + geschlitzte Null (0 ≠ O) — siehe .u-tabular */
  --numeric-tabular:"tnum" 1,"zero" 1;


  /* ========================= SEMANTISCHE TYPO-ROLLEN ===========================
     Zwei Spuren, bewusst getrennt:
     • DISPLAY (Playfair) — Hero, Marketing, Empty-States, große Zahlen. SPARSAM.
     • UI-HEADING (Inter)  — In-App-Titel (Seiten, Sektionen, Karten). Standard.
     Roh-Elemente h1–h6 nutzen die UI-Spur (siehe utilities.css); die Display-Spur
     kommt über .u-display-1/2/3 bzw. die Tokens. ============================== */

  --font-family-display:var(--font-display);
  --leading-display:var(--leading-tight);
  --tracking-display:var(--tracking-tight);
  --weight-display:var(--weight-semibold);

  /* ---- UI-Heading-Spur (Inter) ----
     Alle Überschriften-Rollen liegen jetzt auf den drei Größen: Titel = 20,
     Blocktitel = 16, Label-Titel = 12. Eine sechsstufige Überschriften-Skala
     gibt es damit nur noch dem Namen nach — die Hierarchie entsteht über
     Größe/Gewicht/Farbe, nicht über sechs Abstufungen. */
  --font-family-heading:var(--font-body);
  --text-h1:var(--text-display);   /* 20px — Seitentitel */
  --text-h2:var(--text-display);   /* 20px — Sektion */
  --text-h3:var(--text-display);   /* 20px — Karten-/Block-Titel groß */
  --text-h4:var(--text-ui);        /* 16px */
  --text-h5:var(--text-ui);        /* 16px — Kartentitel */
  --text-h6:var(--text-meta);      /* 12px — kleiner Label-Titel (uppercase) */
  --leading-heading:var(--leading-snug);
  --tracking-heading:var(--tracking-tight);
  --weight-heading:var(--weight-semibold);

  --font-family-body:var(--font-body);
  --text-body-lg:var(--text-ui);     /* 16px — Lead/Intro (Fließtext ist 16) */
  --text-body:var(--text-ui);        /* 16px — Standard-Fließtext */
  --text-body-sm:var(--text-ui);     /* 16px — dichte UI, Tabellen */
  --leading-body:var(--leading-normal);
  --weight-body:var(--weight-regular);

  --text-label:var(--text-ui);       /* 16px — Form-Labels, Buttons */
  --weight-label:var(--weight-medium);
  --text-caption:var(--text-meta);   /* 12px — Hilfetext, Meta */
  --text-overline:var(--text-meta);  /* 12px — Eyebrow/Kicker, uppercase */
  --tracking-overline:var(--tracking-widest);

  --font-family-mono:var(--font-mono);
}