/* ============================================================================
   KONTORWAND — Farb-, Typo- und Maß-Token für b2b.xani-shop.de
   ----------------------------------------------------------------------------
   Dies ist die EINZIGE Datei mit Hex-Literalen. Prüfung vor jedem Deploy:
     grep -nE '#[0-9a-fA-F]{3,8}' public/css/*.css | grep -v tokens.css   → leer

   Jede Farbrolle ist ein PAAR: Fläche + zugehöriger Vordergrund. Eine
   Textfarbe ohne ihre Fläche zu setzen, ist der Mechanismus von FEHLER-260
   (dunkle Schrift auf dunkler Fläche) und hier verboten.

   Alle Klammerwerte sind mit der WCAG-2.1-Formel gerechnet
   (Prüfskript: scratchpad/contrast-kontorwand.mjs, Schwellen 4.5 Text / 3.0
   Bedienelement-Rahmen und Fokusring). Stand: alle 202 Paare bestanden.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ── Flächen (hell) ─────────────────────────────────────────────────────── */
  --flaeche-seite:   #EFEBE3;  /* warmes Packpapier, Seitengrund */
  --flaeche:         #FFFFFF;  /* Tabellenblatt, Karte, Bildbühne, Dialog */
  --flaeche-zebra:   #F7F4EE;  /* gerade Tabellenzeilen */
  --flaeche-gesenkt: #E3DED3;  /* Tabellenkopf, Filterspalte, Summenzeile */

  /* ── Schrift (nur zusammen mit einer der vier Flächen oben) ─────────────── */
  --schrift:         #1A1712;  /* 15.03 Seite · 17.87 Fläche · 16.28 Zebra · 13.32 Gesenkt */
  --schrift-leise:   #5C564B;  /*  6.12       ·  7.27        ·  6.62       ·  5.42 */

  /* ── Linien ─────────────────────────────────────────────────────────────── */
  --linie:           #D8D2C5;  /* 1.51 auf Fläche — REIN DEKORATIV, nie einziger Rahmen eines Bedienelements */
  --linie-stark:     #8B8375;  /* 3.75 Fläche · 3.15 Seite · 3.42 Zebra · 2.80 Gesenkt (dort NICHT als Rahmen) */
  --linie-feld:      #7A7264;  /* Rahmen von Eingabefeldern/Steppern: 4.75 Fläche · 4.00 Seite · 3.54 Gesenkt
                                  ABWEICHUNG zur Spezifikation: --linie-stark erreicht auf --flaeche-gesenkt
                                  nur 2.80 und verfehlt damit WCAG 1.4.11. Felder in Filterspalte und
                                  Werkzeugleiste liegen genau dort. */

  /* ── Aktion — die einzige Knopffarbe ────────────────────────────────────── */
  --aktion:          #1F1C15;  /* Tinte, 14.30 auf Seite (Flächenkontrast) */
  --aktion-schrift:  #FBF9F4;  /* auf --aktion: 16.16 */
  --aktion-hover:    #35301F;  /* --aktion-schrift darauf: 12.52 */
  --aktion-leise:    #E6E1D6;  /* Sekundärknopf-Fläche, --schrift darauf: 13.70 */

  /* ── Signal — Preisvorteil, Aktion, aktive Staffelmarke, Treffer ────────── */
  --signal:          #B33A0C;  /* 5.01 Seite · 5.95 Fläche · 5.42 Zebra */
  --signal-schrift:  #FFF6F0;  /* auf --signal: 5.58 */

  /* ── Staffelband — markenkonstant in BEIDEN Modi gelb mit dunkler Schrift ─ */
  --band:            #F2B705;
  --band-schrift:    #1A1712;  /* auf --band: 9.83 */

  /* ── Fokus — ausschließlich Fokusring, sonst nirgends ───────────────────── */
  --fokus:           #1B44C8;  /* 6.52 Seite · 7.76 Fläche · 5.78 Gesenkt */

  /* ── Status ─────────────────────────────────────────────────────────────── */
  --ok:              #186B3F;  /* 5.50 Seite · 6.53 Fläche */
  --ok-flaeche:      #DDEDE3;  /* --ok darauf: 5.38 */
  --warn:            #7E4E00;  /* 5.93 · 7.05 */
  --warn-flaeche:    #F6E9D2;  /* --warn darauf: 5.88 */
  --fehler:          #A3210F;  /* 6.35 · 7.55 */
  --fehler-flaeche:  #F8DFDA;  /* --fehler darauf: 5.95 */

  /* ── Warengruppen-Volltöne (§2.3) ───────────────────────────────────────────
     Verwendung AUSSCHLIESSLICH an Ware: Typo-Warenkarte, Oberkante der
     Fotobühne, linke Zeilenkante, Warengruppenchip, Kategoriekopfband,
     Farbfeld im Beleg. Nie an Knöpfen, Feldern, Links, Fokusringen.
     Hell = Vollton mit --papier darauf. Werte je Ton:
       (a) --papier auf Vollton · (b) Vollton als Text auf --flaeche-seite
       (c) Vollton als Text auf --flaeche                                     */
  --papier:          #FBF9F4;
  --tinte:           #141310;

  --wg-geschirr-servieren:      #1A56A4;  /* a 6.86 · b 6.07 · c 7.21 */
  --wg-kueche-kochen:           #B02018;  /* a 6.51 · b 5.76 · c 6.85 */
  --wg-suesswaren-snacks:       #C2156E;  /* a 5.50 · b 4.87 · c 5.79 */
  --wg-haushalt-reinigung:      #08736A;  /* a 5.44 · b 4.81 · c 5.72 */
  --wg-aufbewahrung-ordnung:    #3A616E;  /* a 6.41 · b 5.67 · c 6.74 */
  --wg-bad-koerperpflege:       #66459E;  /* a 6.86 · b 6.07 · c 7.22 */
  --wg-heimtextil-deko:         #A02A60;  /* a 6.66 · b 5.90 · c 7.01 */
  --wg-buero-schreibwaren:      #4C5810;  /* a 7.36 · b 6.52 · c 7.75 */
  --wg-elektro-zubehoer:        #2A3945;  /* a 11.28 · b 9.98 · c 11.87 */
  --wg-schuhe:                  #78471F;  /* a 7.34 · b 6.49 · c 7.72 */
  --wg-grill-outdoor:           #8C2809;  /* a 8.24 · b 7.29 · c 8.67 */
  --wg-bekleidung-accessoires:  #333F99;  /* a 8.63 · b 7.64 · c 9.08 */
  --wg-sonstiges:               #524C43;  /* a 8.07 · b 7.14 · c 8.49 */
  --wg-taschen-koffer:          #556727;  /* a 5.95 · b 5.26 · c 6.26 */
  --wg-spielwaren-freizeit:     #8A5B00;  /* a 5.58 · b 4.94 · c 5.87 */
  --wg-getraenke:               #0C7439;  /* a 5.59 · b 4.94 · c 5.88 */

  --wg-geschirr-servieren-schrift:     var(--papier);
  --wg-kueche-kochen-schrift:          var(--papier);
  --wg-suesswaren-snacks-schrift:      var(--papier);
  --wg-haushalt-reinigung-schrift:     var(--papier);
  --wg-aufbewahrung-ordnung-schrift:   var(--papier);
  --wg-bad-koerperpflege-schrift:      var(--papier);
  --wg-heimtextil-deko-schrift:        var(--papier);
  --wg-buero-schreibwaren-schrift:     var(--papier);
  --wg-elektro-zubehoer-schrift:       var(--papier);
  --wg-schuhe-schrift:                 var(--papier);
  --wg-grill-outdoor-schrift:          var(--papier);
  --wg-bekleidung-accessoires-schrift: var(--papier);
  --wg-sonstiges-schrift:              var(--papier);
  --wg-taschen-koffer-schrift:         var(--papier);
  --wg-spielwaren-freizeit-schrift:    var(--papier);
  --wg-getraenke-schrift:              var(--papier);

  /* Vorgabe für Bauteile ohne Warengruppe — nie eine Fläche ohne Vordergrund. */
  --wg: var(--wg-sonstiges);
  --wg-schrift: var(--papier);

  /* ── Schriftfamilien (§3.1) ─────────────────────────────────────────────── */
  --schrift-display: "Big Shoulders", "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  --schrift-text:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-zahl:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Größenskala (§3.2) — Wurzelgröße bleibt immer 16 px ────────────────── */
  --t-mikro:       0.6875rem;  /* 11 px, Versalien, Etiketten */
  --t-klein:       0.75rem;    /* 12 px */
  --t-code:        0.8125rem;  /* 13 px, SKU/EAN */
  --t-zelle:       0.875rem;   /* 14 px, Tabellenzelle */
  --t-basis:       1rem;       /* 16 px, Fließtext UND alle Eingabefelder */
  --t-staffel:     1rem;       /* 16 px, Staffelpreis */
  --t-preis-zeile: 1.25rem;    /* 20 px */
  --t-name-kachel: 1.0625rem;  /* 17 px */
  --t-titel-s:     1.375rem;   /* 22 px */
  --t-titel-m:     1.75rem;    /* 28 px */
  --t-preis-seite: 2.25rem;    /* 36 px */
  --t-titel-l:     clamp(1.75rem, 1.2rem + 2.4vw, 2.375rem);
  --t-karte-1:     2.125rem;   /* Name ≤ 18 Zeichen */
  --t-karte-2:     1.75rem;    /* 19–34 */
  --t-karte-3:     1.4rem;     /* 35–56 */
  --t-karte-4:     1.15rem;    /* > 56 */
  --t-karte-gross: clamp(2rem, 5vw, 3.25rem);

  /* ── Abstände und Radien (§4) ───────────────────────────────────────────── */
  --r0: 0; --r1: 2px; --r2: 4px; --r-voll: 999px;
  --a1: 4px;  --a2: 8px;  --a3: 12px; --a4: 16px; --a5: 20px;
  --a6: 24px; --a7: 32px; --a8: 40px; --a9: 56px; --a10: 80px;

  --rand: var(--a4);          /* Seitenrand, wächst über Bruchstellen */
  --inhalt-breite: 100%;
  --schatten-overlay: 0 8px 24px rgb(0 0 0 / .18);   /* die EINZIGE Schattenebene */

  /* ── Druck (§6.5): schwarz auf weiß, keine Flächen, Haarlinien ──────────── */
  --druck-flaeche: #FFFFFF;
  --druck-schrift: #000000;  /* 21.00 auf --druck-flaeche */
  --druck-linie:   #767676;  /* 4.54 auf --druck-flaeche */

  /* ── Bewegung (§10) ─────────────────────────────────────────────────────── */
  --zeit-hover: 90ms;
  --zeit-staffel: 110ms;
  --zeit-schublade: 160ms;
  --kurve-schublade: cubic-bezier(.2, .8, .25, 1);
}

/* ============================================================================
   Dunkelmodus. Beide Richtungen müssen gegen das System gewinnen können:
   data-theme="dark" erzwingt dunkel, data-theme="light" erzwingt hell.
   Die hellen Warengruppen-Volltöne werden hier NICHT wiederverwendet (§11.22).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --flaeche-seite:   #141310;
    --flaeche:         #1D1B16;
    --flaeche-zebra:   #24211B;
    --flaeche-gesenkt: #0E0D0A;

    --schrift:         #EFEBE2;  /* 15.62 Seite · 14.46 Fläche · 13.49 Zebra · 16.33 Gesenkt */
    --schrift-leise:   #ABA396;  /*  7.44       ·  6.89        ·  6.43       ·  7.78 */

    --linie:           #37332B;  /* 1.37 — dekorativ */
    --linie-stark:     #797264;  /* 3.61 Fläche · 3.90 Seite · 3.37 Zebra · 4.08 Gesenkt */
    --linie-feld:      #797264;  /* im Dunkelmodus trägt --linie-stark auch auf Gesenkt (4.08) */

    --aktion:          #EFEBE2;  /* Umkehrstempel: heller Knopf, dunkle Schrift */
    --aktion-schrift:  #141310;  /* auf --aktion: 15.62 */
    --aktion-hover:    #FFFFFF;  /* --aktion-schrift darauf: 18.58 */
    --aktion-leise:    #2C2822;  /* --schrift darauf: 12.31 */

    --signal:          #FF8347;  /* 7.60 Seite · 7.04 Fläche · 6.56 Zebra */
    --signal-schrift:  #1A0C04;  /* auf --signal: 7.82 */

    --band:            #F2B705;  /* unverändert */
    --band-schrift:    #141310;  /* auf --band: 10.22 */

    --fokus:           #93B4FF;  /* 9.04 Seite · 8.37 Fläche · 9.45 Gesenkt */

    --ok:              #5FC98A;  /* 9.03 Seite · 8.36 Fläche */
    --ok-flaeche:      #12281B;  /* --ok darauf: 7.59 */
    --warn:            #E8B54A;  /* 9.85 · 9.13 */
    --warn-flaeche:    #2C2411;  /* --warn darauf: 8.15 */
    --fehler:          #FF8B7C;  /* 8.17 · 7.57 */
    --fehler-flaeche:  #2E1512;  /* --fehler darauf: 7.50 */

    /* Aufgehellte Zwillinge. Werte je Ton:
       (a) --tinte auf Zwilling · (b) Zwilling als Text auf --flaeche-seite
       (c) Zwilling als Text auf --flaeche */
    --wg-geschirr-servieren:      #7FB2F0;  /* a 8.43 · b 8.43 · c 7.81 */
    --wg-kueche-kochen:           #FF8377;  /* a 7.75 · b 7.75 · c 7.18 */
    --wg-suesswaren-snacks:       #FF6FAE;  /* a 7.20 · b 7.20 · c 6.67 */
    --wg-haushalt-reinigung:      #2FC9B0;  /* a 8.94 · b 8.94 · c 8.28 */
    --wg-aufbewahrung-ordnung:    #93B7C4;  /* a 8.68 · b 8.68 · c 8.04 */
    --wg-bad-koerperpflege:       #B49BFF;  /* a 8.03 · b 8.03 · c 7.43 */
    --wg-heimtextil-deko:         #F07BB0;  /* a 7.22 · b 7.22 · c 6.69 */
    --wg-buero-schreibwaren:      #C6D264;  /* a 11.33 · b 11.33 · c 10.49 */
    --wg-elektro-zubehoer:        #A3BACA;  /* a 9.23 · b 9.23 · c 8.55 */
    --wg-schuhe:                  #D89A63;  /* a 7.72 · b 7.72 · c 7.15 */
    --wg-grill-outdoor:           #FF9463;  /* a 8.55 · b 8.55 · c 7.92 */
    --wg-bekleidung-accessoires:  #94A4FF;  /* a 7.97 · b 7.97 · c 7.38 */
    --wg-sonstiges:               #B3AB9F;  /* a 8.18 · b 8.18 · c 7.57 */
    --wg-taschen-koffer:          #AFC468;  /* a 9.66 · b 9.66 · c 8.95 */
    --wg-spielwaren-freizeit:     #F5BE33;  /* a 10.88 · b 10.88 · c 10.07 */
    --wg-getraenke:               #46C97A;  /* a 8.75 · b 8.75 · c 8.11 */

    --wg-geschirr-servieren-schrift:     var(--tinte);
    --wg-kueche-kochen-schrift:          var(--tinte);
    --wg-suesswaren-snacks-schrift:      var(--tinte);
    --wg-haushalt-reinigung-schrift:     var(--tinte);
    --wg-aufbewahrung-ordnung-schrift:   var(--tinte);
    --wg-bad-koerperpflege-schrift:      var(--tinte);
    --wg-heimtextil-deko-schrift:        var(--tinte);
    --wg-buero-schreibwaren-schrift:     var(--tinte);
    --wg-elektro-zubehoer-schrift:       var(--tinte);
    --wg-schuhe-schrift:                 var(--tinte);
    --wg-grill-outdoor-schrift:          var(--tinte);
    --wg-bekleidung-accessoires-schrift: var(--tinte);
    --wg-sonstiges-schrift:              var(--tinte);
    --wg-taschen-koffer-schrift:         var(--tinte);
    --wg-spielwaren-freizeit-schrift:    var(--tinte);
    --wg-getraenke-schrift:              var(--tinte);

    --wg: var(--wg-sonstiges);
    --wg-schrift: var(--tinte);

    --schatten-overlay: 0 8px 24px rgb(0 0 0 / .55);
  }
}

/* Erzwungener Dunkelmodus — identischer Block, damit der Schalter gegen das
   System gewinnt. Kommentare stehen oben; Werte sind zeichengleich. */
:root[data-theme="dark"] {
  --flaeche-seite:   #141310;
  --flaeche:         #1D1B16;
  --flaeche-zebra:   #24211B;
  --flaeche-gesenkt: #0E0D0A;
  --schrift:         #EFEBE2;
  --schrift-leise:   #ABA396;
  --linie:           #37332B;
  --linie-stark:     #797264;
  --linie-feld:      #797264;
  --aktion:          #EFEBE2;
  --aktion-schrift:  #141310;
  --aktion-hover:    #FFFFFF;
  --aktion-leise:    #2C2822;
  --signal:          #FF8347;
  --signal-schrift:  #1A0C04;
  --band:            #F2B705;
  --band-schrift:    #141310;
  --fokus:           #93B4FF;
  --ok:              #5FC98A;
  --ok-flaeche:      #12281B;
  --warn:            #E8B54A;
  --warn-flaeche:    #2C2411;
  --fehler:          #FF8B7C;
  --fehler-flaeche:  #2E1512;

  --wg-geschirr-servieren:      #7FB2F0;
  --wg-kueche-kochen:           #FF8377;
  --wg-suesswaren-snacks:       #FF6FAE;
  --wg-haushalt-reinigung:      #2FC9B0;
  --wg-aufbewahrung-ordnung:    #93B7C4;
  --wg-bad-koerperpflege:       #B49BFF;
  --wg-heimtextil-deko:         #F07BB0;
  --wg-buero-schreibwaren:      #C6D264;
  --wg-elektro-zubehoer:        #A3BACA;
  --wg-schuhe:                  #D89A63;
  --wg-grill-outdoor:           #FF9463;
  --wg-bekleidung-accessoires:  #94A4FF;
  --wg-sonstiges:               #B3AB9F;
  --wg-taschen-koffer:          #AFC468;
  --wg-spielwaren-freizeit:     #F5BE33;
  --wg-getraenke:               #46C97A;

  --wg-geschirr-servieren-schrift:     var(--tinte);
  --wg-kueche-kochen-schrift:          var(--tinte);
  --wg-suesswaren-snacks-schrift:      var(--tinte);
  --wg-haushalt-reinigung-schrift:     var(--tinte);
  --wg-aufbewahrung-ordnung-schrift:   var(--tinte);
  --wg-bad-koerperpflege-schrift:      var(--tinte);
  --wg-heimtextil-deko-schrift:        var(--tinte);
  --wg-buero-schreibwaren-schrift:     var(--tinte);
  --wg-elektro-zubehoer-schrift:       var(--tinte);
  --wg-schuhe-schrift:                 var(--tinte);
  --wg-grill-outdoor-schrift:          var(--tinte);
  --wg-bekleidung-accessoires-schrift: var(--tinte);
  --wg-sonstiges-schrift:              var(--tinte);
  --wg-taschen-koffer-schrift:         var(--tinte);
  --wg-spielwaren-freizeit-schrift:    var(--tinte);
  --wg-getraenke-schrift:              var(--tinte);

  --wg: var(--wg-sonstiges);
  --wg-schrift: var(--tinte);

  --schatten-overlay: 0 8px 24px rgb(0 0 0 / .55);
}