/* ============================================================
   Hestiaro · Rollen-Tokens für Tool UND Kundenportale (hell + dunkel)
   ------------------------------------------------------------
   Die EINE Stelle, an der die Farbwerte von Hestiaro stehen. instanz_html.js (Tool, Login) und
   instanz_portal.js (Kauf-, Eigentümer-, Finanzportal) binden diese Datei VOR theme.css bzw.
   portal.css ein. Alle anderen Hestiaro-Dateien nennen nur noch var(--h-…), nie einen festen Wert.
   Die MAYA-Instanz lädt die Datei nie; Dateien, die auch MAYA lädt, schreiben darum
   var(--h-…, <alter Wert>) – ohne diese Datei greift der alte Wert, MAYA sieht aus wie vorher.

   Hell/Dunkel: die Klasse html.k-dunkel ist die eine Quelle. Gesetzt wird sie vor dem ersten Bild
   (Kopfskript aus instanz_html.js bzw. instanz_portal.js), danach halten hestiaro/thema.js (Tool)
   bzw. hestiaro/portal.js (Portale) sie synchron.

   Name            hell       dunkel     Einsatz
   --h-grund       #FFFFFF    #141413    Seitengrund (Portale), Inhaltsfläche
   --h-ebene       #F4F4F3    #1E1D1C    Karten, Seitenleiste, zweitrangige Knöpfe
   --h-ebene-2     #E9E9E7    #282725    Drüberfahren, Spur, Platzhalter
   --h-auf-ebene   #FFFFFF    #282725    Fläche AUF einer Karte (Beraterkarte, Chips)
   --h-fuell       5 % Anthr. 7 % Weiß   Felder: wirkt auf Grund und auf Karte richtig
   --h-stark       #1E1D1C    #F4F4F3    Überschriften, Zahlen, Hauptknopf-Grund
   --h-text        #3A3936    #DAD9D6    Fließtext
   --h-neben       #6E6C69    #A3A19C    Nebentext (≥ 4.7:1 auf Grund und Karte)
   --h-umkehr      #FFFFFF    #1E1D1C    Schrift auf --h-stark (Hauptknopf)
   --h-ok/-rot/-blau/-gold    Zustände, entsättigt (alle ≥ 4.5:1 auf Grund und Karte)
   --h-ak-schrift  Akzent als Schrift (hell --akzent-tief, dunkel --akzent-dunkel)
   --h-ak-flaeche  Akzent sehr hell als Fläche
   --h-schwebend   Schatten nur für Schwebendes (Fenster, Menüs, Hinweise)

   Zusätzlich fürs Tool (Seitengrund grau, Karten weiß, darin Unterflächen):
   --h-seite       #F3F3F1    #141413    Seitengrund des Tools
   --h-karte       #FFFFFF    #1E1D1C    Karte auf dem Seitengrund, Fenster
   --h-unter       #F4F4F3    #282725    Unterfläche auf einer Karte, Drüberfahren
   --h-tief        #E9E9E7    #34322F    tiefere Unterfläche: Spur, aktive Pille, Häkchen-Grund
   --h-tief-2      #DCDBD8    #403E3A    Drüberfahren auf --h-tief
   --h-linie       #E4E4E1    #3A3835    feine Linie (nur Kalender-Raster, Umriss beim Drüberfahren)
   --h-mittel      #8A8884    #8E8C87    Balken, Punkte (nie Schrift)
   --h-leise       #B9B7B3    #5F5D59    leise Balken und Punkte (nie Schrift)
   --h-flaeche     = --h-karte           Fläche eines Bausteins (Rechner-Schublade), -hover #FAFAF9 / #232220
   --h-fokus       35 % Anthr. 45 % Weiß  ruhiger Tastatur-Fokus (statt Akzent-Ring)
   Kontraste (WCAG): hell Text 11,5 · Neben 5,2/4,8 · Stark 16,8; dunkel Text 13,1/11,9 ·
   Neben 7,1/6,5/5,8 · Stark 16,8/15,3/13,6 (auf Grund/Karte/Ebene-2); dunkel Neben auf --h-tief 4,9.
   ============================================================ */
html.kern{
  --h-grund:#FFFFFF; --h-ebene:#F4F4F3; --h-ebene-2:#E9E9E7; --h-auf-ebene:#FFFFFF;
  --h-fuell:rgba(30,29,28,.05); --h-fuell-hover:rgba(30,29,28,.09);
  --h-stark:#1E1D1C; --h-text:#3A3936; --h-neben:#6E6C69; --h-umkehr:#FFFFFF;
  --h-ok:#4B7457; --h-rot:#B0412E; --h-blau:#4B5F73; --h-gold:#8A6A2E;
  --h-ok-flaeche:rgba(75,116,87,.10); --h-rot-flaeche:rgba(176,65,46,.09);
  --h-blau-flaeche:rgba(75,95,115,.10); --h-gold-flaeche:rgba(138,106,46,.12);
  --h-ak-schrift:var(--akzent-tief,#1E1D1C); --h-ak-flaeche:var(--akzent-hell,rgba(30,29,28,.06));
  --h-schwebend:0 14px 36px rgba(30,29,28,.12);
  --h-schatten:rgba(30,29,28,.12);
  --h-scrim:rgba(30,29,28,.42); --h-scrim-leise:rgba(30,29,28,.28);
  --h-stark-rgb:30,29,28;
  --h-sans:'MAYA Grotesk','Mona Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Tool */
  --h-seite:#F3F3F1; --h-karte:var(--h-grund); --h-unter:var(--h-ebene);
  --h-tief:var(--h-ebene-2); --h-tief-2:#DCDBD8; --h-linie:#E4E4E1;
  --h-mittel:#8A8884; --h-leise:#B9B7B3;
  /* Fläche eines Bausteins (Rechner-Schublade u. a.), Drüberfahren, ruhiger Tastatur-Fokus */
  --h-flaeche:var(--h-karte); --h-flaeche-hover:#FAFAF9; --h-fokus:rgba(30,29,28,.35);
  color-scheme:light;
}
html.kern.k-dunkel{
  --h-grund:#141413; --h-ebene:#1E1D1C; --h-ebene-2:#282725; --h-auf-ebene:#282725;
  --h-fuell:rgba(244,244,243,.07); --h-fuell-hover:rgba(244,244,243,.12);
  --h-stark:#F4F4F3; --h-text:#DAD9D6; --h-neben:#A3A19C; --h-umkehr:#1E1D1C;
  --h-ok:#8DB89A; --h-rot:#E0806E; --h-blau:#9FB3C6; --h-gold:#D9A86A;
  --h-ok-flaeche:rgba(141,184,154,.14); --h-rot-flaeche:rgba(224,128,110,.10);
  --h-blau-flaeche:rgba(159,179,198,.14); --h-gold-flaeche:rgba(217,168,106,.14);
  --h-ak-schrift:var(--akzent-dunkel,#F4F4F3); --h-ak-flaeche:rgba(var(--akzent-rgb,244,244,243),.16);
  --h-schwebend:0 18px 44px rgba(0,0,0,.55);
  --h-schatten:rgba(0,0,0,.5);
  --h-scrim:rgba(0,0,0,.62); --h-scrim-leise:rgba(0,0,0,.55);
  --h-stark-rgb:244,244,243;
  --h-seite:#141413; --h-karte:#1E1D1C; --h-unter:#282725;
  --h-tief:#34322F; --h-tief-2:#403E3A; --h-linie:#3A3835;
  --h-mittel:#8E8C87; --h-leise:#5F5D59;
  --h-flaeche-hover:#232220; --h-fokus:rgba(244,244,243,.45);
  color-scheme:dark;
}