/* farben.css — das Farbsystem der App.
 *
 * Grundregel: Farbe ist Information, nicht Deko. Es gibt vier getrennte Rollen,
 * und jede hat ihren eigenen Platz auf dem Bildschirm, damit nichts kollidiert:
 *
 *   1. BEREICH    -> nur links in der Navigation + dünner Streifen oben am Inhalt
 *   2. PREIS      -> nur auf Zahlen und Preis-Abzeichen
 *   3. KATEGORIE  -> nur als kleiner Punkt/Chip vor einem Produkt
 *   4. KETTE      -> nur als schmaler Balken vor einem Ladennamen
 *
 * Ausserdem: Farbe steht NIE allein. Jede Preisfarbe hat zusätzlich ein Zeichen
 * (↓ ↑ −35 % ✓), damit die App auch für die ~8 % Rot-Grün-Sehschwachen lesbar bleibt.
 */

:root {
  /* ---------- Grundflächen ----------
   * Bewusst heller als ein klassisches Nachtdesign: fast schwarze Flächen
   * lassen jede Farbe darauf grell wirken und die App wirkt leer. Ein Ton
   * heller, und die Farben können atmen.
   * Die Flächen haben zudem einen leichten Blaustich statt reinem Grau —
   * neutrales Grau wirkt neben bunten Akzenten schmutzig. */
  --bg:            #191926;
  --panel:         #22222f;
  --panel-hoch:    #2c2c3c;   /* hervorgehobene Karte */
  --linie:         #3a3a4d;
  --text:          #f4f5f9;
  --text-leise:    #b4b6c6;
  --text-still:    #8286a0;

  /* ---------- 1. BEREICHE (Navigation links) ---------- */
  --b-start:       #8b9aff;   /* Übersicht      indigo  */
  --b-liste:       #4fb3ff;   /* Einkaufsliste  blau    */
  --b-bons:        #b48cff;   /* Kassenbons     violett */
  --b-lieblinge:   #ff6f9c;   /* Favoriten      pink    */
  --b-angebote:    #2fdcf0;   /* Angebote       cyan    */
  --b-laeden:      #ff9a52;   /* Läden & Route  orange  */
  --b-liefern:     #cb96ff;   /* Lieferdienste  lila    */
  --b-haushalt:    #f5c518;   /* Haushalt       gelb    */
  --b-einstell:    #a0a3ba;   /* Einstellungen  grau    */

  /* ---------- 2. PREIS-SIGNALE (nur auf Zahlen) ---------- */
  --p-bestpreis:   #34d97a;   /* ✓ so günstig wie noch nie      */
  --p-guenstig:    #9df3bd;   /* ↓ günstiger als dein Normalpreis */
  --p-normal:      #b4b6c6;   /*   unauffällig                   */
  --p-teuer:       #ff5a5a;   /* ↑ teurer als dein Normalpreis   */
  --p-endet:       #f59e0b;   /* ⏳ Angebot läuft bald aus        */
  --p-kommt:       #38bdf8;   /* 📅 startet erst („ab Montag")    */

  /* ---------- 3. WARENKATEGORIEN (Punkt vor dem Produkt) ---------- */
  --k-obst:        #4ade80;
  --k-gemuese:     #16a34a;
  --k-fleisch:     #f87171;
  --k-fisch:       #38bdf8;
  --k-molkerei:    #93c5fd;
  --k-brot:        #d4a373;
  --k-trocken:     #eab308;   /* Nudeln, Reis, Mehl */
  --k-tiefkuehl:   #67e8f9;
  --k-getraenke:   #60a5fa;
  --k-suess:       #f472b6;
  --k-drogerie:    #c084fc;
  --k-baby:        #fda4af;
  --k-haushalt:    #a3a3a3;
  --k-tier:        #fb923c;

  /* ---------- 4. LADENKETTEN (Balken vor dem Namen) ---------- */
  /* Eigene Farbtöne zur Wiedererkennung – keine fremden Logos. */
  --kette-aldi:    #2e6fd9;
  --kette-lidl:    #f5c518;
  --kette-rewe:    #e2231a;
  --kette-edeka:   #f7c600;
  --kette-penny:   #d9241f;
  --kette-netto:   #ffd400;
  --kette-kaufland:#e2001a;
  --kette-dm:      #0a9cd8;
  --kette-rossmann:#c8102e;
  --kette-online:  #a78bfa;   /* Lieferdienste allgemein */

  /* ---------- Zustände ---------- */
  --z-neu:         #38bdf8;   /* Bon hochgeladen, noch nicht gelesen */
  --z-laeuft:      #f59e0b;   /* wird gerade ausgelesen */
  --z-fertig:      #22c55e;   /* geprüft */
  --z-fehler:      #ef4444;

  --radius:        14px;
  --radius-klein:  9px;
}

/* Helles Design für alle, die es lieber hell mögen. Gleiche Bedeutungen,
   nur abgedunkelte Töne, damit sie auf Weiss noch Kontrast haben. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg:         #f6f6f9;
    --panel:      #ffffff;
    --panel-hoch: #f0f0f5;
    --linie:      #e2e2ea;
    --text:       #1a1a22;
    --text-leise: #5a5a6e;
    --text-still: #8a8a9c;

    --p-bestpreis: #15803d;
    --p-guenstig:  #16a34a;
    --p-teuer:     #dc2626;
    --p-endet:     #b45309;
    --p-kommt:     #0369a1;
  }
}

:root[data-theme='light'] {
  --bg:         #f6f6f9;
  --panel:      #ffffff;
  --panel-hoch: #f0f0f5;
  --linie:      #e2e2ea;
  --text:       #1a1a22;
  --text-leise: #5a5a6e;
  --text-still: #8a8a9c;
}

/* ══════════════════════════════════════════════════════ Farbwelten
 *
 * Der Grundton der Flächen, in mehreren dunklen Varianten. Sie ändern NUR
 * Hintergrund, Panel, Linien und den Textton — die Bedeutungsfarben
 * (Preis, Warengruppe, Kette, Bereich) bleiben in jeder Welt gleich.
 *
 * Das ist der ganze Trick: Wenn Grün „Bestpreis" heißt, muss es das überall
 * heißen. Sonst müsste man die App in jeder Welt neu lernen.
 *
 * Alle Töne sind bewusst entsättigt gehalten. Ein kräftig blauer Hintergrund
 * sieht auf dem ersten Blick edel aus und macht nach zehn Minuten die Augen
 * müde — er konkurriert mit den Farben, die etwas bedeuten.
 */

/* Onyx — der Grundton. Blaustich, damit Grau neben bunten Akzenten nicht
   schmutzig wirkt. */
:root[data-welt='onyx'] {
  --bg: #191926; --panel: #22222f; --panel-hoch: #2c2c3c; --linie: #3a3a4d;
  --text: #f4f5f9; --text-leise: #b4b6c6; --text-still: #8286a0;
}

/* Saphir — tiefes Blau. Ruhig, technisch, gut für lange Sitzungen. */
:root[data-welt='saphir'] {
  --bg: #101828; --panel: #182338; --panel-hoch: #212f49; --linie: #2e4160;
  --text: #eff4fb; --text-leise: #a8bad4; --text-still: #7389a8;
}

/* Smaragd — dunkles Grün. Achtung: Grün bedeutet hier „Bestpreis", deshalb
   ist der Grundton stark entsättigt und deutlich dunkler als das Signalgrün. */
:root[data-welt='smaragd'] {
  --bg: #0f1c19; --panel: #172925; --panel-hoch: #1f3731; --linie: #2b4a42;
  --text: #eef7f4; --text-leise: #a6c6bd; --text-still: #6f9489;
}

/* Amethyst — Violett. Warm und ungewöhnlich, ohne aufdringlich zu sein. */
:root[data-welt='amethyst'] {
  --bg: #171327; --panel: #221c38; --panel-hoch: #2d2547; --linie: #3f3560;
  --text: #f4f0fb; --text-leise: #bdb2d6; --text-still: #8d81ab;
}

/* Rubin — dunkles Weinrot. Rot bedeutet „teurer" — der Grundton ist deshalb
   sehr tief und fast bräunlich, damit er dem Preissignal nicht ins Gehege
   kommt. */
:root[data-welt='rubin'] {
  --bg: #1e1218; --panel: #2b1a23; --panel-hoch: #38222e; --linie: #4c2f3c;
  --text: #fbeff4; --text-leise: #d3b0bf; --text-still: #a68292;
}

/* Bernstein — warmes Braungold. Der freundlichste dunkle Ton, gut abends. */
:root[data-welt='bernstein'] {
  --bg: #1c1710; --panel: #292118; --panel-hoch: #362c20; --linie: #4a3d2c;
  --text: #faf4e9; --text-leise: #cfbfa4; --text-still: #a1907a;
}

/* Mitternacht — fast schwarz, höchster Kontrast. Für helle Umgebungen und
   für OLED-Bildschirme, die dabei tatsächlich Strom sparen. */
:root[data-welt='mitternacht'] {
  --bg: #0a0a0e; --panel: #131318; --panel-hoch: #1c1c24; --linie: #2a2a35;
  --text: #ffffff; --text-leise: #b9b9c6; --text-still: #85859a;
}

/* Im hellen Design bleibt die Farbwelt außen vor — ein heller Hintergrund mit
   Edelsteinstich wird schnell unlesbar. Wer hell wählt, bekommt hell. */
:root[data-theme='light'] {
  --bg: #f6f6f9 !important; --panel: #ffffff !important;
  --panel-hoch: #f0f0f5 !important; --linie: #e2e2ea !important;
  --text: #1a1a22 !important; --text-leise: #5a5a6e !important;
  --text-still: #8a8a9c !important;
}