/**
 * Farb-Tokens nach der Vorgabe in color.jpg.
 *
 * Dark Mode ist der Standard (Vorgabe aus CLAUDE.md). Die Werte hier sind die
 * Ausgangspalette - der Admin kann sie spaeter in den Einstellungen aendern,
 * deshalb steht jede Farbe als eigene Variable und wird nirgends fest im
 * Stylesheet wiederholt.
 */

:root {
    /* --- Dark Mode: der Standard --------------------------------------- */
    --grund: #262626;           /* Background */
    --flaeche: #333333;         /* Surface */
    --flaeche-variante: #404040;/* Surface Variant */
    --primaer: #4691e7;         /* Primary */
    --primaer-variante: #94bae6;/* Primary Variant */
    --text: #e6e6e6;            /* Text Primary */
    --text-zweit: #b3b3b3;      /* Text Secondary */
    --text-inaktiv: #737373;    /* Text Disabled */
    --rand: #4d4d4d;            /* Border */
    --trenner: #404040;         /* Divider */
    --fehler: #ea312e;          /* Error */
    --erfolg: #57c15d;          /* Success */
    --warnung: #ff981a;         /* Warning */

    /* Auf farbigen Flaechen liegender Text. */
    --auf-primaer: #ffffff;

    /* Abgeleitete Werte - nicht einzeln einstellbar. */
    --schatten: 0 2px 8px rgba(0, 0, 0, 0.4);
    --radius: 8px;
    --radius-klein: 4px;

    /* Mindestgroesse fuer alles, was am Handy angetippt wird. */
    --tippflaeche: 44px;
}

/* --- Light Mode ------------------------------------------------------- */
[data-farbschema="hell"] {
    --grund: #ffffff;
    --flaeche: #f5f5f5;
    --flaeche-variante: #ffffff;
    --primaer: #4a90e2;
    --primaer-variante: #77ace9;
    --text: #1a1a1a;
    --text-zweit: #666666;
    --text-inaktiv: #9e9e9e;
    --rand: #e0e0e0;
    --trenner: #eeeeee;
    --fehler: #e53935;
    --erfolg: #43a047;
    --warnung: #fb8c00;
    --auf-primaer: #ffffff;
    --schatten: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/**
 * Wer am Geraet "helles Design" eingestellt hat und in der App noch nichts
 * gewaehlt hat, bekommt den Light Mode. Sobald in den Einstellungen etwas
 * gewaehlt wurde, setzt data-farbschema diese Regel ausser Kraft.
 */
@media (prefers-color-scheme: light) {
    :root:not([data-farbschema]) {
        --grund: #ffffff;
        --flaeche: #f5f5f5;
        --flaeche-variante: #ffffff;
        --primaer: #4a90e2;
        --primaer-variante: #77ace9;
        --text: #1a1a1a;
        --text-zweit: #666666;
        --text-inaktiv: #9e9e9e;
        --rand: #e0e0e0;
        --trenner: #eeeeee;
        --fehler: #e53935;
        --erfolg: #43a047;
        --warnung: #fb8c00;
        --schatten: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
}

/* --- Farben fuer die Monatsuebersicht --------------------------------- */
:root {
    --zeile-wochenende: color-mix(in srgb, var(--primaer) 7%, var(--flaeche-variante));
    --zeile-feiertag: color-mix(in srgb, var(--primaer) 12%, var(--grund));
    --zeile-fehlt: color-mix(in srgb, var(--warnung) 18%, var(--grund));
    --zeile-heute: color-mix(in srgb, var(--primaer) 20%, var(--grund));
    --wert-plus: var(--erfolg);
    --wert-minus: var(--fehler);
}