/**
 * theme.css - DIE FARBEN DER OBERFLAECHE, an genau einer Stelle.
 *
 * Farbwelt „Himmel" (gewaehlt am 10.09.2026): kraeftiges Blau als Leitfarbe,
 * dunkle Schrift.
 *
 * ⚠️ DIE FLAECHEN SIND SEIT DEM 14.09.2026 BEIGE, NICHT WEISS (Anweisung:
 * „das waere Augenschonender"). Weiss bei voller Helligkeit ist der hellste
 * Punkt, den ein Bildschirm kann; ueber Stunden ist das anstrengender als
 * ein warmer, leicht abgesenkter Grund. Die Leitfarben bleiben blau - ein
 * kuehler Akzent auf warmem Grund trennt sich besser als auf weissem.
 *
 * ⚠️ BEIGE IST DUNKLER ALS WEISS, ALSO SINKT JEDER KONTRAST. Beim ersten
 * Wurf lagen sechs Kombinationen unter 4,5 : 1. Die Staffel ist deshalb
 * heller gefasst und `--pd-text-s`/`--pd-text-aus` sind nachgezogen -
 * durchgerechnet, nicht geschaetzt.
 *
 * ⚠️ WARUM DAS UEBERHAUPT NOETIG WAR. Vor der Umstellung standen 1062
 * UI-Farbangaben im Bestand verteilt:
 *
 *     CSS (15 Dateien)        293
 *     PHP (index + partials)  204
 *     JS als Inline-Style     565     <- MEHR als CSS und PHP zusammen
 *
 * Inline-Styles schlagen jedes Stylesheet. Ein Theme-Umschalter im CSS
 * allein haette also gut die Haelfte der Oberflaeche dunkel gelassen -
 * helle Panels mit heller Schrift darauf. Deshalb benutzen auch die
 * Inline-Styles im JavaScript diese Variablen: `el.style.color =
 * 'var(--pd-text)'` funktioniert.
 *
 * ⚠️ WO `var()` NICHT GEHT und die Farbe deshalb roh bleiben MUSS:
 *   - Canvas-Zeichnung (`ctx.fillStyle`) - fpsHUD, wbCanvas*, ...
 *   - der Wert eines <input type="color"> (braucht #rrggbb)
 *   - alles, was GESPEICHERT wird (Zeichenfarbe, roadParams.farbe)
 *   - 3D-Materialien (die stehen ohnehin als 0x... da)
 * Diese Stellen fuehrt `pruefung/tests/d_farben.mjs` als benannte Ausnahmen.
 *
 * ⚠️ LESBARKEIT IST GEMESSEN, NICHT GESCHAETZT. Jede Kombination aus dieser
 * Palette wird von `d_farben.mjs` auf ihr WCAG-Kontrastverhaeltnis geprueft;
 * unter 4,5:1 fuer Fliesstext schlaegt der Lauf fehl. Der Ist-Zustand vorher
 * hatte 5 von 11 typischen Kombinationen darunter, die schlechteste bei
 * 1,66:1 (Violett #533483 auf dunklem Grund - praktisch unsichtbar).
 */

:root {
    /* ---------- Flaechen, von hinten nach vorn ---------- */
    --pd-grund:       #f2ece0;   /* Seitenhintergrund, hinter allem      */
    --pd-flaeche:     #fdfbf6;   /* Panels, Leisten, Dialoge, Tabellen   */
    --pd-flaeche-2:   #f9f4ea;   /* leicht abgesetzt (Kopfzeilen)        */
    --pd-vertief:     #f2ebdc;   /* Eingaben, Zeilengrund, gedrueckt     */
    --pd-vertief-2:   #e9e1cf;   /* staerker vertieft, Fortschritt       */
    --pd-schleier:    rgba(12,35,64,0.45);   /* hinter Dialogen          */

    /* ---------- Linien ---------- */
    --pd-rahmen:      #d9cdb4;   /* Trennlinien, Panelraender            */
    --pd-rahmen-st:   #b5a382;   /* betonte Raender, Eingabefelder       */
    --pd-rahmen-fein: rgba(12,35,64,0.08);

    /* ---------- Schrift ---------- */
    /* ⚠️ Die Werte gelten gegen --pd-flaeche. Die zweite Zahl ist der
       UNGUENSTIGSTE Fall der Palette: --pd-vertief-2, die dunkelste
       Flaeche, auf der ueberhaupt Text steht. Danach ist die Staffel
       bemessen, nicht nach dem bequemen Fall. */
    --pd-text:        #0c2340;   /* Ueberschriften, Werte  15,3 / 12,1:1 */
    --pd-text-n:      #33506f;   /* Fliesstext              8,1 /  6,4:1 */
    --pd-text-s:      #465c78;   /* Nebenangaben, Einheiten 6,6 /  5,3:1 */
    --pd-text-aus:    #4d5d6f;   /* ausgeblendet, LESBAR    6,5 /  5,2:1 */
    --pd-text-auf:    #ffffff;   /* Schrift AUF einer Akzentflaeche      */

    /* ---------- Die vier Werkzeuggruppen ----------
       ⚠️ FARBE KODIERT FUNKTION. Wer die Beschriftung nicht liest,
       erkennt die Gruppe trotzdem - die wichtigste Vereinfachung
       fuer Gelegenheitsnutzer. */
    --pd-messen:      #0369a1;   /* Linie, Flaeche, Polylinie, Hoehe     */
    --pd-messen-h:    #075985;   /* dieselbe Farbe, angefasst            */
    --pd-messen-b:    #e0f2fe;   /* ihr heller Grund                     */
    --pd-doku:        #7e22ce;   /* Zeichnen, Screenshot, Drucken        */
    --pd-doku-h:      #6b21a8;
    --pd-doku-b:      #f3e8ff;
    --pd-export:      #0f766e;   /* Import, Export, Koordinaten          */
    --pd-export-h:    #115e59;
    --pd-export-b:    #ccfbf1;
    --pd-ansicht:     #c2410c;   /* Projekt, Ansicht, Schnittbox         */
    --pd-ansicht-h:   #9a3412;
    --pd-ansicht-b:   #ffedd5;

    /* ---------- Meldungen ---------- */
    --pd-gut:         #126a33;
    --pd-gut-b:       #dcfce7;
    --pd-warn:        #b45309;
    --pd-warn-b:      #fef3c7;
    --pd-gefahr:      #be123c;
    --pd-gefahr-h:    #9f1239;
    --pd-gefahr-b:    #ffe4e6;

    /* ---------- Ein laufender Modus ----------
       ⚠️ GEDAEMPFTES ROSA, KEIN SIGNALROT. Ein aktiver Zeichenmodus ist
       kein Fehler und keine Gefahr - er soll auffallen, ohne zu schreien.
       Vorher stand hier `#e94560` bei voller Deckung; auf dem hellen Grund
       war das grell. Die Flaeche traegt dunkle Schrift (7,0:1). */
    --pd-aktiv:       #e9a7bd;
    --pd-aktiv-rand:  #c2607f;

    /* ---------- Auswahl und Fokus ---------- */
    --pd-wahl:        rgba(3,105,161,0.13);  /* markierte Zeile          */
    --pd-wahl-rand:   #0369a1;
    --pd-fokus:       0 0 0 3px rgba(3,105,161,0.30);

    /* ---------- Schatten ---------- */
    --pd-schatten:    0 2px 10px rgba(12,35,64,0.10);
    --pd-schatten-m:  0 4px 16px rgba(12,35,64,0.14);
    --pd-schatten-x:  0 10px 34px rgba(12,35,64,0.22);

    /* ---------- Masse ---------- */
    --pd-radius:      8px;
    --pd-radius-s:    5px;
    --pd-radius-g:    12px;
}

/* Der Textcursor und die Markierung sollen zur Leitfarbe passen. */
::selection { background: rgba(3,105,161,0.24); color: var(--pd-text); }

/* Bildlaufleisten: die dunkle Voreinstellung des Browsers wuerde in einer
   hellen Oberflaeche als schwarzer Balken stehen. */
* { scrollbar-color: var(--pd-rahmen-st) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--pd-rahmen-st);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--pd-text-s); background-clip: content-box; }