/* ============================================================
   livewind.ch — Design-Tokens
   Extrahiert aus Plugin v1.7.4 / Theme v1.0.1.
   Optik unveraendert – Ziel: EINE Quelle fuer Farben, Formen,
   Abstaende, Typografie. Werte in bestehendes CSS/JS uebernehmen.
   ============================================================ */

:root {
  /* ---- Marken-Blau (Farbwelt) ---- */
  --lw-blue:         #185FA5; /* Marken-Blau (Primaer) */
  --lw-blue-dark:    #0C447C; /* Header/Hover, Ueberschriften */
  --lw-blue-darkest: #042C53; /* Zahlen, staerkster Text */
  --lw-blue-mid:     #378ADD; /* Skalen-/Akzentblau */
  --lw-blue-300:     #85B7EB; /* Akzent hell */
  --lw-blue-200:     #B5D4F4; /* Tint */
  --lw-blue-100:     #E6F1FB; /* Tint sehr hell */

  /* ---- Flaechen ---- */
  --lw-surface:      #FFFFFF; /* Karten, Panels */
  --lw-bg:           #F4F8FC; /* Seiten-/Sparkline-Hintergrund */
  --lw-map-bg:       #E6F1FB; /* Kartenflaeche */

  /* ---- Text ---- */
  --lw-text:         #042C53; /* primaer (dunkelblau) */
  --lw-text-head:    #0C447C; /* Ueberschriften */
  --lw-text-muted:   #6b7a8d; /* sekundaer */
  --lw-text-muted-2: #5f6e80; /* Achsen/Labels */

  /* ---- Linien & Zustaende ---- */
  --lw-line:         #D3DEE9;              /* feine Trennlinien */
  --lw-line-dash:    #85B7EB;              /* gestrichelt (z. B. Premium-Box) */
  --lw-focus:        #378ADD;              /* Fokus-Ring (Tastatur) – NEU nutzen */
  --lw-overlay:      rgba(4,44,83,0.45);   /* Modal-Overlay */

  /* ---- Radien ---- (konsolidiert aus vorhandenen 8–22px) */
  --lw-r-xs:   8px;
  --lw-r-sm:  12px;
  --lw-r-md:  16px;
  --lw-r-pill: 999px; /* Buttons/Navigation (vorher 18–22px) */

  /* ---- Schatten (blau getoent) ---- */
  --lw-shadow-sm: 0 2px 8px  rgba(4,44,83,0.25);
  --lw-shadow-md: 0 8px 24px rgba(4,44,83,0.25);
  --lw-shadow-lg: 0 12px 40px rgba(4,44,83,0.35);

  /* ---- Abstaende ---- (NEU: 8pt-Skala, fuellt die Luecke) */
  --lw-space-1:  4px;
  --lw-space-2:  8px;
  --lw-space-3: 12px;
  --lw-space-4: 16px;
  --lw-space-5: 24px;
  --lw-space-6: 32px;
  --lw-space-7: 48px;

  /* ---- Typografie ---- */
  --lw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --lw-fs-xs: 11px; /* Einheiten/Labels */
  --lw-fs-sm: 12px;
  --lw-fs-md: 15px; /* Fliesstext / Popup-H3 */
  --lw-fs-lg: 16px; /* Modal-Titel */
  --lw-fs-xl: 19px; /* Logo, Zahlen */
  --lw-fw-medium:   500;
  --lw-fw-semibold: 600;
  --lw-lh-tight: 1.1; /* Zahlen */
  --lw-lh-snug:  1.4; /* Navigation */
  --lw-lh-base:  1.5; /* Fliesstext */
  --lw-logo-tracking: -0.3px;

  /* ---- Chart-Farben ---- */
  --lw-chart-future:    #0C447C; /* Prognose-Linie */
  --lw-chart-past:      #42586B; /* Verlauf-Linie */
  --lw-chart-past-tint: #64809C;
  --lw-chart-gust:      #3d4852; /* Boeen (gestrichelt) */
  --lw-chart-grid:      #E6F1FB;
  --lw-chart-night:     #0C447C; /* Nacht-Schattierung @ ~0.055 */
}

/* ============================================================
   Windskala — zwei Schemata (Regenbogen = Standard, Blau).
   Werte spiegeln die JS-Logik; je Stufe fill / stroke / text.
   Grenzen in Knoten. Umschalten z. B. via [data-scheme] am Root.
   ============================================================ */

/* Regenbogen (Standard) — 8 Stufen */
:root {
  --lw-w1-fill:#E8F4F8; --lw-w1-stroke:#9AC4D6; --lw-w1-text:#33606f; /* <=5  */
  --lw-w2-fill:#8FD8E8; --lw-w2-stroke:#3FA8C2; --lw-w2-text:#134c5a; /* <=11 */
  --lw-w3-fill:#79CE73; --lw-w3-stroke:#2F7D3A; --lw-w3-text:#123f18; /* <=16 */
  --lw-w4-fill:#F7E463; --lw-w4-stroke:#A38A12; --lw-w4-text:#4d400a; /* <=22 */
  --lw-w5-fill:#F5A93B; --lw-w5-stroke:#8F5E0A; --lw-w5-text:#4a2f04; /* <=28 */
  --lw-w6-fill:#EE5A34; --lw-w6-stroke:#FFFFFF; --lw-w6-text:#FFFFFF; /* <=35 */
  --lw-w7-fill:#C21F1F; --lw-w7-stroke:#FFFFFF; --lw-w7-text:#FFFFFF; /* <=50 */
  --lw-w8-fill:#7E0F0F; --lw-w8-stroke:#FFFFFF; --lw-w8-text:#FFFFFF; /* >50  */
}

/* Blau (monochrom, Rot-Gruen-sicher) — 8 Stufen ab v1.9.10.
   Massgeblich ist assets/lw-scales.js; diese Variablen sind Referenz. */
[data-scheme="blau"] {
  --lw-w1-fill:#E6F1FB; --lw-w1-stroke:#85B7EB; --lw-w1-text:#0C447C; /* <=5  */
  --lw-w2-fill:#B5D4F4; --lw-w2-stroke:#378ADD; --lw-w2-text:#0C447C; /* <=11 */
  --lw-w3-fill:#85B7EB; --lw-w3-stroke:#185FA5; --lw-w3-text:#042C53; /* <=16 */
  --lw-w4-fill:#378ADD; --lw-w4-stroke:#FFFFFF; --lw-w4-text:#FFFFFF; /* <=22 */
  --lw-w5-fill:#185FA5; --lw-w5-stroke:#FFFFFF; --lw-w5-text:#FFFFFF; /* <=28 */
  --lw-w6-fill:#0C447C; --lw-w6-stroke:#FFFFFF; --lw-w6-text:#FFFFFF; /* <=35 */
  --lw-w7-fill:#042C53; --lw-w7-stroke:#FFFFFF; --lw-w7-text:#FFFFFF; /* <=50 */
  --lw-w8-fill:#021B33; --lw-w8-stroke:#FFFFFF; --lw-w8-text:#FFFFFF; /* >50  */
}

/* ============================================================
   Verwendung (Beispiele)
   ------------------------------------------------------------
   .lw-card   { background:var(--lw-surface); border-radius:var(--lw-r-md);
                box-shadow:var(--lw-shadow-md); padding:var(--lw-space-4); }
   .lw-btn    { background:var(--lw-blue); color:#fff;
                border-radius:var(--lw-r-pill); }
   .lw-btn:hover { background:var(--lw-blue-dark); }
   :focus-visible { outline:2px solid var(--lw-focus); outline-offset:2px; }

   Migration: bestehende Hardcodes (#185FA5, 0 8px 24px …) schrittweise
   durch die Variablen ersetzen – dann ist Umfaerben/Dark-Mode trivial.
   ============================================================ */