/* ==========================================================================
   BAUWAGEN Kasse — tokens.css
   Einzige Quelle für Farbe, Schriftgröße, Raster, Radius und Bewegung.
   Bezug: DESIGN.md §3 Typografie, §4 Farbe, §5 Form/Raster, §9 Bewegung.

   Aufbau:
     1. Palette (Rohwerte, Tag + Nacht) — stehen immer auf :root, beide.
     2. Zuweisung — mappt Palette auf die Arbeits-Tokens.
        Genau drei Zuweisungsblöcke: Tag, Nacht-per-Systemwunsch, Nacht-hart.
        Die Rohwerte stehen dadurch nur EINMAL im Projekt, kein Wertedrift.
     3. Maße, Schrift, Raster, Zeit — themenunabhängig.

   Nacht ist eigenständig entworfen (§4), nicht per Filter abgedunkelt.
   Maximale Helligkeit im Nachtbetrieb ist #EDE9DE — nie reines Weiß.
   Einzige Ausnahme: die QR-Fläche (--qr-grund), die gescannt werden muss.
   ========================================================================== */

:root {
  /* --- 1. Palette Tag ---------------------------------------------------- */
  --tag-bg:        #D9D5CC;  /* Werkstattgrau, der Rahmen der Maschine        */
  --tag-panel:     #EFEDE7;  /* Bedienfeld-Fläche: Listen, Sheets             */
  --tag-key:       #F7F6F2;  /* Tastenoberfläche                              */
  --tag-key-down:  #E4E0D6;  /* Taste gedrückt                                */
  --tag-ink:       #1B1A17;
  --tag-ink-muted: #6E6B62;
  --tag-rule:      #B6B1A6;  /* 1px Haarlinie, ALLE Trennungen                */
  --tag-rule-hard: #1B1A17;  /* 3px Tastenkante                               */
  --tag-signal:    #E2531E;  /* bedeutet ausschließlich: hier drückst du      */
  --tag-signal-ink:#FFFFFF;
  --tag-gruen:     #1B7A46;  /* abgerechnet, bestätigt                        */
  --tag-rot:       #B5231C;  /* Storno, löschen, Fehler                       */
  --tag-gelb:      #E8B400;  /* wartet: Warteschlange, PIN nötig              */
  --tag-gelb-ink:  #1B1A17;

  /* Ergänzungen, die §4 nicht benennt, aber §7.7 und §8.4 brauchen.
     Bewusst klein gehalten und hier vollständig aufgelistet.               */
  --tag-blau:      #4A6FA5;  /* NUR Typmarkierung „Leute/Preise" im Buch §7.7 */
  --tag-auf-farbe: #FFFFFF;  /* Schrift auf Voll-Grün/Voll-Rot               */
  --tag-gruen-flaeche:  #C8E1D3; /* Halte-Füllung: --ink bleibt lesbar        */
  --tag-rot-flaeche:    #F1CFCB;
  --tag-signal-flaeche: #F6D4C4;
  --tag-gelb-flaeche:   #F6E6B8; /* Halte-Füllung „gleich kommt die PIN"      */

  /* --- 1. Palette Nacht --------------------------------------------------- */
  --nacht-bg:        #101010;
  --nacht-panel:     #191917;
  --nacht-key:       #232320;
  --nacht-key-down:  #2E2E29;
  --nacht-ink:       #EDE9DE;
  --nacht-ink-muted: #8C877B;
  --nacht-rule:      #3A3A33;
  --nacht-rule-hard: #000000;
  --nacht-signal:    #FF6A2B;
  --nacht-signal-ink:#140A04;
  --nacht-gruen:     #2E9E5B;
  --nacht-rot:       #E04B3C;
  --nacht-gelb:      #F5C518;
  --nacht-gelb-ink:  #101010;

  --nacht-blau:      #7FA3D8;
  --nacht-auf-farbe: #101010;
  --nacht-gruen-flaeche:  #143324;
  --nacht-rot-flaeche:    #3E1A16;
  --nacht-signal-flaeche: #3A1D0E;
  --nacht-gelb-flaeche:   #382C08;

  /* --- Themenunabhängig --------------------------------------------------- */
  --qr-grund: #FFFFFF;       /* §4: einzige reinweiße Fläche der App          */
  --qr-tinte: #000000;
  --backdrop: #000000;       /* Vollfläche, opacity .55, KEIN Blur (§1.1)     */

  /* --- 3. Schrift (§3) ---------------------------------------------------- */
  --font-text: "Atkinson Hyperlegible", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-num:  ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  /* Genau fünf Größen. Mehr wird nicht vergeben. */
  --fs-werk:   44px;  /* Zählwerk, PIN-Sperre-Countdown       — Mono 700      */
  --fs-gross:  22px;  /* Tastenbeschriftung, Beträge          — Text 700 / Mono 500 */
  --fs-text:   17px;  /* Namen, Fließtext, Sheet-Titel        — Text 400/700  */
  --fs-meta:   13px;  /* Meta, Zeitstempel, Buchzeile, Diagnose               */
  --fs-schild: 11px;  /* Schilder, Tab-Wörter, Feldlabels     — Versalien     */

  /* Ausnahme, von §6 wörtlich vorgegeben: das Monogramm im Namensschild ist
     15px. Es ist eine Marke, kein Text — deshalb zählt es nicht gegen die
     fünf Textgrößen aus §1.12. Nirgendwo sonst verwenden.                   */
  --fs-monogramm: 15px;

  --lh-eng:  1.15;
  --lh-text: 1.35;
  --spur-schild: .09em;   /* letter-spacing, nie negativ (§3)                 */

  /* --- 3. Raster (§5) ----------------------------------------------------- */
  --s4:  4px;
  --s8:  8px;
  --s12: 12px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;

  --zeile-x: var(--s16);  /* Zeileninnenabstand horizontal */
  --zeile-y: 14px;        /* Zeileninnenabstand vertikal   */

  /* --- 3. Radien (§5) — nichts über 6px, keine Pillen, keine Kreise ------- */
  --r-zeile: 4px;   /* Zeilen, Felder, Chips             */
  --r-taste: 6px;   /* freistehende Tasten, Sheets       */
  --r-null:  0;     /* Trennlinien, Leisten, Vollbreite  */

  /* --- 3. Höhen / Trefferflächen (§5) ------------------------------------- */
  --h-status:  28px;   /* Statusleiste, Tapfläche wird auf 44px erweitert */
  --h-zapf:    96px;   /* Zapftaste, mind. 88                             */
  --h-druck:   56px;   /* jede andere drückbare Fläche                    */
  --h-plaettchen: 60px;
  --h-namensschild: 44px;
  --h-tab:     64px;
  --h-storno:  56px;
  --h-ziffer:  64px;   /* Ziffernblocktaste                              */

  --kante:      3px;   /* Tastenkante, Typbalken, Aktivbalken            */
  --kante-fein: 1px;
  --kantenstreifen: 4px; /* roter Streifen an offenen Zeilen (§7.5)      */

  /* --- Zählwerk / Strichliste --------------------------------------------- */
  --zw-h:      52px;   /* Höhe einer Ziffernzelle bei 44px               */
  --zw-h-klein: 28px;  /* … bei 22px                                     */
  --strich-b:  3px;    /* Strichbreite (§7.4)                            */
  --strich-h:  22px;
  --strich-lueck: 4px;

  /* --- 4. Bewegung (§9) — die Tabelle, eins zu eins ----------------------- */
  --t-taste-ein:   40ms;   --e-linear:     linear;
  --t-taste-aus:   90ms;   --e-taste:      cubic-bezier(.2,.7,.3,1);
  --t-ziffer:     220ms;   --e-ziffer:     cubic-bezier(.35,0,.15,1);
  --t-ziffer-versatz: 25ms;
  --t-strich:     160ms;   --e-strich:     cubic-bezier(.2,.8,.2,1);
  --t-fuellen:    140ms;   /* Hohlstrich füllt sich                      */
  --t-sheet-ein:  260ms;   --e-sheet-ein:  cubic-bezier(.32,.72,0,1);
  --t-sheet-aus:  200ms;   --e-sheet-aus:  cubic-bezier(.4,0,1,1);
  --t-backdrop:   180ms;
  --t-register:   120ms;   /* Registerwechsel: opacity .6 -> 1           */
  --t-tab:        180ms;   --e-tab:        cubic-bezier(.4,0,.2,1);
  --t-storno-ein: 180ms;
  --t-storno-aus: 140ms;
  --t-halten:     700ms;   /* die eine Haltedauer (§1.9)                 */
  --t-halten-ab:  120ms;
  --t-kante-weg:  380ms;   /* Kantenstreifen läuft leer                  */
  --t-kante-staffel: 20ms;
  --t-beben:      240ms;
  --t-wisch:      160ms;
  --e-restzeit:   linear;  /* wird bei reduced-motion zu steps(20)       */
}

/* ==========================================================================
   2. Zuweisung
   .thema-tag / .thema-nacht setzen ein Thema auf einem Teilbaum fest
   (Styleguide, QR-Schild). Sie gewinnen immer gegen die Wurzel.
   ========================================================================== */

:root,
.thema-tag {
  color-scheme: light;
  --bg:        var(--tag-bg);
  --panel:     var(--tag-panel);
  --key:       var(--tag-key);
  --key-down:  var(--tag-key-down);
  --ink:       var(--tag-ink);
  --ink-muted: var(--tag-ink-muted);
  --rule:      var(--tag-rule);
  --rule-hard: var(--tag-rule-hard);
  --signal:    var(--tag-signal);
  --signal-ink:var(--tag-signal-ink);
  --gruen:     var(--tag-gruen);
  --rot:       var(--tag-rot);
  --gelb:      var(--tag-gelb);
  --gelb-ink:  var(--tag-gelb-ink);
  --blau:      var(--tag-blau);
  --auf-farbe: var(--tag-auf-farbe);
  --gruen-flaeche:  var(--tag-gruen-flaeche);
  --rot-flaeche:    var(--tag-rot-flaeche);
  --signal-flaeche: var(--tag-signal-flaeche);
  --gelb-flaeche:   var(--tag-gelb-flaeche);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:        var(--nacht-bg);
    --panel:     var(--nacht-panel);
    --key:       var(--nacht-key);
    --key-down:  var(--nacht-key-down);
    --ink:       var(--nacht-ink);
    --ink-muted: var(--nacht-ink-muted);
    --rule:      var(--nacht-rule);
    --rule-hard: var(--nacht-rule-hard);
    --signal:    var(--nacht-signal);
    --signal-ink:var(--nacht-signal-ink);
    --gruen:     var(--nacht-gruen);
    --rot:       var(--nacht-rot);
    --gelb:      var(--nacht-gelb);
    --gelb-ink:  var(--nacht-gelb-ink);
    --blau:      var(--nacht-blau);
    --auf-farbe: var(--nacht-auf-farbe);
    --gruen-flaeche:  var(--nacht-gruen-flaeche);
    --rot-flaeche:    var(--nacht-rot-flaeche);
    --signal-flaeche: var(--nacht-signal-flaeche);
    --gelb-flaeche:   var(--nacht-gelb-flaeche);
  }
}

:root[data-theme="dark"],
.thema-nacht {
  color-scheme: dark;
  --bg:        var(--nacht-bg);
  --panel:     var(--nacht-panel);
  --key:       var(--nacht-key);
  --key-down:  var(--nacht-key-down);
  --ink:       var(--nacht-ink);
  --ink-muted: var(--nacht-ink-muted);
  --rule:      var(--nacht-rule);
  --rule-hard: var(--nacht-rule-hard);
  --signal:    var(--nacht-signal);
  --signal-ink:var(--nacht-signal-ink);
  --gruen:     var(--nacht-gruen);
  --rot:       var(--nacht-rot);
  --gelb:      var(--nacht-gelb);
  --gelb-ink:  var(--nacht-gelb-ink);
  --blau:      var(--nacht-blau);
  --auf-farbe: var(--nacht-auf-farbe);
  --gruen-flaeche:  var(--nacht-gruen-flaeche);
  --rot-flaeche:    var(--nacht-rot-flaeche);
  --signal-flaeche: var(--nacht-signal-flaeche);
  --gelb-flaeche:   var(--nacht-gelb-flaeche);
}

.thema-tag,
.thema-nacht {
  background: var(--bg);
  color: var(--ink);
}

/* ==========================================================================
   Bewegungsarm (§9). Alle transform-Transitionen auf 0.
   Haptik bleibt unverändert — sie ist Rückmeldung, keine Animation.
   Fortschrittsanzeigen (Restzeit, Halten) bleiben, springen aber in
   5-%-Schritten statt zu gleiten.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-taste-ein: 0ms;
    --t-taste-aus: 0ms;
    --t-ziffer: 0ms;
    --t-ziffer-versatz: 0ms;
    --t-strich: 0ms;
    --t-fuellen: 0ms;
    --t-sheet-ein: 100ms;
    --t-sheet-aus: 100ms;
    --t-backdrop: 100ms;
    --t-tab: 0ms;
    --t-storno-ein: 0ms;
    --t-storno-aus: 0ms;
    --t-kante-weg: 0ms;
    --t-kante-staffel: 0ms;
    --t-beben: 0ms;
    --t-wisch: 0ms;
    --e-restzeit: steps(20, end);
  }
}