/* ==========================================================================
   Küchenfamilie: Design-Tokens  (Rezepte, Küche, Tagebuch, Portionsseite; Dachmarke Cucinami)
   Stand 2026-10-09, Überarbeitung 2.
   QUELLE DER WAHRHEIT ist diese Datei. docs/design/designvorschlag.html enthält eine
   Kopie (auf .kf statt :root, weil ein Artifact keine Dateien laden kann); die Werte
   dort müssen exakt gleich sein. Beide werden aus einer Quelle erzeugt und verglichen.

   ANWENDUNG
   <html data-theme="landhaus|klar|verspielt" data-mode="light|dark">
   <body data-product="sammlung|kueche|nutri|portion">
   - data-theme fehlt  -> Landhaus (Default)
   - data-mode fehlt   -> folgt prefers-color-scheme; "light"/"dark" erzwingt
   - data-theme und data-mode gehören auf <html>. data-product darf auf <html> oder
     <body> stehen (die App setzt es heute auf <body>); es setzt nur den Akzent,
     die Touch-Größe und den Zeilenabstand. "portion" (QR-Seite /p/) = Tagebuch-Kobalt.
   - Die Reihenfolge der Blöcke trägt die Kaskade (Landhaus, Klar, Verspielt, Aliasse,
     Produkt) und darf nicht umsortiert werden.
   - <html data-tone="sachlich|trocken"> setzt kein Token; public/shared/copy.js liest es.

   MIGRATION von data-app-theme (erledigt 2026-10-09, public/shared/boot.js):
     erbstueck  -> data-theme="landhaus"                (Modus folgt System)
     marktstand -> data-theme="verspielt"               (kräftiger, wärmer)
     atelier    -> data-theme="landhaus" data-mode="dark"  (war immer dunkel)
     frisch     -> data-theme="klar"                    (Sans-Titel, modern)
   boot.js schreibt den alten localStorage-Wert "appTheme" einmalig in "theme"/"mode" um;
   die Einstellung liegt seitdem auf dem Server (GET/PUT /api/settings, gilt für alle drei
   Apps) mit localStorage als Cache. Die data-app-theme-Übergangs-Selektoren sind entfernt.
   public/shared/tokens.css ist eine Kopie dieser Datei (test/design-tokens.test.js prüft das).

   NAMENSVERTRAG der laufenden App (public/shared/tokens.css), alle weiter definiert:
     --font-display --font-body --font-mono  --ground --card --card2  --ink --ink2 --muted
     --line --line2  --accent --accent-ink --accent-soft --on-accent  --econ --econ-soft
     --risk --risk-soft  --radius --radius-sm --shadow  --tap
   Aliasse: --tap = --touch-product (44px, Küche 56px), --radius = --r-card,
            --radius-sm = --r-control (höchstens 14px, damit Fehlerboxen
            in Verspielt keine Pillen werden), --font-body = --font-ui.

   SCHRIFTEN selbst gehostet (keine Google-Fonts-Abrufe zur Laufzeit): public/shared/fonts.css
     mit den latin/latin-ext-Dateien aus @fontsource-variable/vollkorn (normal + italic),
     @fontsource-variable/atkinson-hyperlegible-next, …-mono und @fontsource-variable/ibm-plex-sans
     (OFL, Lizenztexte daneben),
     geladen über base.css. Keine App-Abhängigkeit, kein Build-Schritt.
   Familiennamen der Pakete: "Vollkorn Variable", "Atkinson Hyperlegible Next Variable",
   "Atkinson Hyperlegible Mono Variable", "IBM Plex Sans Variable"; die Stacks nennen beide
   Schreibweisen.

   TOKENS  (* = Name aus dem bestehenden Vertrag)
   Farbe, je Theme und Modus
     --ground*        Seitengrund (Landhaus: Porzellan)
     --card*          Karten und Flächen (Glasur)
     --card2*         eingelassene Flächen: Chips, Eingabefelder, Zebra, Messbalken-Spur
     --ink*           Primärtext; auch Fläche des Tagesblocks
     --ink2*          Sekundärtext
     --muted*         Metadaten, Platzhalter; >= 4,5:1 auf ground, card, card2
     --line*          Ränder, Trennlinien
     --line2*         feine Linien innerhalb von Tabellen
     --kraut          Produktfarbe Sammlung (Kräutergrün): Fläche, Balken, Primärknopf
     --kraut-ink      Kräutergrün als Text (>= 4,5:1 auf ground/card/card2/kraut-soft)
     --kraut-soft     Kräutergrün als zarte Fläche
     --kupfer / --kupfer-ink / --kupfer-soft    Produktfarbe Küche (Kupfer)
     --kobalt / --kobalt-ink / --kobalt-soft    Produktfarbe Tagebuch (Kobalt)
     --on-accent*     Text und Icons auf gefülltem Akzent (alle drei Produktfarben)
     --econ*          Bernstein: nur Bewertung und Bezahlen
     --econ-soft*     Bernstein-Fläche
     --risk*          Rote Bete: Fehler, destruktiv, abgelaufen. Bewusst dunkler als
                      Kupfer (Leuchtdichte-Kontrast >= 1,48:1 in allen Themes) und
                      im Farbton rund 45 Grad entfernt, auch für Deuteranopie unterscheidbar.
     --risk-soft*     Rote-Bete-Fläche: "bald fällig", Fehlerhinweis
     --risk-on        Text auf gefüllter Rote Bete
     --shadow*        Kartenschatten (Klar: keiner)
     --scrim          Abdunklung hinter Sheets und Dialogen
   Marke Cucinami (docs/design/MARKE.md), in allen Themes gleich: eine Marke, eine Farbe
     --brand          Terrakotta für Signet und Wortmarke, hell und dunkel getrennt, >= 4,5:1 auf
                      ground, card, card2 und den drei *-soft jedes Themes (test/brand.test.js).
                      Steht nur in den Landhaus-Blöcken; Klar und Verspielt erben ihn über :root.
                      Bewusst röter als Kupfer (Farbton ~11 statt ~21 Grad): Marke ist nicht Küche.
     --font-brand     Wortmarke: immer Vollkorn Italic, kleingeschrieben, auch in Klar (Sans-Titel)
     --brand-weight   Schnitt der Wortmarke
     --brand-size     Wortmarke als Absender in der Produktleiste; das Signet ist 1.15em groß
     --brand-size-hero  Wortmarke auf der Anmeldeseite
   Produkt-Akzent, gesetzt über data-product
     --accent*        aktuelle Produktfarbe (Default: --kraut)
     --accent-ink*    aktuelle Produktfarbe als Text
     --accent-soft*   aktuelle Produktfarbe als Fläche
     --touch-product  Mindestgröße Touch-Ziel im Produkt (Küche 56px, sonst 44px)
     --lh-body        Zeilenabstand Fließtext im Produkt
   Form, je Theme
     --font-display*  Inhalte, die man besitzt: Rezeptnamen, Seitentitel (Klar: Sans)
     --font-ui        Bedienung: Buttons, Labels, Navigation, Küchen-Ziffern
     --font-mono*     Zeichenfolgen zum Vergleichen und Abtippen: Portionscodes, Rohtext (JSON,
                      Fehlerliste). Null mit Schrägstrich (trennt 0 von D und Q im Code).
                      Das Etikett nutzt sie NICHT: lib/labels/ druckt Helvetica (PDF-Standardschrift).
     --font-num       Messwerte zum Lesen: kcal, g, %, Gewichte, Mengen, Uhrzeiten (IBM Plex Sans:
                      glatte Null, Ziffern ohne Feature gleich breit; Gründer-Entscheidung d20 = b,
                      docs/design/null-lesbarkeit/). Zeichen außerhalb des Plex-Subsets (≥, ≈)
                      holt der Browser aus der System-Sans, nicht aus einer Mono; Mono nur als letzte Stufe.
     --display-weight / --display-style / --display-tracking   Schnitt der Display-Schrift
     --title-scale    Faktor für Seitentitel (Klar 0.8: kleinere Titel)
     --r-card         Radius Karten        --r-control  Radius Buttons, Felder
     --r-chip         Radius Chips         --r-sheet    Radius Bottom-Sheets, Dialoge
     --density        Dichte-Faktor für Innenabstände (Klar 0.72, Verspielt 1.08)
     --icon-stroke    Strichstärke der Linien-Icons
     --border-w       Randstärke
     --photo-inset    Passepartout um Fotos in Karten (Landhaus 6px)
     --photo-radius   Radius der Fotos
   Global
     --text-12 ... --text-72   Schriftgrade (Bringhurst-Skala 12 14 16 18 21 24 36 48 60 72)
     --lh-tight / --lh-snug / --lh-ui / --lh-sans / --lh-serif   Zeilenabstände
     --measure        maximale Zeilenlänge Fließtext
     --space-1 ... --space-8   Abstände 4 8 12 16 24 32 48 64
     --touch          Mindest-Touch-Ziel 44px; --touch-werkbank 56px (Herd, nasse Hände)
     --dur-1 / --dur-2 / --ease   Bewegung (bei prefers-reduced-motion: 0ms)
     --hatch          Schraffur für GESCHÄTZTE Werte. Nutzt currentColor:
                      .est { color: var(--accent); background-image: var(--hatch); }
     --hatch-fine     feinere Schraffur für kleine Flächen (< 12px)
     --gap-border     gestrichelter Rand für FEHLENDE Nährwert-Anteile
     --seg-min        Mindestbreite schraffierter/fehlender Balkenstücke (12px), damit
                      kleine Schätz- und Lückenanteile sichtbar bleiben
     --label-ink / --label-paper   Etikett: nur Schwarz auf Weiß (Thermodruck)
   Ehrliche Daten: gemessen/berechnet = Vollfläche (background: currentColor),
   geschätzt = var(--hatch) + Zeichen "≈", fehlend = border: var(--gap-border) + "fehlt";
   nie still weglassen, nie nur über Farbe oder Hover erklären.
   ========================================================================== */


:root,
[data-theme="landhaus"] {
  --text-12: 0.75rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-21: 1.3125rem;
  --text-24: 1.5rem;
  --text-36: 2.25rem;
  --text-48: 3rem;
  --text-60: 3.75rem;
  --text-72: 4.5rem;
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-ui: 1.45;
  --lh-sans: 1.55;
  --lh-serif: 1.62;
  --measure: 68ch;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --touch: 44px;
  --touch-werkbank: 56px;
  --dur-1: 120ms;
  --dur-2: 220ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  --hatch: repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px 5px);
  --hatch-fine: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 3.5px);
  --gap-border: 1.5px dashed currentColor;
  --seg-min: 12px;
  --label-ink: #000000;
  --label-paper: #FFFFFF;
  --font-display: "Vollkorn Variable", "Vollkorn", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-ui: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono Variable", "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-num: "IBM Plex Sans Variable", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Atkinson Hyperlegible Mono Variable", "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-brand: "Vollkorn Variable", "Vollkorn", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --brand-weight: 620;
  --brand-size: 15px;
  --brand-size-hero: 36px;
  --display-weight: 760;
  --display-style: normal;
  --display-tracking: -0.012em;
  --title-scale: 1;
  --r-card: 12px;
  --r-control: 10px;
  --r-chip: 999px;
  --r-sheet: 20px;
  --density: 1;
  --icon-stroke: 1.6;
  --border-w: 1px;
  --photo-inset: 6px;
  --photo-radius: 8px;
  --ground: #F3F3EC;
  --card: #FCFCF9;
  --card2: #E8E9DF;
  --ink: #1E231C;
  --ink2: #4A5244;
  --muted: #5C6355;
  --line: #D2D4C6;
  --line2: #E2E3D8;
  --kraut: #3A6634;
  --kraut-ink: #2D5228;
  --kraut-soft: #E0E9D9;
  --kupfer: #9A4A1E;
  --kupfer-ink: #7F3B15;
  --kupfer-soft: #F3E3D6;
  --kobalt: #2D4B85;
  --kobalt-ink: #233C6D;
  --kobalt-soft: #E0E6F1;
  --on-accent: #FCFCF9;
  --econ: #835C12;
  --econ-soft: #F1E8D2;
  --risk: #7E2548;
  --risk-soft: #F5E0E9;
  --risk-on: #FCFCF9;
  --shadow: 0 1px 2px rgba(30,35,28,.06), 0 10px 24px -14px rgba(30,35,28,.20);
  --scrim: rgba(20,24,15,.45);
  --brand: #A3412C;
  color-scheme: light;
  --accent: var(--kraut);
  --accent-ink: var(--kraut-ink);
  --accent-soft: var(--kraut-soft);
  --touch-product: 44px;
  --lh-body: 1.55;
}

/* Landhaus dunkel (Gusseisen) */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]),
  [data-theme="landhaus"]:not([data-mode="light"]) {
    --ground: #141712;
    --card: #1C2019;
    --card2: #252A21;
    --ink: #E9EAE1;
    --ink2: #BEC3B3;
    --muted: #A0A595;
    --line: #373D30;
    --line2: #2B3026;
    --kraut: #93BE85;
    --kraut-ink: #ACD09F;
    --kraut-soft: #26311F;
    --kupfer: #EEB48A;
    --kupfer-ink: #F4C8A6;
    --kupfer-soft: #3A2619;
    --kobalt: #97AEE0;
    --kobalt-ink: #B3C5EC;
    --kobalt-soft: #1F2840;
    --on-accent: #141712;
    --econ: #D6A853;
    --econ-soft: #332A17;
    --risk: #DC6E9A;
    --risk-soft: #3E1D2C;
    --risk-on: #141712;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.6);
    --scrim: rgba(0,0,0,.6);
    --brand: #EE9A82;
    color-scheme: dark;
  }
}

:root[data-mode="dark"],
[data-theme="landhaus"][data-mode="dark"] {
  --ground: #141712;
  --card: #1C2019;
  --card2: #252A21;
  --ink: #E9EAE1;
  --ink2: #BEC3B3;
  --muted: #A0A595;
  --line: #373D30;
  --line2: #2B3026;
  --kraut: #93BE85;
  --kraut-ink: #ACD09F;
  --kraut-soft: #26311F;
  --kupfer: #EEB48A;
  --kupfer-ink: #F4C8A6;
  --kupfer-soft: #3A2619;
  --kobalt: #97AEE0;
  --kobalt-ink: #B3C5EC;
  --kobalt-soft: #1F2840;
  --on-accent: #141712;
  --econ: #D6A853;
  --econ-soft: #332A17;
  --risk: #DC6E9A;
  --risk-soft: #3E1D2C;
  --risk-on: #141712;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px -14px rgba(0,0,0,.6);
  --scrim: rgba(0,0,0,.6);
  --brand: #EE9A82;
  color-scheme: dark;
}

/* ---- Klar (Weiß/Graphit, nur Sans, enges Raster) ---- */
[data-theme="klar"] {
  --font-display: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono Variable", "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-num: "IBM Plex Sans Variable", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Atkinson Hyperlegible Mono Variable", "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --display-weight: 700;
  --display-style: normal;
  --display-tracking: -0.02em;
  --title-scale: 0.8;
  --r-card: 4px;
  --r-control: 4px;
  --r-chip: 4px;
  --r-sheet: 8px;
  --density: 0.72;
  --icon-stroke: 1.5;
  --border-w: 1px;
  --photo-inset: 0px;
  --photo-radius: 0px;
  --ground: #F5F5F4;
  --card: #FFFFFF;
  --card2: #ECECEA;
  --ink: #17181A;
  --ink2: #3E4146;
  --muted: #595D63;
  --line: #D6D7D9;
  --line2: #E7E7E8;
  --kraut: #2C6A38;
  --kraut-ink: #225430;
  --kraut-soft: #E1ECE2;
  --kupfer: #9B4213;
  --kupfer-ink: #7E340D;
  --kupfer-soft: #F5E3D8;
  --kobalt: #244797;
  --kobalt-ink: #1C3A7D;
  --kobalt-soft: #E1E7F4;
  --on-accent: #FFFFFF;
  --econ: #835C10;
  --econ-soft: #F2E9D3;
  --risk: #7C1F48;
  --risk-soft: #F7E0EA;
  --risk-on: #FFFFFF;
  --shadow: none;
  --scrim: rgba(20,24,15,.45);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  [data-theme="klar"]:not([data-mode="light"]) {
    --ground: #111213;
    --card: #191A1C;
    --card2: #232427;
    --ink: #EDEEF0;
    --ink2: #B7BAC0;
    --muted: #9A9EA5;
    --line: #313338;
    --line2: #27292C;
    --kraut: #86C892;
    --kraut-ink: #A2D7AB;
    --kraut-soft: #1C2E21;
    --kupfer: #F2B184;
    --kupfer-ink: #F6C7A4;
    --kupfer-soft: #372216;
    --kobalt: #93B2F2;
    --kobalt-ink: #B2C8F6;
    --kobalt-soft: #1A2540;
    --on-accent: #111213;
    --econ: #DDAE55;
    --econ-soft: #30281A;
    --risk: #E0739F;
    --risk-soft: #3B1C2A;
    --risk-on: #111213;
    --shadow: none;
    --scrim: rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

[data-theme="klar"][data-mode="dark"] {
  --ground: #111213;
  --card: #191A1C;
  --card2: #232427;
  --ink: #EDEEF0;
  --ink2: #B7BAC0;
  --muted: #9A9EA5;
  --line: #313338;
  --line2: #27292C;
  --kraut: #86C892;
  --kraut-ink: #A2D7AB;
  --kraut-soft: #1C2E21;
  --kupfer: #F2B184;
  --kupfer-ink: #F6C7A4;
  --kupfer-soft: #372216;
  --kobalt: #93B2F2;
  --kobalt-ink: #B2C8F6;
  --kobalt-soft: #1A2540;
  --on-accent: #111213;
  --econ: #DDAE55;
  --econ-soft: #30281A;
  --risk: #E0739F;
  --risk-soft: #3B1C2A;
  --risk-on: #111213;
  --shadow: none;
  --scrim: rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---- Verspielt (kräftigere Farben, runder, Illustration statt Foto) ---- */
[data-theme="verspielt"] {
  --font-display: "Vollkorn Variable", "Vollkorn", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-ui: "Atkinson Hyperlegible Next Variable", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono Variable", "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-num: "IBM Plex Sans Variable", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Atkinson Hyperlegible Mono Variable", "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --display-weight: 900;
  --display-style: italic;
  --display-tracking: -0.005em;
  --title-scale: 0.94;
  --r-card: 22px;
  --r-control: 999px;
  --r-chip: 999px;
  --r-sheet: 28px;
  --density: 1.08;
  --icon-stroke: 2;
  --border-w: 1.5px;
  --photo-inset: 0px;
  --photo-radius: 18px;
  --ground: #FBF9F4;
  --card: #FFFFFF;
  --card2: #F1EEE6;
  --ink: #1F1A16;
  --ink2: #4A433B;
  --muted: #5F574D;
  --line: #E1DBCF;
  --line2: #EEEAE1;
  --kraut: #1F7A3A;
  --kraut-ink: #17602D;
  --kraut-soft: #D3EED8;
  --kupfer: #B4400E;
  --kupfer-ink: #8F320A;
  --kupfer-soft: #FFDCC8;
  --kobalt: #2B4FC7;
  --kobalt-ink: #2140A6;
  --kobalt-soft: #D9E2FC;
  --on-accent: #FFFFFF;
  --econ: #83590A;
  --econ-soft: #FBEBC4;
  --risk: #8C1D52;
  --risk-soft: #FCDDEB;
  --risk-on: #FFFFFF;
  --shadow: 0 3px 0 rgba(31,26,22,.10);
  --scrim: rgba(20,24,15,.45);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  [data-theme="verspielt"]:not([data-mode="light"]) {
    --ground: #17151A;
    --card: #211E25;
    --card2: #2B2730;
    --ink: #F2EFF4;
    --ink2: #C6C0CC;
    --muted: #A8A1B0;
    --line: #3A3540;
    --line2: #2F2B35;
    --kraut: #72D18C;
    --kraut-ink: #93DEA8;
    --kraut-soft: #1C3324;
    --kupfer: #FFAE7E;
    --kupfer-ink: #FFC6A3;
    --kupfer-soft: #41241A;
    --kobalt: #93AAFF;
    --kobalt-ink: #B3C3FF;
    --kobalt-soft: #232A4A;
    --on-accent: #17151A;
    --econ: #F0BC5A;
    --econ-soft: #382C14;
    --risk: #EC6FA6;
    --risk-soft: #45202F;
    --risk-on: #17151A;
    --shadow: 0 3px 0 rgba(0,0,0,.45);
    --scrim: rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

[data-theme="verspielt"][data-mode="dark"] {
  --ground: #17151A;
  --card: #211E25;
  --card2: #2B2730;
  --ink: #F2EFF4;
  --ink2: #C6C0CC;
  --muted: #A8A1B0;
  --line: #3A3540;
  --line2: #2F2B35;
  --kraut: #72D18C;
  --kraut-ink: #93DEA8;
  --kraut-soft: #1C3324;
  --kupfer: #FFAE7E;
  --kupfer-ink: #FFC6A3;
  --kupfer-soft: #41241A;
  --kobalt: #93AAFF;
  --kobalt-ink: #B3C3FF;
  --kobalt-soft: #232A4A;
  --on-accent: #17151A;
  --econ: #F0BC5A;
  --econ-soft: #382C14;
  --risk: #EC6FA6;
  --risk-soft: #45202F;
  --risk-on: #17151A;
  --shadow: 0 3px 0 rgba(0,0,0,.45);
  --scrim: rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---- Aliasse für den bestehenden Namensvertrag (auf jedem Element neu aufgelöst,
   das Theme oder Produkt setzt) ---- */
:root,
[data-theme],
[data-product] {
  --tap: var(--touch-product);
  --radius: var(--r-card);
  --radius-sm: min(var(--r-control), 14px);
  --font-body: var(--font-ui);
}

/* ---- Produkt-Akzent ---- */
[data-product="sammlung"] {
  --accent: var(--kraut);
  --accent-ink: var(--kraut-ink);
  --accent-soft: var(--kraut-soft);
  --touch-product: 44px;
  --lh-body: 1.55;
}
[data-product="kueche"] {
  --accent: var(--kupfer);
  --accent-ink: var(--kupfer-ink);
  --accent-soft: var(--kupfer-soft);
  --touch-product: 56px;
  --lh-body: 1.45;
}
[data-product="nutri"],
[data-product="portion"] {
  --accent: var(--kobalt);
  --accent-ink: var(--kobalt-ink);
  --accent-soft: var(--kobalt-soft);
  --touch-product: 44px;
  --lh-body: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; }
}