/* kern.css — Designkern von fibu: alle Farbvariablen mit ihren Standardwerten, hell und dunkel.
   Variablennamen und Standardwerte wie im CRM (dashboard.css), damit Designs zwischen CRM und fibu
   austauschbar sind (CLAUDE.md „Oberfläche und Design", CRM docs/designprofile.md).

   Ein Design unter designs/hell|dunkel/<name>.css überschreibt einzelne dieser Werte und wird nach allen
   anderen Stylesheets geladen. Was ein Design nicht setzt, gilt von hier. Alle übrigen CSS-Dateien von fibu
   verwenden ausschliesslich diese Variablen, keine festen Farben.

   Modulfarbe fibu: Violett nach dem Kreditoren-Menü des CRM, aber abgedunkelt auf rgb(180, 40, 230),
   damit weisse Schrift darauf 4.79:1 erreicht (das CRM-Violett rgb(204, 51, 255) schafft nur 3.83:1).
   Entscheid gblanke 28.10.2026. In beiden Modi gleich.
   Login-Hintergrund: leichter Verlauf vom CRM-Violett rgb(204, 51, 255) zu rgb(150, 20, 200). Darauf steht
   nur grosse, fette Schrift (Ziel 3:1); Formular und Hinweise liegen auf der Login-Karte (--flaeche-inhalt).
   Im Dunkelmodus gedämpfter Verlauf rgb(112, 36, 140) → rgb(64, 18, 84).

   Abweichungen vom CRM-Standard (dort unter 4.5:1): --fuss-zart hell/dunkel, im Dunkelmodus
   --schrift-zart, --akzent und --akzent-hover. Namen bleiben gleich, nur die Werte sind angehoben.
   Kontrast prüfen: python3 tools/kontrast.py */

html[data-theme-mode="light"] { color-scheme: light; }
html[data-theme-mode="dark"]  { color-scheme: dark; }

:root {
	--flaeche-seite:      rgb(225, 225, 225);
	--flaeche-inhalt:     rgb(252, 252, 252);
	--flaeche-kopf:       rgb(228, 230, 232);
	--flaeche-feld:       rgb(255, 255, 255);
	--flaeche-kopfzeile:  rgb(224, 226, 229);
	--flaeche-knopf:      rgb(238, 240, 242);
	--schrift:            rgb(35, 35, 35);
	--schrift-zart:       rgb(90, 96, 102);
	--schrift-auf-akzent: rgb(255, 255, 255);
	--schrift-kopf:       rgb(40, 44, 48);
	--schrift-kopf-zart:  rgb(70, 74, 78);
	--akzent:             rgb(0, 120, 170);
	--akzent-hover:       rgb(0, 102, 150);
	--link:               rgb(0, 92, 158);
	--rahmen:             rgb(200, 205, 210);
	--rahmen-zart:        rgb(214, 218, 222);
	--rahmen-kachel:      rgb(214, 218, 222);
	--rahmen-aktiv:       rgb(0, 120, 170);
	--fuss-von:           rgb(0, 132, 59);
	--fuss-mitte:         rgb(0, 110, 120);
	--fuss-bis:           rgb(0, 102, 204);
	--schrift-fuss:       rgb(255, 255, 255);
	--schrift-fuss-zart:  rgb(248, 250, 252);

	--modul-accent:       rgb(180, 40, 230);
	--modul-accent-hover: rgb(153, 34, 196);
	--modul-on:           rgb(255, 255, 255);
	/* Violette Schrift auf der Kopffläche (Schriftzug „fibu"). Setzt ein Design eine dunkle Kopffläche,
	   muss es auch diesen Wert setzen (wie --schrift-kopf). */
	--modul-schrift-kopf: rgb(144, 32, 184);
	--modul-verlauf-von:  rgb(204, 51, 255);
	--modul-verlauf-bis:  rgb(150, 20, 200);
}

html[data-theme-mode="dark"] {
	--flaeche-seite:      rgb(24, 27, 29);
	--flaeche-inhalt:     rgb(33, 37, 40);
	--flaeche-kopf:       rgb(20, 23, 25);
	--flaeche-feld:       rgb(56, 61, 66);
	--flaeche-kopfzeile:  rgb(48, 53, 60);
	--flaeche-knopf:      rgb(44, 48, 52);
	--schrift:            rgb(220, 223, 226);
	--schrift-zart:       rgb(168, 174, 182);
	--schrift-auf-akzent: rgb(255, 255, 255);
	--schrift-kopf:       rgb(214, 218, 222);
	--schrift-kopf-zart:  rgb(170, 176, 182);
	--akzent:             rgb(0, 118, 168);
	--akzent-hover:       rgb(0, 106, 152);
	--link:               rgb(125, 190, 230);
	--rahmen:             rgb(90, 96, 102);
	--rahmen-zart:        rgb(74, 79, 84);
	--rahmen-kachel:      rgb(74, 79, 84);
	--rahmen-aktiv:       rgb(125, 190, 230);
	--fuss-von:           rgb(0, 132, 59);
	--fuss-mitte:         rgb(0, 110, 120);
	--fuss-bis:           rgb(0, 102, 204);
	--schrift-fuss:       rgb(255, 255, 255);
	--schrift-fuss-zart:  rgb(248, 250, 252);

	--modul-accent:       rgb(180, 40, 230);
	--modul-accent-hover: rgb(153, 34, 196);
	--modul-on:           rgb(255, 255, 255);
	--modul-schrift-kopf: rgb(214, 137, 241);
	/* Im Dunkelmodus gedämpft: eine ganzflächig helle Farbe blendet auf dunklem Bildschirm. */
	--modul-verlauf-von:  rgb(112, 36, 140);
	--modul-verlauf-bis:  rgb(64, 18, 84);
}