/* Token-Layer. Enthaelt ausschliesslich Custom Properties -- alle Farbwerte der App stehen hier und nirgendwo sonst. styles.css enthaelt keine literale Farbe. Das Bootstrap-Script im von index.html loest den Modus auf und setzt immer ein konkretes data-theme="light"|"dark" auf . Der gewaehlte Modus (auto|light|dark) steht getrennt davon in data-theme-mode. Deshalb kommen die Dark-Werte hier genau einmal vor: eine zusaetzliche @media (prefers-color-scheme: dark)-Variante muesste denselben Block duplizieren und wuerde mit der Zeit auseinanderlaufen. Im Auto-Modus haelt ein matchMedia-Listener in app.js das Attribut nach. */ :root, [data-theme="light"] { color-scheme: light; /* Flaechen */ --bg-page: #f4f7f4; --bg-wash-a: rgba(66, 119, 200, 0.12); --bg-wash-b: rgba(217, 108, 82, 0.12); --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #fbfdfb; --surface-accent: #fdf4e8; --tooltip-bg: #ffffff; /* Text */ --ink: #17201f; --ink-muted: #5a6763; --ink-subtle: #7c8783; /* Linien */ --line: #d9e2dd; --line-strong: #b9c7c1; /* Akzent */ --accent: #1a7f78; --accent-strong: #0f5f5b; --accent-soft: rgba(26, 127, 120, 0.1); --accent-contrast: #ffffff; /* Semantisch */ --warm: #d96c52; --amber: #efb84d; --blue: #4277c8; --danger: #a8371f; --danger-soft: rgba(168, 55, 31, 0.09); --danger-line: rgba(168, 55, 31, 0.32); /* Chart */ --chart-line: #1a7f78; --chart-area-from: rgba(26, 127, 120, 0.24); --chart-area-to: rgba(26, 127, 120, 0.02); --chart-grid: #dfe7e3; --chart-dot: #d96c52; --chart-dot-halo: #ffffff; --chart-label: #5a6763; /* Streuband (Min/Max je Bucket) -- dieselbe Farbe wie die Linie, nur zurueckgenommen, damit der Mittelwert vorn bleibt. */ --chart-band: rgba(26, 127, 120, 0.16); --chart-bar: #4277c8; /* Sonstiges */ --focus-ring: rgba(26, 127, 120, 0.45); --shadow-sm: 0 6px 16px rgba(23, 32, 31, 0.06); --shadow-md: 0 18px 50px rgba(23, 32, 31, 0.08); --skeleton: rgba(23, 32, 31, 0.08); --skeleton-shine: rgba(23, 32, 31, 0.14); } [data-theme="dark"] { color-scheme: dark; /* Flaechen -- Elevation entsteht ueber hellere Flaechen, nicht ueber Schatten */ --bg-page: #0d1413; --bg-wash-a: rgba(66, 119, 200, 0.1); --bg-wash-b: rgba(217, 108, 82, 0.07); --surface: #16201e; --surface-raised: #1b2624; --surface-sunken: #121b1a; --surface-accent: #1f2a26; --tooltip-bg: #1b2624; /* Text */ --ink: #e8efec; --ink-muted: #9aa8a3; --ink-subtle: #7b8985; /* Linien */ --line: #2a3835; --line-strong: #3b4a46; /* Akzent -- aufgehellt, #1a7f78 erreicht auf dunklem Grund keine 3:1 */ --accent: #4fd1c5; --accent-strong: #7ee3d9; --accent-soft: rgba(79, 209, 197, 0.12); --accent-contrast: #06201d; /* Semantisch */ --warm: #f08b70; --amber: #f5c667; --blue: #7ba5e8; --danger: #ff9b83; --danger-soft: rgba(255, 155, 131, 0.12); --danger-line: rgba(255, 155, 131, 0.34); /* Chart */ --chart-line: #4fd1c5; --chart-area-from: rgba(79, 209, 197, 0.26); --chart-area-to: rgba(79, 209, 197, 0.02); --chart-grid: #2a3835; --chart-dot: #f08b70; --chart-dot-halo: #16201e; --chart-label: #9aa8a3; --chart-band: rgba(79, 209, 197, 0.2); --chart-bar: #7ba5e8; /* Sonstiges */ --focus-ring: rgba(126, 227, 217, 0.55); --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.35); --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.45); --skeleton: rgba(232, 239, 236, 0.07); --skeleton-shine: rgba(232, 239, 236, 0.14); }