/* ============================================================================
   assets/css/tokens.css – Farb- und Form-Token, GEMEINSAM für Desktop und Handy
   ----------------------------------------------------------------------------
   Einzige Stelle mit Standardwerten. Der Stil-Editor (Tabelle style_token)
   legt seine Werte per <style id="theme-override"> darüber, in beiden
   Oberflächen. Hell in :root, Dunkel zweimal: automatisch (Betriebssystem,
   ausser der Nutzer hat fest "Hell" gewählt) und fest per data-theme.
   Wird von views/layout.php UND views/mobil/layout.php geladen.
   ========================================================================== */
:root {
    /* Flächen: warmes Papierweiss statt Blaugrau */
    --bg:          #f3f2ef;
    --flaeche:     #ffffff;
    --flaeche-2:   #faf9f7;
    --rahmen:      #e0ddd6;

    /* Text */
    --text:        #1c1a17;
    --text-leise:  #6d6659;

    /* Akzent: Bernstein */
    --akzent:      #b45309;
    --akzent-tf:   #92400e;
    --akzent-bg:   #fdf0e0;
    /* Schrift AUF Akzentflächen (Hauptknöpfe, gewählte Chips). Hell weiss,
       dunkel fast schwarz: Weiss auf dem hellen Bernstein des Dunkelmodus
       hatte nur 2,45:1 (Audit 15.10.2026), so sind es 7,1:1. */
    --akzent-ink:  #ffffff;
    --gefahr-ink:  #ffffff;   /* Schrift auf --gefahr-Flächen */

    /* Zustände (Text auf der jeweiligen -bg-Fläche mindestens 4,5:1) */
    --ok:          #137336;  --ok-bg:     #e6f4ea;
    --warn:        #a14a07;  --warn-bg:   #fdf0e0;
    --gefahr:      #b91c1c;  --gefahr-bg: #fdeaea;
    --info-bg:     #eef2f6;  --info-tf:   #334155;

    /* Form */
    --radius:      8px;
    --radius-s:    5px;
    --schatten:    0 1px 2px rgba(40,32,20,.07);
    --schatten-l:  0 12px 32px -14px rgba(40,32,20,.30);

    /* Eigene Token dieser Schicht */
    --ml-nav:        #1e242b;   /* Seitenleiste, dunkel */
    --ml-nav-2:      #2b333c;   /* aktiver Punkt darin */
    --ml-nav-text:   #9fb0bd;
    --ml-nav-hell:   #ffffff;
    --ml-marke:      #f59e0b;
    --ml-fein:       #eeebe5;   /* Trennlinien innerhalb von Karten */
    --ml-nav-leise:  #9a9285;   /* leise Schrift auf der dunklen Seitenleiste (5,1:1) */
    --ml-sehrleise:  #756d60;   /* 4,6:1 auf --bg; vorher #9a9285 mit 2,8:1 */
    --ml-tab:        44px;      /* Mindesthöhe alles Antippbaren */

    /* Farbsatz für Auswertungen: acht unterscheidbare Segmentfarben für
       gestapelte Balken (Statistik). Reihenfolge = Reihenfolge im Bild. */
    --stat-1: #b45309;  --stat-2: #0f766e;  --stat-3: #4338ca;  --stat-4: #a16207;
    --stat-5: #be123c;  --stat-6: #15803d;  --stat-7: #6d28d9;  --stat-8: #0369a1;
}

/* Dunkelmodus: derselbe Aufbau, andere Flächen. app.css schaltet über
   data-theme um; hier nur die Werte, die abweichen. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="hell"]) {
        --bg:         #14181d;
        --flaeche:    #1b2028;
        --flaeche-2:  #222831;
        --rahmen:     #303842;
        --text:       #e8e6e1;
        --text-leise: #a29a8c;
        --akzent:     #e39445;
        --akzent-tf:  #f0ab63;
        --akzent-bg:  #33261a;
        --akzent-ink: #1c1a17;  --gefahr-ink: #1c090c;
        /* Zustandsfarben aufgehellt: die hellen Werte hatten auf den dunklen
           Flächen nur 2,5 bis 3,1:1. */
        --ok:         #5cc07e;  --warn:    #e0a650;  --gefahr:   #f07a7a;
        --ml-sehrleise: #9a9285;
        --ok-bg:      #14291d;  --warn-bg: #33261a;  --gefahr-bg: #331a1a;
        --info-bg:    #1d2530;  --info-tf: #b8c4d2;
        --ml-nav:     #10141a;
        --ml-nav-2:   #1c242e;
        --ml-fein:    #262d36;
        --schatten:   0 1px 2px rgba(0,0,0,.45);
        --schatten-l: 0 12px 32px -14px rgba(0,0,0,.7);
        /* Auswertungsfarben, auf dunklem Grund aufgehellt. */
        --stat-1: #e39445;  --stat-2: #3fb6a8;  --stat-3: #8b8cf0;  --stat-4: #d9b45a;
        --stat-5: #f07a92;  --stat-6: #5cc07e;  --stat-7: #b18cf5;  --stat-8: #5aaede;
    }
}
/* Fest gewähltes "Dunkel". Selektor :root[...] statt html[...]: html[...]
   (Spezifität 0,1,1) verlor gegen :root[...] (0,2,0) in auskunft.css, und
   fest Dunkel zeigte Türkis statt Bernstein, also andere Farben als das
   automatische Dunkel (Audit 15.10.2026). */
:root[data-theme="dunkel"] {
    --bg:         #14181d;
    --flaeche:    #1b2028;
    --flaeche-2:  #222831;
    --rahmen:     #303842;
    --text:       #e8e6e1;
    --text-leise: #a29a8c;
    --akzent:     #e39445;
    --akzent-tf:  #f0ab63;
    --akzent-bg:  #33261a;
    --akzent-ink: #1c1a17;  --gefahr-ink: #1c090c;
    --ok:         #5cc07e;  --warn:    #e0a650;  --gefahr:   #f07a7a;
    --ml-sehrleise: #9a9285;
    --ok-bg:      #14291d;  --warn-bg: #33261a;  --gefahr-bg: #331a1a;
    --info-bg:    #1d2530;  --info-tf: #b8c4d2;
    --ml-nav:     #10141a;
    --ml-nav-2:   #1c242e;
    --ml-fein:    #262d36;
    --schatten:   0 1px 2px rgba(0,0,0,.45);
    --schatten-l: 0 12px 32px -14px rgba(0,0,0,.7);
    /* Auswertungsfarben, auf dunklem Grund aufgehellt. */
    --stat-1: #e39445;  --stat-2: #3fb6a8;  --stat-3: #8b8cf0;  --stat-4: #d9b45a;
    --stat-5: #f07a92;  --stat-6: #5cc07e;  --stat-7: #b18cf5;  --stat-8: #5aaede;
}