/* ============================================================
   WETTERZENTRALE · CI-Tokens (final · Design-Runde 07/2026)
   Drop-in: ersetzt die bestehenden :root-Token-Blöcke.
   Kein Build nötig — reine Custom Properties.
   ============================================================ */

:root[data-theme="light"]{
  --bg:#EDF1F6; --surface:#FFFFFF; --surface-2:#F3F6FA; --border:#DCE3EC;
  --text:#0F1720; --text-dim:#55606F; --text-mute:#8A97A6;
  --accent:#0284C7; --accent-2:#0369A1; --accent-ink:#FFFFFF;

  /* Warnstufen als Text/Linie auf --surface (Kontrast ≥ 4.5:1 auf Weiß) */
  --s1:#8A6B00; --s2:#C22014; --s3:#6D28D9; --s4:#BE185D; --ok:#1F7A4D;

  /* Meldestufen (Pegel, amtliche Reihe) als Text/Linie */
  --ms1-text:#7C6104; --ms2-text:#C2410C; --ms3-text:#DC2626; --ms4-text:#9333EA;
}

:root[data-theme="dark"]{
  --bg:#0C0F14; --surface:#141A22; --surface-2:#1A222C; --border:#232C38;
  --text:#E7EDF3; --text-dim:#8A97A6; --text-mute:#5C6675;
  --accent:#38BDF8; --accent-2:#0EA5E9; --accent-ink:#04121C;

  --s1:#F2C40F; --s2:#F26B5E; --s3:#B57BEA; --s4:#F472B6; --ok:#4EC58A;

  --ms1-text:#FACC15; --ms2-text:#FB923C; --ms3-text:#F87171; --ms4-text:#C084FC;
}

:root{
  /* ---- Warnstufen-Flächen: theme-UNabhängig, Ink je Stufe ----
     Kontrast Fläche/Ink: S1 8.3:1 · S2 5.5:1 · S3 4.8:1 · S4 5.9:1 · OK 5.3:1 */
  --s1-fill:#F2C40F; --s1-ink:#1A1500;   /* S1 GELB  (Betreiber-Schema) */
  --s2-fill:#E0452F; --s2-ink:#FFFFFF;   /* S2 ROT   */
  --s3-fill:#7B4FD4; --s3-ink:#FFFFFF;   /* S3 LILA  */
  --s4-fill:#D63F8C; --s4-ink:#FFFFFF;   /* S4 PINK  */
  --ok-fill:#1F7A4D; --ok-ink:#FFFFFF;

  /* ---- Meldestufen-Flächen (amtlich, nur Pegel-Kontext) ---- */
  --ms1:#EAB308; --ms2:#F97316; --ms3:#EF4444; --ms4:#A855F7;

  /* ---- Typografie: 7 Rollen, sonst nichts ---- */
  --font-ui:Archivo,Inter,system-ui,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,monospace;

  --t-display:800 28px/34px var(--font-ui);  /* Seitentitel · 1× je Seite   */
  --t-h2:     700 20px/26px var(--font-ui);  /* Sektions-Titel              */
  --t-h3:     600 15px/22px var(--font-ui);  /* Karten-Titel                */
  --t-body:   400 14px/21px var(--font-ui);  /* Fließtext                   */
  --t-meta:   400 12px/16px var(--font-ui);  /* Stand/Quelle · --text-dim   */
  --t-label:  500 10px/12px var(--mono);     /* .seclabel · UPPERCASE .14em */
  --t-num:    600 13px/18px var(--mono);     /* Zahlen · tabular-nums       */

  /* ---- Radien: genau drei ---- */
  --radius:14px;        /* Cards        */
  --radius-sm:8px;      /* Innenflächen */
  --radius-pill:999px;  /* Kapseln      */

  /* ---- Abstände: 8er-Raster ---- */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px;

  /* ---- Motion ---- */
  --dur:120ms; --ease:ease-out;
}

/* ---- Basis-Zuweisungen ---- */
h1{font:var(--t-display);color:var(--text)}
h2{font:var(--t-h2);color:var(--text)}
h3{font:var(--t-h3);color:var(--text)}
.seclabel{font:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.num{font:var(--t-num);font-variant-numeric:tabular-nums}

/* ---- Fokus: Doppelring, überall gleich ---- */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ── Lokale Ergänzung (nicht Teil des Handoffs): Alias-Namen der älteren Seiten
      (pegel/rueckblick/warnung/mobile), damit die neue Palette überall gilt. ── */
:root[data-theme="light"]{--panel:#FFFFFF;--panel2:#F3F6FA;--line:#DCE3EC;--txt:#0F1720;--muted:#55606F;--faint:#8A97A6;--acc:#0284C7}
:root[data-theme="dark"]{--panel:#141A22;--panel2:#1A222C;--line:#232C38;--txt:#E7EDF3;--muted:#8A97A6;--faint:#5C6675;--acc:#38BDF8}