/* --- FILE: ./static/css/tokens.css ---
   Farb-Tokens fuer ALLE Controller und Fernseher — eine Datei statt 37 Kopien.
   Eingebunden ueber templates/base.html, vor allen Modul-Stylesheets.

   Die Werte stammen aus den tv.css, weil dort die Rahmenfarben korrekt sind:
   in den controller.css trugen --green und --orange faelschlich dasselbe
   99-Alpha wie ihre Fill-Gegenstuecke, wodurch die Antworten A und C keinen
   sichtbaren Rahmen hatten. Mit dieser Datei ist das behoben.

   Wer eine Farbe aendern will, aendert sie hier — und nirgends sonst.
*/

:root {
  /* Grundflaeche. Achtung: wird auf den Spielscreens von media/background.svg
     ueberdeckt, das ein eigenes deckendes Rechteck mitbringt. */
  --bg: #00167a;

  /* Flaeche fuer Boxen auf dunklem Grund */
  --white20: rgba(255, 255, 255, 0.20);

  /* Die vier Antwortfarben — deckend fuer Rahmen … */
  --yellow: #FFF500;
  --blue:   #1F80FF;
  --green:  #9EFF1F;
  --orange: #FFA51F;

  /* … und mit 60 % Deckung als Fuellung. */
  --yellowFill: #FFF50099;
  --blueFill:   #1F80FF99;
  --greenFill:  #9EFF1F99;
  --orangeFill: #FFA51F99;

  /* Rueckmeldung richtig/falsch — Punktekachel, haveievers Ja/Nein-Umfrage,
     songsters Zeitstrahl, finales Joker-Zustaende.
     NICHT fuer die Aufloesung auf dem Handy: dafuer stehen weiter unten
     eigene Tokens. Wuerde man diese beiden umdeuten, faerbte sich haveievers
     Umfrage ungewollt mit um. */
  --correctGreen: rgb(46, 204, 113);
  --wrongRed:     rgb(231, 76, 60);

  /* Takt der Aufloesung. Fragebox (controller-core.css) und Antwortkachel
     (answers-mc.css) faerben sich im selben Moment — das geht nur, wenn beide
     dieselbe Dauer und dieselbe Kurve benutzen. Darum stehen die Werte hier
     und nicht zweimal daneben. Wer den Moment umtaktet, aendert ihn hier. */
  --revealDur:  220ms;
  --revealEase: cubic-bezier(.2, .7, .3, 1);

  /* ---------- Aufloesung: Rand und Schein statt Fuellung ----------
     Richtig und falsch sagen Rand und Schein, nie die Flaeche. Eine volle
     Ergebnisfuellung hatte zwei Probleme: Gruen kollidierte mit der gruenen
     Antwort C, und weisse Schrift darauf kam auf 2,1:1 Kontrast — unter
     jedem lesbaren Wert. Derselbe Kniff wie auf dem Fernseher
     (wellguessed/static/tv.js:156-164). */
  --revealOk:  #39FF14;
  --revealBad: #FF2E2E;

  /* Die beiden Kacheln, die etwas zu sagen haben, treten dafuer auf eine
     neutrale dunkle Buehne. Das ist der Unterschied zwischen "sieht gut aus"
     und "sieht immer gut aus": auf der Antwortfarbe stimmte der Neonrand nur
     dann, wenn zufaellig die gruene Kachel richtig und die orange falsch war.
     Neongruen auf Blau und ein rotes Kreuz auf Blau taten es nicht.

     Die uebrigen zwei behalten ihre Antwortfarbe und werden nur
     zurueckgenommen — A/B/C/D bleibt damit ablesbar. */
  --revealFill: rgba(0, 14, 24, 0.62);

  /* Der Rand ist 3 px stark: die 2 px des Grundzustands plus ein Inset-Ring.
     Der Ring statt einer echten border-width-Aenderung, weil der Rahmen
     sonst 1 px Innenflaeche wegnaehme und ein langer Antworttext neu
     umbrechen koennte. */
  --revealOkRing:
    inset 0 0 0 1px var(--revealOk),
    0 0 12px rgba(57, 255, 20, 0.62),
    0 0 26px rgba(57, 255, 20, 0.42);
  --revealBadRing:
    inset 0 0 0 1px var(--revealBad),
    0 0 12px rgba(255, 46, 46, 0.50),
    0 0 26px rgba(255, 46, 46, 0.34);

  /* Das Kreuz auf der eigenen falschen Antwort. Bleibt rot, auch wenn der
     Rahmen gold pulst (finales Gold-Joker) — deshalb ein eigener Name und
     nicht --revealBad. Genau so dick wie der rote Rand, den es kreuzt: eine
     duennere Linie sah auf dem Geraet nach Kratzer aus, nicht nach Streichung. */
  --strikeColor: #FF2E2E;
  --strikeW:     3px;
  --strikeDur:   260ms;
  --strikeDelay: 300ms;

  /* Ruettler auf der eigenen falschen Antwort. */
  --shakeDur: 420ms;

  /* Der Schein um das Display leuchtet schnell auf und klingt langsam aus.
     Wie lange er dazwischen STEHT, steht hier bewusst nicht: er bleibt, bis
     die Punktekachel oben wieder zugeklappt ist (onClose in
     static/js/score_chip.js). Als feste Dauer war er ein Blitz — der Moment
     war vorbei, bevor man hingesehen hatte. */
  --pulseIn:  180ms;
  --pulseOut: 520ms;

  /* Farbe des Rahmenpulses. Die Zustandsklasse auf .ps-controller setzt sie
     um. Der Standardwert MUSS hier stehen: eine Deklaration mit einem
     unaufloesbaren var() faellt nicht auf ihren vorherigen Wert zurueck,
     sondern verschwindet ganz — dann waere der Puls unsichtbar statt
     falsch gefaerbt. */
  --pulseColor: transparent;
  --pulseGlow:  transparent;

  /* Timer-Leiste */
  --barBg:   rgba(255, 255, 255, 0.18);
  --barFill: rgba(255, 255, 255, 0.92);
}