/* Reihenfolge der Ebenen – in jeder CSS-Datei gleich deklariert, damit es
   egal ist, welche Datei der Browser zuerst sieht. */
@layer tokens, stil, hilfsklassen;

/* Design-Tokens "Klassische Bibliothek": Flaschengrün (Logo), Pergament,
   Messing, Leder, Siegellack, Holz. Zuerst die Grundfarben (fest), dann die
   Rollen (--bg, --ink, …), auf die sich alle anderen Dateien beziehen.
   Zwei Rollen-Sätze: :root = Verwaltung und Unterseiten (hell, Pergament),
   body[data-ansicht="shop"] = Kundenbereich (dunkles Flaschengrün).
   body[data-ansicht] wird im JavaScript von index.html in render() gesetzt.
   Bewusst keine automatische Dunkelmodus-Variante – color-scheme sorgt nur
   dafür, dass native Formular-Elemente zur jeweiligen Helligkeit passen. */
@layer tokens{
:root{
  /* --- Grundfarben --- */
  /* eine Stufe heller als ursprünglich #234A36 (Entscheid 2026-10-10) – Texte
     bleiben WCAG-AA: Pergament 7,2:1, gedämpft (#B4C2A9) 4,7:1 */
  --flaschengruen:#285340;   /* Shop-Hintergrund, Kopfzeile */
  --flaschengruen-linie:#3F6650;
  --bankerlampe:#2E6B47;     /* grüner Lampenschirm: Akzent auf hellem Grund */
  --pergament:#F1E8D2;       /* Karten, Panels, heller Text auf Grün */
  --pergament-tief:#E4D6B4;  /* Ränder, Preisschild */
  --pergament-hell:#FBF8EF;  /* Eingabefelder auf Pergament */
  --messing:#C9A856;         /* Linien, Fokus, Ornamente, Badges */
  --messing-hell:#E6CF8A;
  --messing-dunkel:#8C7232;  /* Messing als Linie auf Pergament */
  --leder:#6E2A2A;           /* Ochsenblut: Haupt-Aktion (Warenkorb, Bestellen) */
  --leder-hell:#8A3A36;
  --leder-tief:#4A1A19;
  --siegellack:#9E2B25;      /* Stempel, rote Karteikarten-Linie */
  --tinte:#241C14;           /* Text auf Pergament */
  --sepia:#6B5B45;           /* gedämpfter Text auf Pergament */
  --holz:#6B4226;
  --holz-hell:#8A5A35;
  --holz-dunkel:#3E2615;

  /* --- Diagramme (Statistik): hellere Töne von Bankerlampe/Ochsenblut, mit dem
     Dataviz-Validator gegen --surface geprüft (Helligkeit, Sättigung, Kontrast) --- */
  --diagramm-bestellungen:#2F8F5B;
  --diagramm-umsatz:#A8392C;

  /* --- Schriften --- */
  --schrift-text:"Public Sans",system-ui,sans-serif;          /* Formulare, Verwaltung */
  --schrift-buch:"EB Garamond",Georgia,serif;                 /* Buchtitel, Fliesstext Shop */
  --schrift-titel:"Cinzel",Georgia,serif;                     /* Marke, Zwischentitel, Knöpfe */
  --schrift-maschine:"Courier Prime","Courier New",monospace; /* Karteikarte */

  /* Feine Papierstruktur (SVG-Rauschen, keine Bilddatei) für Pergament-Flächen */
  --papier:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Holzmaserung (waagrechte Fasern, SVG-Rauschen) für den Zettelkatalog-Schrank */
  --maserung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .2' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .08 0 0 0 0 .02 0 0 0 .6 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");

  /* --- Rollen: Verwaltung / Unterseiten (hell, Pergament) --- */
  color-scheme:light;
  --bg:#F4EEDF; --surface:#FBF8EF; --ink:var(--tinte); --muted:var(--sepia); --line:#DCCFAE;
  --petrol:var(--bankerlampe); --on-petrol:var(--pergament); --red:var(--leder); --focus:var(--bankerlampe);
}
body[data-ansicht="shop"]{
  /* --- Rollen: Kundenbereich (dunkles Flaschengrün) ---
     --surface ist hier dasselbe Pergament wie --ink (heller Text auf Grün):
     Pergament-Flächen setzen deshalb ausdrücklich --ink-dunkel als
     Textfarbe (siehe komponenten.css, "Pergament-Flächen"). */
  --bg:var(--flaschengruen); --surface:var(--pergament); --ink:var(--pergament); --ink-dunkel:var(--tinte);
  --muted:#B4C2A9; --line:var(--flaschengruen-linie);
  --gold:var(--messing); --focus:var(--messing); --red:var(--leder);
  color-scheme:dark;
  /* Seitenrand: der Shop nutzt die volle Fensterbreite, der Rand wächst mit */
  --seitenRand:clamp(16px,2.5vw,48px);
}
}