/* SPRiCH — assets/css/tokens.css
   PORTIERT AUS handoff/web/css/tokens.css — INHALT UNVERAENDERT.
   GENERIERTES ARTEFAKT. Quelle: build/sprich_brand.py -> BRAND.md.
   Farben sind aus den ZIB/ZIS/BRF-Referenzen GEMESSEN, nicht gewaehlt.
   Ein Hexwert hier von Hand zu "verbessern" kappt die Verbindung zum Artwork.
   Erste Datei der Kaskade: tokens -> base -> components -> chrome -> landing -> kurs.
   ------------------------------------------------------------------------ */

/* SPRiCH — Design-Tokens
   GENERIERT aus build/sprich_brand.py — NICHT von Hand bearbeiten.
   Quelle: design/BRAND.md · Artwork: design/out/sprich-brand-v2.ai
   Farben sind aus den ZIB/ZIS/BRF-Referenzen gemessen, nicht geschätzt. */

:root {
  /* ── Farbe ─────────────────────────────────────────── */
  --c-blue-900: #1E2A54;   /* Grund */
  --c-blue-800: #25325F;  /* Sektionswechsel */
  --c-blue-700: #2C3A6B;  /* Karten, Panels */
  --c-blue-600: #3C4A80;  /* Rahmen, Trenner */
  --c-red:      #D01C20;    /* ZIS-Rot — Punkt, Live, Eilmeldung */
  --c-orange:   #FC8828; /* ZIS-Orange — primäre CTA */
  --c-green:    #3DDC97;  /* Fortschritt, bestanden */
  --c-paper:    #F5F1E8;  /* helle Sektionen */
  --c-light:    #E8ECF4;  /* Fließtext auf Blau */
  --c-muted:    #9AA6C8;  /* Beschriftungen */
  --c-ink:      #10141C;    /* Text auf Papier */
  --c-white:    #FCFCFC;

  /* Papier-Sektion */
  --c-paper-ink:    #48546B;
  --c-paper-mutedd: #6B7688;
  --c-paper-line:   #DCD5C6;
  --c-paper-card:   #FFFFFF;
  --c-paper-green:  #1B8F5A;

  /* ── Schrift ───────────────────────────────────────── */
  --f-display: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --f-ui:      "Inter", system-ui, -apple-system, sans-serif;

  --fs-display-xl: 112px; --lh-display-xl: 104px;
  --fs-display-l:   72px; --lh-display-l:   72px;
  --fs-h1:          48px; --lh-h1:          54px;
  --fs-h2:          34px; --lh-h2:          42px;
  --fs-h3:          22px; --lh-h3:          30px;
  --fs-body-l:      18px; --lh-body-l:      30px;
  --fs-body:        16px; --lh-body:        26px;
  --fs-small:       14px; --lh-small:       22px;
  --fs-label:       12px; --lh-label:       16px;
  --tr-label: 0.12em;
  --tr-display: -0.01em;

  /* ── Raster & Form ─────────────────────────────────── */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 56px; --s7: 80px; --s8: 120px;
  --r-control: 10px;
  --r-card:    20px;
  --r-image:   28px;
  --r-pill:    999px;

  --page-max: 1440px;
  --gutter:   56px;
  --content:  1328px;
}

@media (max-width: 900px) { :root { --gutter: 24px; } }
@media (max-width: 640px) { :root { --gutter: 20px; } }