/* Kopie aus dem teamzone Design System (Prototyp, tokens/), Stand 2026-10-20. Nicht hier ändern — Abweichungen gehören in sass/site.scss. */
/* ============================================================
   teamzone — Typography tokens
   Type family: Inter (UI + display). Material Symbols Rounded for icons.
   Scale extracted from the Figma "Typography" style frame.
   ============================================================ */

:root {
  /* Families */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* Monospace nur für Token-/Code-Dokumentation im DS (Nachtrag 08.09.2026) */
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* ============================================================
     LIVE-TYPOSKALA (Phase A, code wins — theme.dart setzt NUR
     fontFamily "Inter" + useMaterial3:true, KEINE textTheme-Overrides):
     Es gilt die Material-3-Default-Skala. Verbindliche Werte für Screens:
       displaySmall   36/44        (Dashboard-Begrüßung, + bold im Code)
       headlineLarge  32/40
       headlineMedium 28/36        (Objekt-/Seitentitel, + bold im Code)
       headlineSmall  24/32        (Seiten-Sektionstitel)
       titleLarge     22/28        (Karten-/Sheet-Titel, im Code meist + w600/700)
       titleMedium    16/24 w500
       titleSmall     14/20 w500
       bodyLarge      16/24        (ListItem-Titel)
       bodyMedium     14/20        (Standard-Fließtext)
       bodySmall      12/16
       labelLarge     14/20 w500 · labelMedium 12/16 w500 · labelSmall 11/16 w500
     Komponenten-Overrides aus theme.dart: AppBar-Titel 20/600 · PopupMenu 14.
     Die --type-*-Tokens darunter sind die FIGMA-SOLL-Tabelle (Phase B, CB-001)
     — beim Screen-Bau NICHT als Größenquelle verwenden, wo sie von M3 abweicht.
     ============================================================ */

  /* Weights */
  --fw-extralight: 200; /* @kind font */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* ---- Type scale: font-size / line-height ---- */
  /* Display (Inter Light 300) */
  --type-display-1-size: 64px;  --type-display-1-lh: 80px;
  --type-display-2-size: 48px;  --type-display-2-lh: 60px;

  /* Headings (Inter SemiBold 600) */
  --type-h1-size: 36px;  --type-h1-lh: 44px;
  --type-h2-size: 32px;  --type-h2-lh: 40px;
  --type-h3-size: 24px;  --type-h3-lh: 32px;
  --type-h4-size: 20px;  --type-h4-lh: 28px;
  --type-h5-size: 16px;  --type-h5-lh: 24px;
  --type-h6-size: 12px;  --type-h6-lh: 18px;

  /* Body (Inter Regular 400) */
  --type-body-lg-size: 16px;  --type-body-lg-lh: 24px;
  --type-body-md-size: 14px;  --type-body-md-lh: 20px;
  --type-body-sm-size: 12px;  --type-body-sm-lh: 18px;

  /* Label / overline */
  --type-label-size: 14px;  --type-label-lh: 20px;
  --type-caption-size: 12px; --type-caption-lh: 16px;

  /* Micro (Z.108, Nutzerentscheid 16.09.2026 — B-187 Weg b)
     11/16 = M3 labelSmall, also code-true. AUSSCHLIESSLICH für Etiketten:
     Tabellenköpfe, Status-Pillen, Badges, Rail-/Navbar-Label, Zeitachsen-
     Beschriftung. NIE für Fließtext, Beschreibungen, Hilfetexte oder
     Leerzustände — dort bleibt 12/18 (body-sm) die kleinste Stufe.
     Unterhalb von 11px gibt es keine Stufe; 10px und Zwischenwerte
     (11.5/12.5/13.5) sind projektweit verboten. */
  --type-micro-size: 11px;  --type-micro-lh: 16px;
}

/* ---- Convenience classes (optional helpers) ---- */
.tz-display-1 { font: var(--fw-light) var(--type-display-1-size)/var(--type-display-1-lh) var(--font-display); letter-spacing: -0.02em; }
.tz-display-2 { font: var(--fw-light) var(--type-display-2-size)/var(--type-display-2-lh) var(--font-display); letter-spacing: -0.02em; }
.tz-h1 { font: var(--fw-semibold) var(--type-h1-size)/var(--type-h1-lh) var(--font-sans); letter-spacing: -0.01em; }
.tz-h2 { font: var(--fw-semibold) var(--type-h2-size)/var(--type-h2-lh) var(--font-sans); letter-spacing: -0.01em; }
.tz-h3 { font: var(--fw-semibold) var(--type-h3-size)/var(--type-h3-lh) var(--font-sans); }
.tz-h4 { font: var(--fw-semibold) var(--type-h4-size)/var(--type-h4-lh) var(--font-sans); }
.tz-h5 { font: var(--fw-semibold) var(--type-h5-size)/var(--type-h5-lh) var(--font-sans); }
.tz-h6 { font: var(--fw-semibold) var(--type-h6-size)/var(--type-h6-lh) var(--font-sans); }
.tz-body-lg { font: var(--fw-regular) var(--type-body-lg-size)/var(--type-body-lg-lh) var(--font-sans); }
.tz-body-md { font: var(--fw-regular) var(--type-body-md-size)/var(--type-body-md-lh) var(--font-sans); }
.tz-body-sm { font: var(--fw-regular) var(--type-body-sm-size)/var(--type-body-sm-lh) var(--font-sans); }
.tz-label { font: var(--fw-medium) var(--type-label-size)/var(--type-label-lh) var(--font-sans); }
.tz-micro { font: var(--fw-medium) var(--type-micro-size)/var(--type-micro-lh) var(--font-sans); }