/* ================= DESIGN "STROM" - GRUNDLAGE: Farben, Schrift, Formen (10.11.2026) =================
   Gemeinsame Datei fuer Handy und Schreibtisch. Hier stehen NUR Variablen - kein Bauteil, keine Breite.
   Wer was aendert, steht in docs/design/strom/VERTRAG.md (Abschnitt "Wem welche Datei gehoert").

   David, 10.11.2026, 01:23: "Verwende A mit Clean als Grundstil, bedient nach den Regeln von Material. Bento nur
   fuer Uebersichten. Nutze Glassmorphismus-Elemente. Verwende leicht durchscheinende Karten mit
   Hintergrund-Unschaerfe (Background Blur) ueber einem subtil farbigen Hintergrund, gepaart mit hellen, feinen
   Raendern."

   Zwei Gruppen:
   - --g-...  die Werte des Glas-Looks. Dieselben Zahlen wie in css/handy_strom.css (:host) - die Schicht der
              neuen Handy-Seiten liegt im Shadow DOM und fuehrt sie dort noch einmal.
   - --grund, --akzent, --text ...  die Variablen, die die Anwendung liest (css/themes.css, css/tokens.css).
              Damit traegt jede bestehende Tafel die Farben, ohne dass man sie anfasst.
   Hell und dunkel folgen dem Geraet (prefers-color-scheme).
   Kontrast (gerechnet nach WCAG 2, 10.11.2026): Text auf Grund hell 15,0:1, dunkel 16,9:1; leise Schrift hell
   7,0:1, dunkel 9,7:1; Akzent als Schrift auf Grund hell 6,0:1, dunkel 8,8:1; Schrift auf Akzent hell 6,9:1,
   dunkel 8,4:1; Warnfarbe hell 5,7:1, dunkel 9,8:1; schwache Schrift (--dim-schwach) hell 5,0:1, dunkel 6,2:1.
   Gerechnet gegen den glatten Grund - ueber den Farbflecken und durch Glas weicht der Wert ab. */

:root[data-thema="strom"]{
  /* Glas */
  --g-grund:#edeff7;
  --g-klecks1:rgba(160,140,255,.42); --g-klecks2:rgba(120,214,200,.38); --g-klecks3:rgba(255,190,150,.36);
  --g-glas:rgba(255,255,255,.56); --g-glas-stark:rgba(255,255,255,.78); --g-glas2:rgba(23,26,43,.06);
  --g-fest:#ffffff; --g-feld:rgba(255,255,255,.66);
  --g-rand:rgba(255,255,255,.9); --g-kante:rgba(23,26,43,.07); --g-strich:rgba(23,26,43,.24);
  --g-leise:#4a4f6b; --g-akzent-zart:rgba(90,63,208,.13);
  --g-rot-zart:rgba(179,38,30,.12); --g-gelb:#7d5400; --g-gelb-zart:rgba(214,150,0,.2);
  --g-gruen:#18633e; --g-gruen-zart:rgba(24,99,62,.13);
  --g-schatten:0 10px 30px -14px rgba(23,26,43,.35);
  --g-schleier:rgba(10,12,25,.32);
  --g-unschaerfe:blur(18px) saturate(1.5); --g-unschaerfe-stark:blur(28px) saturate(1.6);
  --g-schrift:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --g-rund-karte:22px; --g-rund-knopf:14px; --g-rund-feld:14px; --g-rund-blatt:28px;
  /* Anwendung */
  --grund:#edeff7; --grund-tief:#e2e5f1;
  --akzent:#5a3fd0; --akzent-hell:#4a31b8; --akzent-rgb:90,63,208;
  --warn:#b3261e; --warn-rgb:179,38,30;
  --gold:#7d5400; --gold-rgb:125,84,0;
  --text:#171a2b; --text-hell:#0c0e1a; --text-ai:#171a2b;
  --dim:#4a4f6b; --dim-rgb:74,79,107; --dim-schwach:#5f6485;
  --karte-rgb:255,255,255; --tief-rgb:255,255,255;
  --auf-akzent:#ffffff;
  --pos:#18633e; --pos-rgb:24,99,62; --neg:#b3261e;
  --stufe1:#cdd1e4; --stufe2:#9a9fbd;
  --raster:0; --linien:0; --vignette:0; --schleier:0;
  --karte-a:.6; --karte-b:.6;
  --radius:14px; --eck:none;
  --font-head:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* die Kurznamen aus css/tokens.css stehen dort am :root - hier noch einmal, damit sie diese Werte tragen */
  --bg:var(--grund); --red:var(--warn); --orange:var(--akzent); --amber:var(--gold); --txt:var(--text); --dim-alt:var(--dim);
  --line:rgba(23,26,43,.10); --line-hot:rgba(23,26,43,.22);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root[data-thema="strom"]{
    --g-grund:#0d0f1e;
    --g-klecks1:rgba(110,84,230,.4); --g-klecks2:rgba(20,130,125,.34); --g-klecks3:rgba(170,80,60,.28);
    --g-glas:rgba(44,47,78,.5); --g-glas-stark:rgba(24,26,46,.8); --g-glas2:rgba(255,255,255,.08);
    --g-fest:#1c1f36; --g-feld:rgba(255,255,255,.07);
    --g-rand:rgba(255,255,255,.16); --g-kante:rgba(0,0,0,.35); --g-strich:rgba(255,255,255,.28);
    --g-leise:#b4b8d4; --g-akzent-zart:rgba(181,164,255,.18);
    --g-rot-zart:rgba(255,120,110,.18); --g-gelb:#f4ca6a; --g-gelb-zart:rgba(244,202,106,.16);
    --g-gruen:#84e0b0; --g-gruen-zart:rgba(132,224,176,.15);
    --g-schatten:0 10px 30px -14px rgba(0,0,0,.7);
    --g-schleier:rgba(4,5,14,.5);
    --grund:#0d0f1e; --grund-tief:#080a16;
    --akzent:#b5a4ff; --akzent-hell:#cfc3ff; --akzent-rgb:181,164,255;
    --warn:#ffa197; --warn-rgb:255,161,151;
    --gold:#f4ca6a; --gold-rgb:244,202,106;
    --text:#f0f1fb; --text-hell:#ffffff; --text-ai:#f0f1fb;
    --dim:#b4b8d4; --dim-rgb:180,184,212; --dim-schwach:#8d92b3;
    --karte-rgb:44,47,78; --tief-rgb:16,18,36;
    --auf-akzent:#15122b;
    --pos:#84e0b0; --pos-rgb:132,224,176; --neg:#ffa197;
    --stufe1:#3a3e60; --stufe2:#5d6290;
    --line:rgba(255,255,255,.12); --line-hot:rgba(255,255,255,.26);
    color-scheme:dark;
  }
}