/* ===========================================================================
   Brücke von der Lichtung zum Relaunch (Phase A3, 05.10.2026)

   stil.css baut Detailansicht, Abschnitte, Dialog und Fuß aus den Tokens der
   Lichtung (--t-*, --f-*, --l-*, --a-*, --s-*, --schrift-*). Statt jede der
   rund 5.000 Zeilen neu zu schreiben, bekommen dieselben Namen hier die
   Werte des Relaunchs aus tokens.css — je Tageszeit, weil sie auf Tokens
   verweisen, die mit data-zeit wechseln. Dasselbe Prinzip wie beim
   Papier-Farbsatz (.druckfarben, CLAUDE.md „Designrichtung“): der Farbsatz
   wird getauscht, nicht jedes Bauteil.

   Drei Regeln:
   - Gesetzt wird am body und nur ohne .druckfarben. Beim Drucken und beim
     Exposé setzt app.js .druckfarben ans Wurzelelement; dann greift die
     Brücke nicht, und alles erbt wieder den Papier-Farbsatz und die Schriften
     der Lichtung aus :root. Das Exposé bleibt dadurch unverändert
     (DESIGN-VORGABE 12: „Exposé unverändert im Stil“).
   - Hier steht keine Farbe als Zahl. Was fehlte, steht in tokens.css
     (--halb für den Bernstein der Ampel).
   - Das Diagramm liest seine Farben am body (app.js, planFarbe), damit es
     dieselben Werte bekommt wie die Schrift daneben.
   =========================================================================== */

:root:not(.druckfarben) body {
    /* Flächen */
    --f-seite: var(--grund);
    --f-panel: var(--glas-stark);
    --f-karte: var(--glas-deckend);
    --f-tief: var(--feld);
    --f-feld: var(--feld);
    --f-mark: color-mix(in srgb, var(--text) 8%, transparent);
    --f-glas: var(--glas);
    --f-glas-dicht: var(--glas-stark);
    --f-glas-innen: var(--feld);
    --glas-blur: var(--glas-filter);
    --glas-kante: inset 0 0 0 1px var(--glasrand), inset 0 1px 0 var(--glanzrand);

    /* Linien. --l-stark ist die Kante eines Bedienelements und muss 3:1
       tragen; gemessen wird sie am gerenderten Bild (A3, Kontrastlauf). */
    --l-zart: color-mix(in srgb, var(--text) 8%, transparent);
    --l-mittel: var(--glasrand);
    --l-glas: var(--glasrand);
    --l-stark: color-mix(in srgb, var(--leise) 70%, transparent);
    --l-feld: var(--l-stark);

    /* Schrift */
    --t-stark: var(--text);
    --t-normal: color-mix(in srgb, var(--text) 60%, var(--leise));
    --t-leise: var(--leise);
    --t-marke: var(--text);

    /* Akzent: nur Bedienbares */
    --a-basis: var(--akzent);
    --a-hoch: color-mix(in srgb, var(--akzent) 75%, var(--text));
    --a-flaeche: color-mix(in srgb, var(--akzent) 16%, transparent);
    --a-ring: color-mix(in srgb, var(--akzent) 45%, transparent);
    --auf-a: var(--primaer-text);

    /* Status: nur Ergebnisse */
    --s-gut: var(--gut);
    --s-halb: var(--halb);
    --s-schlecht: var(--schlecht);
    --s-gut-f: color-mix(in srgb, var(--gut) 14%, transparent);
    --s-halb-f: color-mix(in srgb, var(--halb) 14%, transparent);
    --s-schlecht-f: color-mix(in srgb, var(--schlecht) 14%, transparent);

    /* Diagramm: Reihen sind keine Statusfarben (CLAUDE.md „Diagramme“). */
    --reihe-1: var(--akzent);
    --reihe-2: var(--leise);
    --reihe-gitter: var(--glasrand);

    /* Schriften: Figtree für Text und Zahlen, Barlow Condensed für
       Überschriften. Anton bleibt den großen Überschriften vorbehalten
       (seite.css). */
    --schrift-anzeige: var(--f-kopf);
    --schrift-text: var(--f-text);
    --schrift-zahl: var(--f-text);

    --schwebe: 0 24px 60px -28px var(--schatten);
}