/* ================================================================= Energietracker v1.2.0 — Design Tokens Industrial dark theme. DM Mono for numbers, DM Sans for prose. Aligned with v0.9.0 palette so the look stays consistent. ================================================================= */ :root { /* ── Surfaces ─────────────────────────────────────────────────── */ --bg-0: #080c12; /* page background — deeper than v1.0.0 */ --bg-1: #111827; /* card / sidebar background */ --bg-2: #1c2636; /* nested surface, table header, button bg */ --bg-3: #243044; /* hover / focus / icon-box */ --bg-overlay: rgba(8, 11, 16, 0.85); /* ── Borders ──────────────────────────────────────────────────── */ --border-1: rgba(255, 255, 255, 0.07); --border-2: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.20); /* ── Text ───────────────────────────────────────────────────────── v2.2.0 — `--text-2` und `--text-3` waren mit #6b7f99 / #6b7385 auf Kartenhintergrund (--bg-1) bei 4,38:1 bzw. darunter und verfehlten damit WCAG AA (4,5:1) für normalen Text. Sie tragen als `.muted` fast alle Sekundärtexte der App, oft bei 11–13 px. Jetzt aufgehellt auf 5,5:1 bzw. 5,0:1 gegen --bg-1. Das helle Theme war mit 7,6:1 nie betroffen. */ --text-1: #dce8f5; /* primary */ --text-2: #8ba0ba; /* secondary / muted */ --text-3: #8590a6; /* tertiary */ --text-disabled:#4a5f80; /* ── Brand / accents ──────────────────────────────────────────── */ --accent: #4a90e2; --accent-hover:#74acea; /* ── Utility colors ─────────────────────────────────────────────── Seit v2.2.0 kommen `--util-` und `--util--soft` zur Laufzeit aus der Utilities-SSOT (public/js/lib/utility-theme.js erzeugt sie aus /api/utilities). Hier stehen sie NICHT mehr: Die handgepflegte Liste kannte nur gas/strom/wasser, sodass die fünf später ergänzten Verbrauchsarten ungefärbt blieben — und bei Gas und Strom wich sie von der SSOT ab, weshalb Diagramm und Bedienelement verschiedene Farben zeigten. Eine neue Verbrauchsart braucht jetzt nur noch einen Eintrag in src/Config/Utilities.php. `--util` / `--util-soft` (ohne Key) werden pro [data-utility]-Container ebenfalls dort gesetzt. Der neutrale Vorbelegungswert hier greift nur, solange die Utilities noch nicht geladen sind. */ --util: var(--accent); --util-soft: color-mix(in srgb, var(--accent) 14%, transparent); /* Schriftfarbe auf gefüllter Utility-Fläche (Buttons, aktive Pillen); außerhalb einer Verbrauchsart die des Akzents (v2.11.0). */ --util-fg: var(--accent-fg); /* Semantic accent colors used in v0.9.0 KPI ribbons */ --c-blue: #4a90e2; --c-violet: #8b5cf6; --c-yellow: #f5c842; --c-red: #ef4444; --c-blue-soft: rgba(74, 144, 226, 0.12); --c-violet-soft: rgba(139, 92, 246, 0.14); --c-yellow-soft: rgba(245, 200, 66, 0.14); /* ── Semantic ─────────────────────────────────────────────────── */ --success: #2de8a4; --warning: #f5c842; /* v2.11.0 (Review UI-09) — #ef4444 kam als Schrift auf seiner eigenen Tönung (Badge „Überfällig") auf 4,2:1; #f87171 auf 5,6:1. Gefüllte Flächen mit weißer Schrift nehmen --danger-strong (4,8:1 statt 3,8:1). */ --danger: #f87171; --danger-strong: #dc2626; --info: #4a90e2; /* Schrift auf Akzentfläche (Primärknopf): dunkel auf dem hellen Blau */ --accent-fg: #0a0d12; --success-soft:rgba(45, 232, 164, 0.14); --warning-soft:rgba(245, 200, 66, 0.14); --danger-soft: rgba(239, 68, 68, 0.14); /* ── Fonts ────────────────────────────────────────────────────── */ --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "DM Mono", "SF Mono", Menlo, Consolas, monospace; /* ── Sizes ────────────────────────────────────────────────────── */ --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; /* ── Spacing ──────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ── Radii ────────────────────────────────────────────────────── */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; /* ── Shadows ──────────────────────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 4px 16px rgba(0,0,0,0.35); --shadow-3: 0 10px 32px rgba(0,0,0,0.5); /* ── Layout ───────────────────────────────────────────────────── */ --topbar-h: 48px; /* v2.11.0 — Kopfleiste samt Statusleiste der Home-Bildschirm-App (viewport-fit=cover); ohne Notch ist env(…) 0 */ --topbar-total: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); --tabbar-h: 58px; --sidebar-w: 220px; --content-max: 1400px; --transition: 150ms ease-out; } /* Die [data-utility="…"]-Bindungen erzeugt utility-theme.js zur Laufzeit für ALLE Verbrauchsarten der SSOT — siehe Kommentar oben. */ /* ================================================================= Light theme — v1.2.0 Aktiviert über `data-theme="light"` auf (gesetzt vom Anti-Flash-Skript in index.php bzw. vom Theme-Toggle). Überschreibt nur die Tokens, die in beiden Themes inhaltlich unterschiedlich sind; die Layout- und Größentokens bleiben gemeinsam. ================================================================= */ [data-theme="light"] { /* ── Surfaces ─────────────────────────────────────────────────── */ --bg-0: #f6f8fa; --bg-1: #ffffff; --bg-2: #eef2f7; --bg-3: #dde4ed; --bg-overlay: rgba(15, 23, 42, 0.45); /* ── Borders ──────────────────────────────────────────────────── */ --border-1: rgba(15, 23, 42, 0.08); --border-2: rgba(15, 23, 42, 0.14); --border-strong: rgba(15, 23, 42, 0.22); /* ── Text ─────────────────────────────────────────────────────── */ --text-1: #0f172a; --text-2: #475569; /* v2.2.0 — #64748b erreichte auf --bg-2 (#eef2f7, Tabellenkopf und verschachtelte Flächen) nur 4,23:1. Leicht abgedunkelt auf 5,0:1. */ --text-3: #566276; --text-disabled: #8595ab; /* ── Brand / accents — dunklere Schattierungen für Weiß-Bg-Kontrast */ --accent: #2563eb; --accent-hover:#1d4ed8; /* Die Utility-Farben leitet utility-theme.js für das helle Theme selbst aus der SSOT ab (color-mix mit Schwarz), damit sie auf weißem Grund den Kontrastanforderungen genügen. */ --c-blue: #2563eb; --c-violet: #7c3aed; --c-yellow: #d97706; --c-red: #b91c1c; --c-blue-soft: rgba( 37, 99, 235, 0.10); --c-violet-soft: rgba(124, 58, 237, 0.10); --c-yellow-soft: rgba(217, 119, 6, 0.10); /* ── Semantic ─────────────────────────────────────────────────── v2.11.0 (Review UI-09) — auf Weiß gemessen: Grün 3,8 → 5,5, Orange 3,2 → 5,6, Rot 4,8 → 6,5 (auf der eigenen Tönung 4,1 → 5,5). Salden, „Abschlag €", Empfehlungstitel und Effizienzklassen erreichen damit AA. */ --success: #047857; --warning: #a84d07; --danger: #b91c1c; --danger-strong: #b91c1c; --info: #2563eb; /* Weiß auf #2563eb: 5,2:1 (dunkle Schrift kam auf 3,8:1) */ --accent-fg: #ffffff; --success-soft:rgba( 5, 150, 105, 0.10); --warning-soft:rgba(217, 119, 6, 0.10); --danger-soft: rgba(220, 38, 38, 0.10); /* ── Shadows — weicher und dunkler auf hellem Grund ──────────── */ --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-2: 0 4px 16px rgba(15, 23, 42, 0.08); --shadow-3: 0 10px 32px rgba(15, 23, 42, 0.12); }