/* ===========================================================================
   tokens.css - die einzige Stelle, an der Farbwerte, Abstaende und Groessen
   des Portals definiert werden.

   Regel aus docs/08-gestaltung.md, Abschnitt 10: Ein Hexwert oder ein
   px-Abstand ausserhalb dieser Datei ist ein Fehler. Wer eine Farbe aendert,
   rechnet die Kontraste in Abschnitt 2 des Dokuments neu.

   Hier stehen ausschliesslich :root und die Dunkelmodus-Fassung - keine
   Selektoren auf Elemente oder Klassen.
   =========================================================================== */

:root {
    color-scheme: light dark;

    /* --- Marke ---------------------------------------------------------
       #166534 und #14532D sind exakt die Werte, die der Mailversand seit
       Phase 1 verwendet. Die Mails waren zuerst da; das Portal zieht nach. */
    --mp-marke-900: #0F2E1C;
    --mp-marke-800: #14532D;
    --mp-marke-700: #166534;
    --mp-marke-600: #1F7A43;
    --mp-marke-300: #7FCB99;
    --mp-marke-100: #DCF0E3;
    --mp-marke-50: #F2F8F4;

    /* --- Flaechen, Linien, Text ----------------------------------------
       Warm getoente Neutralwerte statt reinem Grau - sonst kippt das Gruen
       ins Kalte. */
    --mp-grund: #FAF8F4;
    --mp-flaeche: #FFFFFF;
    --mp-flaeche-leise: #F2EFE8;

    /* Nur dekorativ (1.39:1). Niemals als Rand eines Eingabefelds. */
    --mp-linie: #DFDACE;

    /* Rand von Eingabefeldern (3.68:1) - ein Feld, das man nicht vom
       Hintergrund unterscheiden kann, ist kein Feld. */
    --mp-feldrand: #8A8577;

    --mp-text: #1C1B17;
    --mp-text-leise: #5A564D;
    --mp-text-invers: #FFFFFF;

    /* --- Status --------------------------------------------------------
       Erfolg ist bewusst heller und gelbstichiger als das Markengruen:
       Beides gleich gruen, und jede Primaerschaltflaeche laese sich wie
       eine Erfolgsmeldung. */
    --mp-erfolg-flaeche: #E8F6EC;
    --mp-erfolg-rand: #2F9E44;
    --mp-erfolg-text: #1B6B2C;

    --mp-warnung-flaeche: #FDF1E3;
    --mp-warnung-rand: #C2680B;
    --mp-warnung-text: #8A4708;

    --mp-fehler-flaeche: #FDECEA;
    --mp-fehler-rand: #B3261E;
    --mp-fehler-text: #8C1D18;

    --mp-hinweis-flaeche: #EAF1F9;
    --mp-hinweis-rand: #2F6FB5;
    --mp-hinweis-text: #1B4B80;

    /* --- Diagrammreihen ------------------------------------------------
       Warnfarbe und Waermereihe teilen sich den Bernstein. Konfliktfrei,
       weil Diagrammfarben nie in Bedienelementen auftauchen. */
    --mp-reihe-waerme: #C2680B;
    --mp-reihe-wasser: #2F6FB5;
    --mp-reihe-vorjahr: #8A8577;
    --mp-reihe-prognose: #166534;

    /* --- Schrift -------------------------------------------------------
       Kein Webfont: Die geplante CSP kommt ohne Fremdhosts aus, und eine
       Einbindung von Google Fonts uebertraegt die IP jedes Besuchers an
       einen Dritten. */
    --mp-schrift: -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    /* Feste Schriftbreite. Fuer Shell-Befehle und Wiederherstellungscodes: Dort
       muss "l" von "1" und "O" von "0" unterscheidbar sein, weil jemand sie
       abtippt. Ebenfalls nur systemeigene Schriften - siehe oben. */
    --mp-schrift-fest: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
        "Liberation Mono", monospace;

    --mp-schrift-2xs: 0.75rem;
    --mp-schrift-xs: 0.8125rem;
    --mp-schrift-s: 0.875rem;
    --mp-schrift-m: 1rem;
    --mp-schrift-l: 1.125rem;
    --mp-schrift-xl: 1.375rem;
    --mp-schrift-2xl: 1.75rem;
    --mp-schrift-3xl: 2.25rem;

    --mp-zeilenhoehe: 1.5;
    --mp-zeilenhoehe-ueberschrift: 1.25;

    /* --- Abstaende: 4-px-Basisraster ----------------------------------- */
    --mp-abstand-1: 4px;
    --mp-abstand-2: 8px;
    --mp-abstand-3: 12px;
    --mp-abstand-4: 16px;
    --mp-abstand-5: 24px;
    --mp-abstand-6: 32px;
    --mp-abstand-7: 48px;
    --mp-abstand-8: 64px;

    /* --- Formen -------------------------------------------------------- */
    --mp-radius-klein: 4px;
    --mp-radius: 6px;
    --mp-radius-pille: 999px;

    /* Genau eine Schattenebene. */
    --mp-schatten: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);

    /* --- Breiten ------------------------------------------------------- */
    --mp-breite-formular: 46rem;
    --mp-breite-liste: 72rem;
    --mp-breite-anmeldung: 24rem;
    --mp-breite-lesetext: 38rem;

    --mp-breite-navigation: 15rem;
    --mp-hoehe-kopfzeile: 3.5rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --mp-marke-700: #1F7A43;
        --mp-marke-600: #2E8B4E;
        --mp-marke-100: #1E3A29;
        --mp-marke-50: #182119;

        --mp-grund: #131611;
        --mp-flaeche: #1B1F19;
        --mp-flaeche-leise: #232820;
        --mp-linie: #343A30;
        --mp-feldrand: #737A6B;

        --mp-text: #ECEAE3;
        --mp-text-leise: #A8A396;

        /* Statusflaechen entstehen im Dunkelmodus NICHT durch Aufhellen,
           sondern bleiben die normale Flaeche; getragen wird der Status vom
           3 px breiten Balken links (siehe komponenten.css). */
        --mp-erfolg-flaeche: var(--mp-flaeche);
        --mp-warnung-flaeche: var(--mp-flaeche);
        --mp-fehler-flaeche: var(--mp-flaeche);
        --mp-hinweis-flaeche: var(--mp-flaeche);

        --mp-erfolg-text: #8FD3A5;
        --mp-warnung-text: #E9A55C;
        --mp-fehler-text: #F0938C;
        --mp-hinweis-text: #8FB8E8;

        --mp-reihe-waerme: #E08B33;
        --mp-reihe-wasser: #5C97D8;
        --mp-reihe-vorjahr: #A8A396;
        --mp-reihe-prognose: #4FA96B;

        /* Schwarz auf Fastschwarz ist unsichtbar und kostet nur Rechenzeit.
           Getrennt wird im Dunkelmodus ueber --mp-linie. */
        --mp-schatten: none;
    }
}