/* ============================================================
   nuntix.net — Typography Tokens
   CI v1 · 07/2026 · Gegenstück zu brand-colors.css
   ------------------------------------------------------------
   Instrument Sans  400/600/700 — Headlines & Fließtext
   JetBrains Mono   400/600     — Markenstimme: Logo, Kicker,
                                  Timestamps, Daten, Code. NIE Fließtext.
   Aufbau: 1. Primitives (Familien, Skala, Leading, Tracking, Weights)
           2. Rollen (display, h1–h4, body, kicker, code …)
           3. Utility-Klassen (drop-in)
   ============================================================ */

/* Fonts laden — Google Fonts. Beim Self-Hosting diese Zeile
   ersetzen und lokale @font-face-Regeln einbinden.
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap');
*/

:root {
  /* ---- 1. PRIMITIVES ------------------------------------- */

  /* Familien */
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Größen-Skala (16px Basis · 12/14/16/20/24/32/48/64) */
  --text-xs:      0.75rem;   /* 12 — Kicker, Timestamps, Meta */
  --text-sm:      0.875rem;  /* 14 — Small, Captions, Code inline */
  --text-base:    1rem;      /* 16 — Fließtext */
  --text-lg:      1.25rem;   /* 20 — Lead, H4 */
  --text-xl:      1.5rem;    /* 24 — H3 */
  --text-2xl:     2rem;      /* 32 — H2 */
  --text-3xl:     3rem;      /* 48 — H1 */
  --text-display: 4rem;      /* 64 — Hero/Wordmark-Setzung */

  /* Zeilenhöhen */
  --leading-tight:   1.1;    /* Display, große Headlines */
  --leading-snug:    1.25;   /* H2–H4 */
  --leading-body:    1.55;   /* Fließtext (Sheet-Vorgabe 1.5–1.55) */
  --leading-relaxed: 1.65;   /* Langform/Artikel */

  /* Laufweite */
  --tracking-tighter: -0.02em; /* Headlines 700 (Sheet-Vorgabe) */
  --tracking-tight:   -0.01em; /* mittelgroße Headlines */
  --tracking-normal:  0;
  --tracking-wide:    0.08em;   /* Mono-Kicker in Versalien */

  /* Gewichte */
  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    700;   /* nur Instrument Sans — Mono kennt kein 700 */

  /* ---- 2. ROLLEN (Größe · Leading · Weight · Tracking) --- */

  --type-display-size: var(--text-display);
  --type-display-lh:   var(--leading-tight);
  --type-display-fw:   var(--fw-bold);
  --type-display-ls:   var(--tracking-tighter);

  --type-h1-size: var(--text-3xl);
  --type-h1-lh:   var(--leading-tight);
  --type-h1-fw:   var(--fw-bold);
  --type-h1-ls:   var(--tracking-tighter);

  --type-h2-size: var(--text-2xl);
  --type-h2-lh:   var(--leading-snug);
  --type-h2-fw:   var(--fw-bold);
  --type-h2-ls:   var(--tracking-tighter);

  --type-h3-size: var(--text-xl);
  --type-h3-lh:   var(--leading-snug);
  --type-h3-fw:   var(--fw-medium);
  --type-h3-ls:   var(--tracking-tight);

  --type-h4-size: var(--text-lg);
  --type-h4-lh:   var(--leading-snug);
  --type-h4-fw:   var(--fw-medium);
  --type-h4-ls:   var(--tracking-normal);

  --type-body-size: var(--text-base);
  --type-body-lh:   var(--leading-body);
  --type-body-fw:   var(--fw-regular);
  --type-body-ls:   var(--tracking-normal);

  --type-lead-size: var(--text-lg);
  --type-lead-lh:   var(--leading-relaxed);
  --type-lead-fw:   var(--fw-regular);

  --type-small-size: var(--text-sm);
  --type-small-lh:   var(--leading-snug);

  /* Mono-Rollen (Markenstimme) */
  --type-kicker-size: var(--text-xs);
  --type-kicker-fw:   var(--fw-medium);
  --type-kicker-ls:   var(--tracking-wide);

  --type-data-size:   var(--text-sm);   /* Timestamps, Zahlen, Metriken */
  --type-code-size:   var(--text-sm);
  --type-code-lh:     var(--leading-snug);
}

/* ---- 3. UTILITY-KLASSEN (drop-in) ------------------------ */
/* Farben kommen aus brand-colors.css (var(--text-*)) mit Fallback. */

.text-display {
  font-family: var(--font-sans);
  font-size: var(--type-display-size);
  line-height: var(--type-display-lh);
  font-weight: var(--type-display-fw);
  letter-spacing: var(--type-display-ls);
  color: var(--text-primary, #16181D);
}
.text-h1 {
  font-family: var(--font-sans);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  font-weight: var(--type-h1-fw);
  letter-spacing: var(--type-h1-ls);
  color: var(--text-primary, #16181D);
}
.text-h2 {
  font-family: var(--font-sans);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  font-weight: var(--type-h2-fw);
  letter-spacing: var(--type-h2-ls);
  color: var(--text-primary, #16181D);
}
.text-h3 {
  font-family: var(--font-sans);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  font-weight: var(--type-h3-fw);
  letter-spacing: var(--type-h3-ls);
  color: var(--text-primary, #16181D);
}
.text-h4 {
  font-family: var(--font-sans);
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-lh);
  font-weight: var(--type-h4-fw);
  color: var(--text-primary, #16181D);
}
.text-body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: var(--type-body-fw);
  color: var(--text-primary, #16181D);
}
.text-lead {
  font-family: var(--font-sans);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  font-weight: var(--type-lead-fw);
  color: var(--text-secondary, #656B74);
}
.text-small {
  font-family: var(--font-sans);
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  color: var(--text-secondary, #656B74);
}

/* Mono / Markenstimme */
.text-kicker {           /* Eyebrow: "01 — LOGO", "CI · V1 · 07/2026" */
  font-family: var(--font-mono);
  font-size: var(--type-kicker-size);
  font-weight: var(--type-kicker-fw);
  letter-spacing: var(--type-kicker-ls);
  text-transform: uppercase;
  color: var(--text-muted, #8A8F99);
}
.text-data {             /* Timestamps, Zahlen, Metriken */
  font-family: var(--font-mono);
  font-size: var(--type-data-size);
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #656B74);
}
.text-code {
  font-family: var(--font-mono);
  font-size: var(--type-code-size);
  line-height: var(--type-code-lh);
  color: var(--text-primary, #16181D);
}

/* Optional: Grund-Setup direkt auf Elemente mappen */
/*
body { font-family: var(--font-sans); font-size: var(--text-base);
       line-height: var(--leading-body); color: var(--text-primary); }
h1 { @extend .text-h1; } … (bzw. Klassen im Markup verwenden)
*/