/*
 * Design Tokens – Single source of truth für alle Farben und Schriften
 *
 * Hier und NUR hier stehen Farbwerte. Alle Projekte verweisen per var(--…).
 *
 * Wer nutzt die Datei:
 *   der-fahrtrainer.de/webseite  → app/design-tokens.css ist ein Symlink hierher;
 *                                  deploy.sh überträgt ihn als echte Datei
 *                                  (rsync --copy-unsafe-links). globals.css
 *                                  bindet die Tailwind-Farben (@theme) daran.
 *   der-fahrtrainer.de/livequiz  → livequiz/public/design/tokens.css ist ein
 *                                  Symlink hierher; deploy.sh livequiz überträgt
 *                                  ihn als echte Datei (rsync --copy-unsafe-links)
 *   dl9bm.de (Startseite, Morsetrainer) → dl9bm.de/design/tokens.css ist ein
 *                                  Symlink hierher; dl9bm.de/deploy.sh kopiert die echte Datei
 *
 * Ausnahmen, die keine Variablen lesen können und die Werte deshalb selbst
 * tragen: Favicons/Icons (SVG-Dateien), Web-App-Manifeste, <meta name="theme-color">.
 */

:root {
    /* Palette (Der Fahrtrainer) */
    --schwarz:    #0D0D0D;
    --weiss:      #F8F6F1;
    --beige:      #EDE5D0;
    --himmelblau: #5BB8F5;
    --neongelb:   #DDFF00;
    --neonpink:   #FF00C8;
    --neongruen:  #39FF14;

    /* Neutrale Abstufungen */
    --anthrazit:      #1A1A1A;   /* Flächen auf Schwarz */
    --anthrazit-hell: #222222;
    --anthrazit-rand: #2E2E2E;
    --stein:          #A39E93;   /* gedämpfter Text auf Dunkel, 6:1 */
    --stein-dunkel:   #57534B;   /* gedämpfter Text auf Hell, ≥ 5,5:1 */
    --beige-dunkel:   #E3DAC2;   /* Flächen auf Beige */
    --beige-rand:     #D3C9AE;

    /* Dunklere Töne für helle Flächen – die Neonfarben und Himmelblau
       erreichen auf Weiß/Beige keine lesbaren Kontraste (Himmelblau 2:1).
       Alle unten ≥ 4,5:1 auf --weiss und --beige. */
    --himmelblau-tief: #16649E;
    --gruen-tief:      #17692B;
    --gelb-tief:       #6B5200;
    --rot-tief:        #B02A37;

    /* Hellrot für Fehler auf Dunkel (6:1); Neonpink ist Gestaltung, kein Fehler */
    --rot-hell: #FF6B7A;

    /* Bewertung: richtig / teilweise / falsch (LiveQuiz, Morsetrainer).
       Drei Farbrichtungen mit Abstand: Grün 147°, Gold 88°, Rot 20° (OKLCH).
       Teilweise ist bewusst Gold statt Neongelb: Neongelb (119°) liegt zu nah
       am Neongrün und ist im LiveQuiz schon Akzentfarbe.
         -hell  Schrift auf Dunkel (≥ 6:1 auf --schwarz/--anthrazit)
         -tief  Schrift auf Hell (≥ 5:1 auf --weiss/--beige)
         ohne   Mittelton für Flächen, die mal weiße, mal schwarze Schrift
                tragen, und für Schrift auf Weiß: je ~4,2:1 – mehr geht mit
                unserem Schwarz/Weiß nicht gleichzeitig. */
    --richtig-hell:   var(--neongruen);
    --richtig:        #1D8737;
    --richtig-tief:   var(--gruen-tief);
    --teilweise-hell: #FFCC28;
    --teilweise:      #937000;
    --teilweise-tief: var(--gelb-tief);
    --falsch-hell:    var(--rot-hell);
    --falsch:         #D63B4B;
    --falsch-tief:    var(--rot-tief);

    /* Einzelfarben (LiveQuiz). Neutrale Töne, Rot und Grün kommen aus der
       Palette oben (stein, beige-rand, rot-hell, rot-tief, gruen-tief …) –
       hier nur, was dort keine Entsprechung hat. Am 2026-10-12 von rund 30
       eigenen Werten (13 Grautöne, 5 Rottöne, Bootstrap-Blau …) gestrafft. */
    --sternorange: #F5A623;   /* Sterne im Feedback; Gold wäre auf Weiß zu blass */
    --gold:        #FFD700;   /* Rangliste Platz 1–3 */
    --silber:      #C8CDD4;
    --bronze:      #CD7F32;

    /* Dieselben Töne als R, G, B – für Transparenz: rgba(var(--weiss-rgb), 0.5).
       Bewusst nicht color-mix(): Das können Browser erst seit 2023, und
       Smartboards laufen oft mit älteren. Werte müssen zu den Hex-Werten passen. */
    --schwarz-rgb:     13, 13, 13;
    --weiss-rgb:       248, 246, 241;
    --himmelblau-rgb:  91, 184, 245;
    --neongelb-rgb:    221, 255, 0;
    --neonpink-rgb:    255, 0, 200;
    --neongruen-rgb:   57, 255, 20;
    --rot-hell-rgb:    255, 107, 122;
    --rot-tief-rgb:    176, 42, 55;
    --richtig-rgb:     29, 135, 55;
    --teilweise-rgb:   147, 112, 0;
    --falsch-rgb:      214, 59, 75;

    /* Semantische Mappings */
    --color-primary:   var(--schwarz);
    --color-secondary: var(--himmelblau);
    --color-highlight: var(--neongelb);
    --color-surface:   var(--weiss);

    /* Hintergrund & Text (LiveQuiz) */
    --color-bg:      var(--schwarz);
    --color-text:    var(--weiss);
    --color-overlay: var(--anthrazit);

    /* Zustandsfarben (LiveQuiz) */
    /* Mitteltöne, weil Flächen weiße Schrift tragen (auch .on-dark im
       Moderator erzwingt Weiß) und dieselbe Farbe als Schrift auf Weiß steht. */
    --color-correct: var(--richtig);
    --color-wrong:   var(--falsch);
    --color-danger:  var(--rot-hell);

    /* Feature-Akzente (LiveQuiz) */
    --color-zufall: var(--neonpink);

    /* Fonts */
    --font-display: 'Bebas Neue', sans-serif;
    --font-body:    'Inter Tight', sans-serif;
}