/* Design-Tokens: Farben, Radien, Schatten, Abstände. Hell und dunkel. */

:root {
    /* Flächen – helle Oberfläche mit hellgrauem Grund */
    --bg: #f7f8fa;
    --bg-tief: #eef0f4;
    --flaeche: #fff;
    --flaeche-erhoben: #fff;
    --rand: #e8eaef;
    --rand-stark: #d6dae2;

    /* Text */
    --text: #12141a;
    --text-weich: #3d434e;
    --gedimmt: #6b7280;

    /* Akzent: Indigo-Violett */
    --akzent: #6366f1;
    --akzent-tief: #4f46e5;
    --akzent-hell: #818cf8;
    --akzent-weich: #eef0ff;
    --akzent-kontrast: #fff;

    /* Zustände */
    --gut: #10a56d;
    --gut-weich: #e7f8f1;
    --schlecht: #e11d48;
    --schlecht-weich: #fdeef1;
    --warn: #f59e0b;
    --warn-weich: #fef5e7;

    /* Dunkle Navigationsleiste – in beiden Schemata dunkel */
    --nav-bg: #17181d;
    --nav-bg-tief: #101116;
    --nav-text: #e6e7ec;
    --nav-gedimmt: #8b8f9c;
    --nav-rand: #2a2c34;
    --nav-aktiv: #26283180;

    /* Verläufe für hervorgehobene Inhalte */
    --verlauf-primaer: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    --verlauf-kuehl: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
    --verlauf-warm: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
    --verlauf-flaeche: linear-gradient(160deg, #fbfbfd 0%, #f4f5f9 100%);

    /* Form */
    --radius: 16px;
    --radius-gross: 24px;
    --radius-klein: 10px;
    --radius-pille: 999px;

    --schatten-fein: 0 1px 2px rgb(16 18 26 / 5%);
    --schatten: 0 1px 2px rgb(16 18 26 / 4%), 0 4px 16px rgb(16 18 26 / 5%);
    --schatten-hoch: 0 2px 4px rgb(16 18 26 / 5%), 0 12px 32px rgb(16 18 26 / 10%);
    --schatten-akzent: 0 4px 16px rgb(99 102 241 / 28%);

    --nav-breite: 16rem;
}

/* Dunkles Schema: einmal als Systemvorgabe, einmal per Schalter erzwungen. */
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) {
        --bg: #0e0f13;
        --bg-tief: #08090c;
        --flaeche: #16181e;
        --flaeche-erhoben: #1c1f26;
        --rand: #262931;
        --rand-stark: #343841;

        --text: #eceef2;
        --text-weich: #c3c7d1;
        --gedimmt: #8b909c;

        --akzent: #818cf8;
        --akzent-tief: #6366f1;
        --akzent-hell: #a5b4fc;
        --akzent-weich: #1e2033;
        --akzent-kontrast: #0e0f13;

        --gut: #34d399;
        --gut-weich: #0f2a20;
        --schlecht: #fb7185;
        --schlecht-weich: #2c1219;
        --warn: #fbbf24;
        --warn-weich: #2b2110;

        --nav-bg: #111217;
        --nav-bg-tief: #0a0b0e;
        --nav-rand: #23252d;

        --verlauf-flaeche: linear-gradient(160deg, #1b1e26 0%, #15171d 100%);

        --schatten-fein: 0 1px 2px rgb(0 0 0 / 40%);
        --schatten: 0 1px 2px rgb(0 0 0 / 35%), 0 4px 16px rgb(0 0 0 / 30%);
        --schatten-hoch: 0 2px 4px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 45%);
        --schatten-akzent: 0 4px 16px rgb(99 102 241 / 35%);
    }
}

:root[data-thema="dunkel"] {
    --bg: #0e0f13;
    --bg-tief: #08090c;
    --flaeche: #16181e;
    --flaeche-erhoben: #1c1f26;
    --rand: #262931;
    --rand-stark: #343841;

    --text: #eceef2;
    --text-weich: #c3c7d1;
    --gedimmt: #8b909c;

    --akzent: #818cf8;
    --akzent-tief: #6366f1;
    --akzent-hell: #a5b4fc;
    --akzent-weich: #1e2033;
    --akzent-kontrast: #0e0f13;

    --gut: #34d399;
    --gut-weich: #0f2a20;
    --schlecht: #fb7185;
    --schlecht-weich: #2c1219;
    --warn: #fbbf24;
    --warn-weich: #2b2110;

    --nav-bg: #111217;
    --nav-bg-tief: #0a0b0e;
    --nav-rand: #23252d;

    --verlauf-flaeche: linear-gradient(160deg, #1b1e26 0%, #15171d 100%);

    --schatten-fein: 0 1px 2px rgb(0 0 0 / 40%);
    --schatten: 0 1px 2px rgb(0 0 0 / 35%), 0 4px 16px rgb(0 0 0 / 30%);
    --schatten-hoch: 0 2px 4px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 45%);
    --schatten-akzent: 0 4px 16px rgb(99 102 241 / 35%);
}

:root[data-thema="hell"] { color-scheme: light; }
:root[data-thema="dunkel"] { color-scheme: dark; }