/* ============================================================================
 * smile-typography-tokens.css — Zentrale Typografie-Token-Override-Ebene (AB#483)
 *
 * Diese Datei aendert sich NIE (ships once). Sie mappt die statischen Phoenix-
 * Schriftgroessen-Utilities auf CSS-Custom-Properties `--sc-fs-*`. Solange keine
 * Token gesetzt sind (kein DB-Load / oeffentliche Seite bevor JS lief), greift
 * der Fallback = exakt der heute kompilierte Phoenix-Wert (theme.css,
 * $type-scale = 1.25) => 0 visuelle Aenderung, kein FOUC.
 *
 * Beim App-Start setzt `applyTypographyTokens` die DB-Werte als Custom-Properties
 * auf :root. Eine Admin-Anpassung im Settings-UI wirkt dann SOFORT app-weit
 * (nur setProperty) — ohne Redeploy.
 *
 * Laedt in index.html NACH theme.css/user.css => gleiche Spezifitaet + spaetere
 * Quell-Reihenfolge gewinnt die Kaskade sauber.
 * ========================================================================== */

/* --- Skala-Utilities .fs-1 … .fs-11 (Phoenix nutzt !important) ------------- */
.fs-1  { font-size: var(--sc-fs-1,  4.768371582rem)  !important; }
.fs-2  { font-size: var(--sc-fs-2,  3.8146972656rem) !important; }
.fs-3  { font-size: var(--sc-fs-3,  3.0517578125rem) !important; }
.fs-4  { font-size: var(--sc-fs-4,  2.44140625rem)   !important; }
.fs-5  { font-size: var(--sc-fs-5,  1.953125rem)     !important; }
.fs-6  { font-size: var(--sc-fs-6,  1.5625rem)       !important; }
.fs-7  { font-size: var(--sc-fs-7,  1.25rem)         !important; }
.fs-8  { font-size: var(--sc-fs-8,  1rem)            !important; }
.fs-9  { font-size: var(--sc-fs-9,  0.8rem)          !important; }
.fs-10 { font-size: var(--sc-fs-10, 0.64rem)         !important; }
.fs-11 { font-size: var(--sc-fs-11, 0.512rem)        !important; }

/* --- Flache Heading-Defaults h4/h5/h6 (in Phoenix kein RFS) ---------------- */
h4, .h4 { font-size: var(--sc-fs-7, 1.25rem); }
h5, .h5 { font-size: var(--sc-fs-8, 1rem); }
h6, .h6 { font-size: var(--sc-fs-9, 0.8rem); }

/* --- .lead (flach 1.25rem = Karten-/Drawer-Titel) ------------------------- */
.lead { font-size: var(--sc-fs-7, 1.25rem); }

/* --- RFS-Headings h1/h2/h3: fluid <1200px UNVERAENDERT lassen; nur den
 *     Desktop-Endpunkt (>=1200px) tokenisieren (bewahrt Mobile-Scaling). ----- */
@media (min-width: 1200px) {
  h1, .h1 { font-size: var(--sc-fs-4, 2.44140625rem); }
  h2, .h2 { font-size: var(--sc-fs-5, 1.953125rem); }
  h3, .h3 { font-size: var(--sc-fs-6, 1.5625rem); }
}

/* --- Display-Utilities .display-1 … .display-6 (RFS; kompiliert 1:1 = fs-1…6)
 *     Gleiche Strategie: fluide <1200px unveraendert, Desktop-Endpunkt tokenisiert. */
@media (min-width: 1200px) {
  .display-1 { font-size: var(--sc-fs-1, 4.768371582rem); }
  .display-2 { font-size: var(--sc-fs-2, 3.8146972656rem); }
  .display-3 { font-size: var(--sc-fs-3, 3.0517578125rem); }
  .display-4 { font-size: var(--sc-fs-4, 2.44140625rem); }
  .display-5 { font-size: var(--sc-fs-5, 1.953125rem); }
  .display-6 { font-size: var(--sc-fs-6, 1.5625rem); }
}

/* Kalender-Tokens (--sc-fs-cal-title/meta/badge) haben keine Utility-Klassen —
 * sie werden von inline-migrierten `var(--sc-fs-cal-*)`-Referenzen (EventBlock &
 * Co.) konsumiert und in applyTypographyTokens auf :root gesetzt. */