/*
 * Gemeinsame Design-Grundlage der Lernwerkzeuge.
 *
 * Herkunft: uebernommen aus style.css des heutigen Abi-Trainers
 * (06_Lernplattform/02_Mathe_Trainer/02_Prototyp_v3), damit der
 * neue Trainer aussieht wie der gewohnte.
 *
 * Diese Datei liegt im Kern-Plugin. Trainer und KI-Tutor binden
 * sie ueber ihren angemeldeten Namen ein. Deshalb traegt jede
 * Variable das Praefix mx- und nicht das eines Werkzeugs:
 * Sie gehoert allen, nicht einem.
 *
 * Regel: Farbwerte nie direkt in eine Regel schreiben, immer
 * ueber diese Variablen.
 */

:root {
    /* Leitfarben. Deckungsgleich mit dem Corporate Design. */
    --mx-primaer: #00254F;
    --mx-sekundaer: #1e3a5f;

    /* Akzent. Im alten Trainer stand hier Gold; das ist im
       Corporate Design durch Rosa abgeloest. Drei Abstufungen:
       der Ton selbst, eine dunklere Fassung fuer Raender und
       Zeigefinger-Zustaende, eine zarte fuer stille Flaechen. */
    --mx-akzent: #F2A9A9;
    --mx-akzent-dunkel: #E08F8F;
    --mx-akzent-zart: #F6DADA;
    --mx-akzent-hell: #fce4e4;

    /* Text in drei Abstufungen. */
    --mx-text: #1a202c;
    --mx-text-mittel: #4a5568;
    --mx-text-hell: #718096;

    /* Flaechen und Linien. */
    --mx-rahmen: #e2e8f0;
    --mx-rahmen-mittel: #d7dde3;
    --mx-flaeche: #f0f2f5;
    --mx-flaeche-zart: #f7f9fb;
    --mx-warm: #FFF9F2;
    --mx-karte: #ffffff;

    /* Rueckmeldung. Diese vier sind der eigentliche Grund fuer
       die gemeinsame Datei: Gruen muss im Tutor dasselbe
       bedeuten wie im Trainer. */
    --mx-richtig: #22B573;
    --mx-richtig-flaeche: #d1fae5;
    --mx-richtig-text: #065F46;
    --mx-falsch: #991b1b;
    --mx-falsch-flaeche: #fee2e2;
    --mx-falsch-text: #7F1D1D;

    /* Radien. */
    --mx-radius-klein: 6px;
    --mx-radius: 8px;
    --mx-radius-gross: 12px;

    /* ------------------------------------------------------
       Lesestoff. Zweite Gattung von Bausteinen, siehe Abschnitt
       "Zwei Gattungen von Bausteinen" in 00_UEBERBLICK.md
       (12_Lernwerkzeuge). Uebernommen aus lernlektionen.css,
       wo sie erprobt sind. Bewusst eigene Werte: Diese Farben
       tragen keine Rueckmeldung, sondern kennzeichnen die Art
       des Inhalts. Sie gelten ueberall, wo erklaert wird, also
       auch im Trainer und in der Antwort des Tutors.

       Drei Rollen. Gold mit blauem Streifen traegt Formel und
       Aufgabe und ist der Grundton des Lesestoffs. Blau traegt
       Beispiel und Merksatz. Rot traegt Warnung und Hinweis.

       Eine vierte Rolle, ein gelber Kasten mit goldenem
       Streifen, ist am 2026-08-25 auf Alex' Entscheidung
       entfallen: Warnung und Hinweis tragen beide das Rot, ein
       eigener Farbton dafuer war weder noetig noch schoen.
       ------------------------------------------------------ */

    /* Grundton: Formelblock, Aufgabenbox, Loesungsknopf. */
    --mx-lese-gold: #FFF3E6;
    --mx-lese-gold-zart: #FFFAF3;
    --mx-lese-linie: var(--mx-primaer);

    /* Beispiel und Merksatz. */
    --mx-lese-beispiel-flaeche: #E8F4FD;
    --mx-lese-beispiel-linie: #2196F3;

    /* Warnung, Achtung-Hinweis und herausgehobener Hinweis. */
    --mx-lese-warnung-flaeche: #FFF0F0;
    --mx-lese-warnung-linie: #E57373;

    /* Linie in Tabellen des Lesestoffs. */
    --mx-lese-tabelle-linie: #dddddd;

    /* Formelgroesse und Stand-Farben. Die Schrift wird bewusst
       nicht gesetzt: Die Werkzeuge sitzen in einer WordPress-
       Seite und erben die Schrift der Plattform, sonst stehen
       zwei Schriften auf einer Seite. */
    --mx-formel-groesse: 22px;
    --mx-offen: #cbd5e0;
    --mx-angefangen: #F2A9A9;
    --mx-sicher: #22B573;
}