/* ============================================================
   Kropka — Typography tokens (Design System)

   ŹRÓDŁO: docs/Nowy-Design-Kropka/_ds/kropka-eduhub-design-system-
           9cab01f8-efff-4109-8fa5-976f5fbd8656/tokens/typography.css

   ODSTĘPSTWO OD ŹRÓDŁA (świadome):
   pominięte deklaracje --font-display i --font-body. Źródło deklaruje
   je zarówno tu, jak i w tokens/fonts.css; w produkcie oba tokeny mają
   jedno źródło — static/kropka-ds/tokens-fonts.css. Zostawienie kopii
   tutaj oznaczałoby, że kolejność <link> w base.html decyduje o stosie
   zapasowym kroju, co jest pułapką bez żadnego zysku.

   Reszta pliku — skala rozmiarów, wagi i klasy semantyczne .eh-* —
   jest skopiowana dosłownie, z wartościami bez zmian.

   Sprawdzone przed dodaniem: żadna z nazw (--fs-*, --fw-*, --font-body,
   klasy .eh-*) nie występuje w templates/ ani w pozostałych plikach
   static/ — brak kolizji z istniejącymi zmiennymi aplikacji.
   ============================================================ */

:root {
  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Size ramp (px, product-derived — not snapped to a grid) */
  --fs-display: 40px;   /* page hero — "Cześć, Jan!" */
  --fs-h1:      32px;
  --fs-h2:      20px;
  --fs-h3:      18px;
  --fs-h4:      14px;
  --fs-body:    14px;
  --fs-sub:     13.5px;
  --fs-caption: 12px;
  --fs-micro:   11.5px;
  --fs-tiny:    10.5px;
}

/* ── Semantic type classes ─────────────────────────────────── */
.eh-wordmark { font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: -0.8px; color: var(--ink); }

.eh-display  { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 36px; letter-spacing: -0.6px; color: var(--ink); }
.eh-h1       { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 36px; letter-spacing: -0.7px; color: var(--ink); }
.eh-h2       { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: -0.4px; color: var(--ink); }
.eh-h3       { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 28px; letter-spacing: -0.36px; color: var(--ink); }
.eh-h4       { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; color: var(--ink-2); }
.eh-nav      { font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 24px; letter-spacing: -0.2px; color: var(--muted); }

.eh-lead     { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 36px; letter-spacing: -0.6px; color: var(--hint); }
.eh-body     { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--ink); }
.eh-sub      { font-family: var(--font-body); font-weight: 500; font-size: 13.5px; line-height: 18px; color: var(--muted); }
.eh-caption  { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 16px; color: var(--muted); }
.eh-chip-text{ font-family: var(--font-body); font-weight: 700; font-size: 12px; line-height: 16px; }
.eh-timer    { font-family: var(--font-body); font-weight: 500; font-size: 10px; line-height: 15px; }

.eh-num      { font-variant-numeric: tabular-nums; }