/* ================================================================
   theme.css — das Farbsystem. Die EINZIGE Stelle mit Farbwerten.
   ================================================================
   Markenwelt: Cream + Forest Green + Sage, dazu gezielt Coral und
   Apricot. Das Pink gehört dem Begleiter — es ist der emotionale
   Kontrast in einer sonst ruhigen Oberfläche und wird deshalb nicht
   zur Knopf- oder Navigationsfarbe.

   REGELN
   1. app.css und die Ansichten benutzen nur die Rollen unten, nie
      einen Hex- oder rgba-Wert. Wer eine neue Farbe braucht, legt
      hier eine Rolle an — mit hellem UND dunklem Wert.
   2. Eine Farbe hat überall dieselbe Aufgabe:
        Forest Green   Hauptaktion, aktive Navigation, Markenflächen
        Sage           ruhige Karten, sekundäre Flächen
        Erfolgsgrün    Erledigtes, im Vorrat, gespart — heller als Forest
        Coral          bald ablaufend, Aufmerksamkeit, zeitkritisch
        Rot            NUR wirklich Kritisches: Verbrauchsdatum,
                       Kühlkette, Unwiderrufliches
        Apricot        Beispieldaten, Schätzungen, Belohnung
        Blau/Violett   Hinweis ohne Dringlichkeit / Erreichtes
        Pink           der Begleiter, seine Momente und das Level
   3. Jede Statusfarbe hat drei Stufen: die Farbe selbst (Flächen,
      Punkte, Balken), `-soft` (getönter Grund) und `-text` (Schrift,
      auch auf dem getönten Grund). Die Farbe selbst ist als Schrift
      oft zu hell — deshalb die eigene Schriftstufe.
   4. Zustände entstehen aus Abstufungen, nicht aus neuen Farben:
        gedrückt     --action-primary-pressed bzw. --fill-subtle darüber
        ausgewählt   --brand-soft (Grund) + --text-brand (Schrift)
        deaktiviert  --action-disabled-bg + --action-disabled-text
        Hover        dieselbe Fläche, 4 % dunkler (filter in app.css)
   5. Jede Schriftpaarung ist nachgerechnet (test/contrast.js, WCAG
      2.1 AA): Text ≥ 4,5:1, kleine Beschriftungen ≥ 3:1.

   DER DUNKLE MODUS ist keine umgedrehte Fassung des hellen. Er trennt
   bewusst mehr Ebenen, damit er nicht einfarbig grün wird: Grund,
   Karte und erhöhte Fläche in drei Tiefen, die Aktion in hellem Mint
   (klar abgesetzt von jeder Karte), die Heldenkarte in einem
   mittleren Grün, Schrift warm-weiß statt grün getönt, und Coral und
   Apricot als warme Gegengewichte.

   Er steht zweimal da — für die Systemeinstellung und für die feste
   Wahl „Dunkel". CSS kennt keinen Weg, eine Medienabfrage und einen
   Selektor in eine Regel zu fassen. Dass beide Blöcke gleich bleiben,
   prüft test/contrast.js.
   ================================================================ */

:root{
  color-scheme:light dark;

  /* ---- Grund ---- */
  --bg-primary:#F7F8F3;              /* warmes Cream, nie reines Weiß */
  --bg-secondary:#EDF2EC;            /* eingelassene Felder, Suchergebnisse */
  --bg-material:rgba(247,248,243,.94);   /* Kopfleiste, Ladenmodus, Sprechblase */
  --bg-scrim:rgba(13,31,25,.42);     /* hinter Blättern */
  --bg-scrim-strong:rgba(13,31,25,.62);  /* hinter der Meilenstein-Feier */

  /* ---- Flächen ---- */
  --surface-primary:#FFFFFF;         /* Karten und Listen */
  --brand-secondary:#E1EAE4;         /* Sage */
  --surface-secondary:var(--brand-secondary);  /* ruhige Karten: Begleiter */
  --surface-elevated:#FFFFFF;        /* Blätter, gewähltes Segment */
  --fill-subtle:rgba(23,59,45,.05);  /* Steuerelemente, gedrückt */
  --fill-strong:rgba(23,59,45,.10);  /* Spuren, deaktiviert */

  /* ---- Schrift ---- */
  --text-primary:#173B2D;
  --text-secondary:#526359;
  --text-muted:#5E6E65;              /* Beschriftungen, Zeitangaben, Winkel */
  --text-brand:#20694F;              /* Links, gewählte Antwort */
  --text-on-brand:#FFFFFF;
  --text-on-critical:#FFFFFF;
  --text-on-warm:#2E2106;

  /* ---- Marke und Aktion ---- */
  --brand-primary:#20694F;           /* Forest Green */
  --brand-soft:rgba(32,105,79,.09);  /* ausgewählt, Plus-Marke */
  --action-primary:#20694F;
  --action-primary-pressed:#185640;
  --action-secondary:#E4ECE7;
  --action-disabled-bg:var(--fill-strong);
  --action-disabled-text:var(--text-secondary);

  /* ---- Status ---- */
  --success:#3B9468;                 /* frisch, erledigt — heller als Forest */
  --success-soft:rgba(59,148,104,.13);
  --success-text:#1C6644;
  --warning:#F46F58;                 /* Coral: läuft bald ab */
  --warning-soft:rgba(244,111,88,.13);
  --warning-text:#B03E28;
  --critical:#C4311E;                /* nur wirklich Kritisches */
  --critical-soft:rgba(196,49,30,.11);
  --critical-text:#A92A19;
  --info:#4E7896;
  --info-soft:rgba(78,120,150,.13);
  --info-text:#355C79;

  /* ---- Akzente ---- */
  --accent-warm:#F2B45F;             /* Apricot */
  --accent-warm-soft:rgba(242,180,95,.24);
  --accent-warm-text:#8C5A07;
  --achievement:#7B61A8;
  --achievement-soft:rgba(123,97,168,.12);
  --achievement-text:#5F4591;
  --mascot-pink:#E88AAA;             /* aus dem Fell des Begleiters */
  --mascot-pink-soft:rgba(232,138,170,.18);
  --mascot-pink-track:#F3D3DE;
  --mascot-pink-text:#9E3358;
  --text-on-mascot:#5A1E34;

  /* ---- Linien ---- */
  --divider:rgba(23,59,45,.08);
  --border-subtle:rgba(23,59,45,.14);
  /* Eine Kante fuer Flaechen, die UEBER scrollendem Inhalt liegen.
     --border-subtle reicht dort im Hellen nicht: die Pille des
     Begleiters ist weiss auf einem fast weissen Grund (Kontrast 1,07),
     und der Text, den sie verdeckt, sieht abgeschnitten aus statt
     ueberdeckt. Im Dunkeln traegt die Flaeche sich selbst (1,27) --
     die Rolle gibt es trotzdem in beiden Themen, damit die Kante
     ueberall dieselbe Bedeutung hat. */
  --border-strong:rgba(23,59,45,.28);

  /* ---- Navigation ---- */
  --nav-bg:rgba(239,244,240,.94);
  --nav-active:#20694F;
  --nav-active-bg:rgba(32,105,79,.10);
  --nav-inactive:#5E6E65;

  /* ---- Marke „Beispieldaten" ---- */
  --badge-bg:#FAEED4;
  --badge-text:#8C5A07;

  /* ---- Heldenkarte „Dein nächster Einkauf" ---- */
  --hero-bg:#20694F;
  --hero-bg-2:#18523E;
  --hero-text:#FFFFFF;
  --hero-text-secondary:#D3E6DA;
  --hero-divider:rgba(255,255,255,.16);
  --hero-pressed:rgba(255,255,255,.06);
  --hero-action-bg:#F1F5EC;
  --hero-action-text:#20694F;

  /* ---- Bestätigung (Toast) ---- */
  --toast-bg:rgba(23,59,45,.96);
  --toast-text:#F3F6F1;
  --toast-icon-bg:#8DDEB5;
  --toast-icon-text:#0D1F19;
  --toast-action-bg:rgba(255,255,255,.14);
  --toast-action-bg-pressed:rgba(255,255,255,.26);

  /* ---- Steuerung ---- */
  --focus-ring:#20694F;
  --switch-knob:#FFFFFF;
  --shine:rgba(255,255,255,.85);     /* Lichtstreif über dem Meilenstein-Zeichen */

  /* ---- Tiefe ---- */
  --shadow-lift:0 4px 20px rgba(23,59,45,.035);
  --shadow-control:0 1px 3px rgba(23,59,45,.10),0 3px 8px -4px rgba(23,59,45,.16);
  --shadow-knob:0 2px 6px rgba(23,59,45,.22);
  --shadow-hero:0 12px 26px rgba(23,59,45,.12);
  --shadow-toast:0 12px 32px rgba(13,31,25,.30);
  --shadow-message-mascot:rgba(0,0,0,.18);
  --shadow-message-icon:0 2px 5px rgba(0,0,0,.22);
  --review-bubble-bg:rgba(255,255,255,.45);
  --shadow-party-card:0 28px 80px rgba(0,0,0,.32);

  /* ---- Die Küche des Begleiters (kitchen.js) ----
     Sage-Wand mit feinen Kacheln, eine warme Holz-Arbeitsplatte, ein
     Regal. Ruhig gehalten: die Farbe in der Küche kommt von der Figur
     und den Dingen im Regal, nicht von den Flächen. */
  --kitchen-wall:var(--brand-secondary);
  --kitchen-tile:rgba(23,59,45,.055);
  --kitchen-counter:#E4D3B6;
  --kitchen-counter-top:#F0E5D1;
  --kitchen-shelf:#D5BF9A;
  /* Die Sprechblase in der Küche ist mattiertes Glas: der Satz bleibt
     lesbar, und dahinter bleibt sichtbar, was in der Küche steht. */
  --kitchen-glass:rgba(255,255,255,.22);
  /* Milchglas: kaum Farbe, viel Unschärfe; hell hebt ein Hauch
     Aufhellung den Schleier, dunkel nicht — dort kostete sie Lesbarkeit. */
  --kitchen-frost:blur(18px) saturate(115%) brightness(1.05);
  --kitchen-glass-edge:rgba(255,255,255,.8);
  --shadow-bubble:0 6px 16px -8px rgba(23,59,45,.35);

  /* ---- Gamification: die fünf Stile der Küchen-Designs ----
     Je Stil ein Korpus- und ein Akzentton. Sie färben die Platzhalter
     der Module, solange die Designbilder fehlen, und die Kulisse (Wand,
     Boden). Die Morgenküche ist die Grundausstattung — ihre Wand ist
     deshalb die bisherige Sage-Wand. */
  --gami-morgen:#EBD8B6;
  --gami-morgen-2:#C98F5A;
  --gami-salbei:#B8CDAE;
  --gami-salbei-2:#C9A43A;
  --gami-nordic:#DCD3C4;
  --gami-nordic-2:#6F879A;
  --gami-midnight:#3A4663;
  --gami-midnight-2:#C9A45C;
  --gami-golden:#E8C46E;
  --gami-golden-2:#9E6B22;
  --gami-shade:rgba(23,59,45,.14);
  --gami-wall-salbei:#DCE8D2;
  --gami-wall-nordic:#E5E8EA;
  --gami-wall-midnight:#CDD3DF;
  --gami-wall-golden:#F2E6C9;
  --gami-floor-morgen:#E4D3B6;
  --gami-floor-salbei:#C9D6BD;
  --gami-floor-nordic:#D9CFC0;
  --gami-floor-midnight:#8C93A6;
  --gami-floor-golden:#D8B878;
  /* Prestige: alle 10 Level eine Farbe (Ring um das Level). */
  --prestige-10:#B7793F;
  --prestige-20:#9AA3AD;
  --prestige-30:#D4A63A;
  --prestige-40:#2E9A6B;
  --prestige-50:#3A6FB5;
  --prestige-60:#B8434E;
  --prestige-70:#8456B8;
  --prestige-80:#5FB3C8;
  --prestige-90:#3B3F46;
  --prestige-100:#E3B341;

  /* Die farbige Karte des Wochenrückblicks: Forest über Sage zu Apricot. */
  --review-wash:linear-gradient(150deg,rgba(32,105,79,.16),rgba(225,234,228,.55) 52%,rgba(242,180,95,.22));
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="hell"]){
    --bg-primary:#1A201D;
    --bg-secondary:#252D29;
    --bg-material:rgba(26,32,29,.94);
    --bg-scrim:rgba(0,0,0,.55);
    --bg-scrim-strong:rgba(0,0,0,.70);
    --surface-primary:#2A332E;
    --brand-secondary:#303B35;
    --surface-elevated:#35413A;
    --fill-subtle:rgba(247,245,238,.065);
    --fill-strong:rgba(247,245,238,.12);
    --text-primary:#F7F5EE;
    --text-secondary:#C4CCC6;
    --text-muted:#AEB9B1;
    --text-brand:#9ED8B9;
    --text-on-brand:#17201B;
    --text-on-critical:#230605;
    --text-on-warm:#2E2106;
    --brand-primary:#9ED8B9;
    --brand-soft:rgba(158,216,185,.13);
    --action-primary:#9ED8B9;
    --action-primary-pressed:#86C5A4;
    --action-secondary:#374A40;
    --success:#52C288;
    --success-soft:rgba(82,194,136,.16);
    --success-text:#86DCAA;
    --warning:#FF7961;
    --warning-soft:rgba(255,121,97,.16);
    --warning-text:#FFA28E;
    --critical:#F0544A;
    --critical-soft:rgba(240,84,74,.18);
    --critical-text:#FF8F86;
    --info:#7FA6C6;
    --info-soft:rgba(127,166,198,.16);
    --info-text:#A9C6DE;
    --accent-warm:#E9A951;
    --accent-warm-soft:rgba(233,169,81,.16);
    --accent-warm-text:#F2C27D;
    --achievement:#B39DDB;
    --achievement-soft:rgba(179,157,219,.16);
    --achievement-text:#CDBDEB;
    --mascot-pink:#F29BB8;
    --mascot-pink-soft:rgba(242,155,184,.16);
    --mascot-pink-track:#67414E;
    --mascot-pink-text:#F7B8CC;
    --text-on-mascot:#4D172B;
    --divider:rgba(240,245,239,.10);
    --border-subtle:rgba(240,245,239,.18);
    --border-strong:rgba(240,245,239,.26);
    --nav-bg:rgba(29,37,33,.96);
    --nav-active:#9ED8B9;
    --nav-active-bg:rgba(158,216,185,.13);
    --nav-inactive:#B1BBB4;
    --badge-bg:rgba(233,169,81,.16);
    --badge-text:#F2C27D;
    --hero-bg:#245D49;
    --hero-bg-2:#1A4736;
    --hero-text:#FFFFFF;
    --hero-text-secondary:#CFE3D6;
    --hero-divider:rgba(255,255,255,.14);
    --hero-pressed:rgba(255,255,255,.06);
    --hero-action-bg:#E8F1E6;
    --hero-action-text:#1C4A3A;
    --toast-bg:rgba(52,70,61,.97);
    --toast-text:#F3F6F1;
    --toast-icon-bg:#9ED8B9;
    --toast-icon-text:#17201B;
    --toast-action-bg:rgba(255,255,255,.14);
    --toast-action-bg-pressed:rgba(255,255,255,.26);
    --focus-ring:#9ED8B9;
    --switch-knob:#F7F5EE;
    --shine:rgba(255,255,255,.55);
    --shadow-lift:0 5px 22px rgba(0,0,0,.16);
    --shadow-control:0 1px 3px rgba(0,0,0,.24),0 3px 8px -4px rgba(0,0,0,.34);
    --shadow-knob:0 2px 6px rgba(0,0,0,.40);
    --shadow-hero:0 12px 26px rgba(0,0,0,.35);
    --shadow-toast:0 12px 32px rgba(0,0,0,.45);
    --shadow-message-mascot:rgba(0,0,0,.40);
    --shadow-message-icon:0 2px 5px rgba(0,0,0,.45);
    --review-bubble-bg:rgba(255,255,255,.12);
    --shadow-party-card:0 28px 80px rgba(0,0,0,.55);
    --review-wash:linear-gradient(150deg,rgba(108,160,132,.18),rgba(49,59,53,.72) 52%,rgba(213,158,85,.16));
    --kitchen-tile:rgba(240,245,239,.05);
    --kitchen-counter:#4A4032;
    --kitchen-counter-top:#5A4E3D;
    --kitchen-shelf:#655744;
    --kitchen-glass:rgba(255,255,255,.10);
    --kitchen-glass-edge:rgba(240,245,239,.18);
    --kitchen-frost:blur(18px) saturate(115%);
    --shadow-bubble:0 6px 16px -8px rgba(0,0,0,.6);
    --gami-morgen:#8A7556;
    --gami-morgen-2:#D9A06A;
    --gami-salbei:#5F7A58;
    --gami-salbei-2:#D4B24C;
    --gami-nordic:#766C5E;
    --gami-nordic-2:#93AABC;
    --gami-midnight:#2B354D;
    --gami-midnight-2:#D1AE68;
    --gami-golden:#A6843C;
    --gami-golden-2:#E3B04E;
    --gami-shade:rgba(0,0,0,.28);
    --gami-wall-salbei:#20382C;
    --gami-wall-nordic:#243236;
    --gami-wall-midnight:#1B2438;
    --gami-wall-golden:#2F2A1C;
    --gami-floor-morgen:#3A3226;
    --gami-floor-salbei:#2F3A2A;
    --gami-floor-nordic:#3A352D;
    --gami-floor-midnight:#252B3A;
    --gami-floor-golden:#4A3D22;
    --prestige-10:#C98B52;
    --prestige-20:#B4BCC6;
    --prestige-30:#E0B64C;
    --prestige-40:#4DB887;
    --prestige-50:#6A9BDB;
    --prestige-60:#D9676F;
    --prestige-70:#A987D6;
    --prestige-80:#7FC8DA;
    --prestige-90:#9AA0AA;
    --prestige-100:#F0C45A;
  }
}

:root[data-theme="dunkel"]{
  --bg-primary:#1A201D;
  --bg-secondary:#252D29;
  --bg-material:rgba(26,32,29,.94);
  --bg-scrim:rgba(0,0,0,.55);
  --bg-scrim-strong:rgba(0,0,0,.70);
  --surface-primary:#2A332E;
  --brand-secondary:#303B35;
  --surface-elevated:#35413A;
  --fill-subtle:rgba(247,245,238,.065);
  --fill-strong:rgba(247,245,238,.12);
  --text-primary:#F7F5EE;
  --text-secondary:#C4CCC6;
  --text-muted:#AEB9B1;
  --text-brand:#9ED8B9;
  --text-on-brand:#17201B;
  --text-on-critical:#230605;
  --text-on-warm:#2E2106;
  --brand-primary:#9ED8B9;
  --brand-soft:rgba(158,216,185,.13);
  --action-primary:#9ED8B9;
  --action-primary-pressed:#86C5A4;
  --action-secondary:#374A40;
  --success:#52C288;
  --success-soft:rgba(82,194,136,.16);
  --success-text:#86DCAA;
  --warning:#FF7961;
  --warning-soft:rgba(255,121,97,.16);
  --warning-text:#FFA28E;
  --critical:#F0544A;
  --critical-soft:rgba(240,84,74,.18);
  --critical-text:#FF8F86;
  --info:#7FA6C6;
  --info-soft:rgba(127,166,198,.16);
  --info-text:#A9C6DE;
  --accent-warm:#E9A951;
  --accent-warm-soft:rgba(233,169,81,.16);
  --accent-warm-text:#F2C27D;
  --achievement:#B39DDB;
  --achievement-soft:rgba(179,157,219,.16);
  --achievement-text:#CDBDEB;
  --mascot-pink:#F29BB8;
  --mascot-pink-soft:rgba(242,155,184,.16);
  --mascot-pink-track:#67414E;
  --mascot-pink-text:#F7B8CC;
  --text-on-mascot:#4D172B;
  --divider:rgba(240,245,239,.10);
  --border-subtle:rgba(240,245,239,.18);
  --border-strong:rgba(240,245,239,.26);
  --nav-bg:rgba(29,37,33,.96);
  --nav-active:#9ED8B9;
  --nav-active-bg:rgba(158,216,185,.13);
  --nav-inactive:#B1BBB4;
  --badge-bg:rgba(233,169,81,.16);
  --badge-text:#F2C27D;
  --hero-bg:#245D49;
  --hero-bg-2:#1A4736;
  --hero-text:#FFFFFF;
  --hero-text-secondary:#CFE3D6;
  --hero-divider:rgba(255,255,255,.14);
  --hero-pressed:rgba(255,255,255,.06);
  --hero-action-bg:#E8F1E6;
  --hero-action-text:#1C4A3A;
  --toast-bg:rgba(52,70,61,.97);
  --toast-text:#F3F6F1;
  --toast-icon-bg:#9ED8B9;
  --toast-icon-text:#17201B;
  --toast-action-bg:rgba(255,255,255,.14);
  --toast-action-bg-pressed:rgba(255,255,255,.26);
  --focus-ring:#9ED8B9;
  --switch-knob:#F7F5EE;
  --shine:rgba(255,255,255,.55);
  --shadow-lift:0 5px 22px rgba(0,0,0,.16);
  --shadow-control:0 1px 3px rgba(0,0,0,.24),0 3px 8px -4px rgba(0,0,0,.34);
  --shadow-knob:0 2px 6px rgba(0,0,0,.40);
  --shadow-hero:0 12px 26px rgba(0,0,0,.35);
  --shadow-toast:0 12px 32px rgba(0,0,0,.45);
  --shadow-message-mascot:rgba(0,0,0,.40);
  --shadow-message-icon:0 2px 5px rgba(0,0,0,.45);
  --review-bubble-bg:rgba(255,255,255,.12);
  --shadow-party-card:0 28px 80px rgba(0,0,0,.55);
  --review-wash:linear-gradient(150deg,rgba(108,160,132,.18),rgba(49,59,53,.72) 52%,rgba(213,158,85,.16));
  --kitchen-tile:rgba(240,245,239,.05);
  --kitchen-counter:#4A4032;
  --kitchen-counter-top:#5A4E3D;
  --kitchen-shelf:#655744;
  --kitchen-glass:rgba(255,255,255,.10);
  --kitchen-glass-edge:rgba(240,245,239,.18);
  --kitchen-frost:blur(18px) saturate(115%);
  --shadow-bubble:0 6px 16px -8px rgba(0,0,0,.6);
  --gami-morgen:#8A7556;
  --gami-morgen-2:#D9A06A;
  --gami-salbei:#5F7A58;
  --gami-salbei-2:#D4B24C;
  --gami-nordic:#766C5E;
  --gami-nordic-2:#93AABC;
  --gami-midnight:#2B354D;
  --gami-midnight-2:#D1AE68;
  --gami-golden:#A6843C;
  --gami-golden-2:#E3B04E;
  --gami-shade:rgba(0,0,0,.28);
  --gami-wall-salbei:#20382C;
  --gami-wall-nordic:#243236;
  --gami-wall-midnight:#1B2438;
  --gami-wall-golden:#2F2A1C;
  --gami-floor-morgen:#3A3226;
  --gami-floor-salbei:#2F3A2A;
  --gami-floor-nordic:#3A352D;
  --gami-floor-midnight:#252B3A;
  --gami-floor-golden:#4A3D22;
  --prestige-10:#C98B52;
  --prestige-20:#B4BCC6;
  --prestige-30:#E0B64C;
  --prestige-40:#4DB887;
  --prestige-50:#6A9BDB;
  --prestige-60:#D9676F;
  --prestige-70:#A987D6;
  --prestige-80:#7FC8DA;
  --prestige-90:#9AA0AA;
  --prestige-100:#F0C45A;
}

/* Die feste Wahl gilt auch für Formularelemente und Bildlaufleisten
   des Systems — sonst stünde bei „Hell" auf einem dunkel eingestellten
   Gerät ein dunkles Eingabefeld auf heller Seite. */
:root[data-theme="hell"]{color-scheme:light}
:root[data-theme="dunkel"]{color-scheme:dark}