/* TALVAXO LIGHT MODE (Nutzerauftrag 2026-08-29, "Dark/Light Mode umschaltbar, eigene CSS-Datei fuer Light Mode"; ueberarbeitet 2026-08-29 zweite Runde: Sidebar soll mitschalten + Palette grauer). Ueberschreibt ausschliesslich FARB-Tokens aus tokens.css, scoped hinter [data-theme="light"] auf — ohne dieses Attribut (Standard = Dark Mode) hat diese Datei keinerlei Wirkung, das bestehende Dark-Theme bleibt exakt unveraendert. Typografie-/Abstands-/Radius-/Transition-Tokens (--font-*, --space-*, --radius-*, --fs-*, --transition-*, --icon-*) sind theme-neutral und werden hier bewusst NICHT wiederholt. Aliase, die in tokens.css bereits als var(--panel)/var(--text)/etc. definiert sind (z.B. --surface-card, --talvaxo-bg-card, --status-good), muessen hier ebenfalls NICHT erneut deklariert werden — CSS Custom Properties loesen var()-Referenzen live gegen den aktuell kaskadierten Wert auf, jede Neudeklaration der Basis-Tokens hier reicht automatisch bis in alle Aliase durch. Die Sidebar (.app-nav, siehe components.css) IST Teil dieser Datei (Nutzerauftrag: "Menueleiste soll auch in den Leitmode gehen") — sie ueberschreibt hier die --nav-*-Tokens aus tokens.css mit eigenen hellen Werten, inkl. --nav-active-accent (Marken-Blau statt Cyan, da helles Cyan auf hellem Sidebar-Grund zu wenig Kontrast haette). */ :root[data-theme="light"] { color-scheme: light; /* ============================================================ Flaechen — Nutzerauftrag 2026-08-29 (Runde 3, "darf nicht ganz weiss sein, sondern muss grau sein"): Runde 2 (#DFE3EA/#EDEFF4) blieb beim Rendern noch zu nah an Weiss, kaum als Grau wahrnehmbar. Jetzt deutlich sichtbares, neutraleres Grau (weniger Blaustich, tiefere Werte) fuer Hintergrund UND Karten/"Banner" — die Marken-Navy-Herkunft bleibt als leichter kuehler Unterton erhalten, dominiert aber nicht mehr die Wahrnehmung als "fast weiss". Runde 4/5 ("Hintergrund noch etwas grauer/dunkler, aber NUR der Hintergrund"): --bg zweimal nochmal vertieft, --panel/-alt/-raised weiterhin bewusst UNVERAENDERT gelassen — dadurch wächst der Kontrast zwischen Seitenhintergrund und Karten/"Banner" zusaetzlich. ============================================================ */ --bg: #9CA2AF; --panel: #DADDE3; --panel-alt: #CDD1D9; --panel-raised: #BEC2CC; --border: #A8ADB9; /* Platform Finish II (Part F §55, "borders visible enough without turning the app into a grid"): 0.20 -> 0.28 Alpha — bei Runde 3-6 (siehe Flaechen-Kommentar oben) wurde die Flaechenhierarchie mehrfach vertieft, die Kantenlinie selbst blieb dabei unveraendert und wirkte beim Rendern zu duenn, um Karten wie .hero-card (die KEINEN eigenen Schatten hatten, siehe dashboard.css-Fix unten) klar vom Seitenhintergrund abzugrenzen. */ --border-soft: rgba(16, 28, 51, 0.28); /* Platform Finish II (Part F §46, "background depth" — reales Rendering zeigte: die Dark-Mode-abgestimmten 0.05-0.06-Alpha-Glow-Flecken hinter dem Content sind auf der hellen Flaeche praktisch unsichtbar, siehe base.css body{}). Staerkere, markenkonsistente Blau/Violett-Tonung statt Teal/Indigo (Teal/Indigo sind im Light Mode bereits als Status-/ Trend-Akzentfarben reserviert, siehe --teal/--indigo oben — Blau/Violett bleiben frei fuer diese rein atmosphaerische Rolle und passen zur TALVAXO-Markenpalette). */ --bg-glow-1: rgba(0, 122, 255, 0.09); --bg-glow-2: rgba(122, 92, 255, 0.07); /* Sidebar (.app-nav) — Nutzerauftrag 2026-08-29 (Runde 2/3): schaltet mit ins Light Mode statt dunkel-navy zu bleiben, im selben deutlich grauen Ton wie der Rest der Flaeche. Leicht dunkler als --bg, damit sie als eigene Flaeche erkennbar bleibt, Text-Tokens spiegeln --text/-muted/-dim. Runde 6 ("Menueband etwas transparent, in Dark UND Light Mode"): RGBA statt opakem Hex — siehe Begruendung/backdrop-filter-Hinweis in tokens.css bei derselben Token-Gruppe. */ --nav-bg-top: rgba(210, 213, 221, 0.78); --nav-bg-bottom: rgba(186, 190, 201, 0.78); /* Nutzerauftrag 2026-08-30 ("Sidebar soll immer den milchigen Effekt haben") — siehe tokens.css fuer die volle Begruendung. */ --nav-bg-top-loading: rgba(210, 213, 221, 0.90); --nav-bg-bottom-loading: rgba(186, 190, 201, 0.90); --nav-text: #101C33; --nav-text-muted: #46536C; --nav-text-dim: #4A5568; --nav-hover-bg: #BEC2CC; --nav-active-accent: var(--talvaxo-blue); /* Text */ --text: #101C33; /* TALVAXO Beta Release 1.0 (real axe-core finding, live browser audit, light theme): --text-muted #4E5D78 measured 4.33:1 on this theme's system-health-chip background (#cdd1d9) -- just under WCAG AA's 4.5:1 for normal text. --text-dim #8996AC measured only 1.95:1/2.63:1 on its actual usage backgrounds (#cdd1d9/#eaf1fb) -- same class of gap as the dark-mode --text-dim fix above, mirrored here for light mode. #46536C/#4A5568 clear every measured usage with margin (4.68-7.27:1). */ --text-muted: #46536C; --text-dim: #4A5568; /* See tokens.css's own comment on --text-muted-on-bg: --text-muted directly on the raw --bg (#9CA2AF) only reaches 3.02:1 in light mode (admin.html's/legal-*.html's ".account-back" link) -- #28303F clears it at 5.17:1. */ --text-muted-on-bg: #28303F; /* Akzentfarben — gegenueber Dark Mode vertieft (nicht 1:1 uebernommen): die hellen/leuchtenden Dark-Mode-Werte (z.B. Teal #2FD9C4) haben auf dunklem Grund ~8:1 Kontrast, auf weissem Grund dagegen nur ~1.6:1 (fast unlesbar als Text/Icon-Farbe). Vertiefte Toene derselben Farbfamilie halten echten AA-Kontrast (~4.5:1+) auf --panel/--bg. Die *-dim-Varianten bleiben bewusst auf dem URSPRUENGLICHEN, hellen Ton (nur hoehere Alpha als im Dark Mode, da ein duenner Farbschleier auf Weiss schwaecher wirkt als auf Navy) — sie sind Chip-/Badge-HINTERGRUENDE, keine Textfarbe. TALVAXO Beta Release 1.0 (real axe-core finding, live browser audit): the original #0C7A6B did NOT actually reach this comment's own stated ~4.5:1+ goal against several real usage backgrounds (--panel #DADDE3 measured 3.84:1, --panel-raised #BEC2CC measured 2.93:1, the legal-page amber-notice background measured 3.54:1) -- #08564A clears every measured usage with margin (4.83-7.57:1). */ --teal: #08564A; --teal-dim: rgba(47, 217, 196, 0.18); /* Now equal to the corrected --teal above -- kept as its own token (see tokens.css) so dark mode, where the base --teal/--panel-raised pairing already passes, is untouched. */ --teal-on-panel: var(--teal); /* Product Experience Closure Mandat §67 (real, systemic finding: ~66 direct uses of var(--talvaxo-cyan) as foreground text/icon/border color across auth-pages.css, components.css, dashboard.css, members.css, login.css, public.css, none of them theme-aware) -- unlike --teal/ --amber above, this token had NO light-mode override at all: the Dark-Mode value #00E5FF measured ~1.2:1 against --panel-raised, effectively invisible. Same remediation approach as --teal above (deepen within the same hue family rather than substitute a different color, so every existing call site is fixed automatically via the custom-property cascade -- see this file's own header comment on why base-token redeclaration is sufficient, no per-callsite edit needed): #003C4A measured 4.7-10.59:1 across every real usage surface checked (--bg, --panel, --panel-alt, --panel-raised, --surface-section, --surface-interactive, --surface-selected) -- the widest surface sweep of any token in this file, since --talvaxo-cyan's 50+ call sites span more distinct backgrounds than any single other accent color. Deliberately still visually distinct from --teal (#003C4A leans blue-cyan ~193°, --teal leans green-teal ~167°) so the two keep their separate brand-semantic meanings (Section 5: Cyan = Intelligence/Analysis) rather than converging to the same color once both are deepened for light mode. */ --talvaxo-cyan: #003C4A; /* TALVAXO Beta Release 1.0 (real axe-core finding, live browser audit): #8A5A0F measured 4.0:1 as bold 13px text on the legal-notice amber-dim background (#DED3C5) -- just under WCAG AA's 4.5:1 (13px bold does not qualify for the reduced "large text" 3:1 threshold, which starts at ~18.66px bold). #70480C clears it at 5.43:1; every other --amber-dim/--amber pairing already tested clean across the full page sweep, so this narrower fix (not a new dedicated token) is sufficient. */ --amber: #70480C; --amber-dim: rgba(240, 169, 78, 0.20); --crimson: #C22F41; /* v10.3.1 (Account Finalization, Mandat §33-34 "Light Mode... avoid low-contrast borders"): 0.16 war real zu schwach -- deutlich niedriger als der Alpha-Zuschlag jedes Nachbar-Tokens hier (teal/amber/indigo/moss bekommen alle +0.06 bis +0.08 gegenueber Dark Mode, crimson bisher nur +0.04). Sichtbar am Rand von .acct-btn--danger ("Überall abmelden"/"2FA deaktivieren") auf der Account-Seite: der Rahmen war auf hellem Grund kaum erkennbar. */ --crimson-dim: rgba(239, 91, 107, 0.24); --indigo: #4A50CC; --indigo-dim: rgba(139, 149, 246, 0.18); --moss: #5C7A2E; --moss-dim: rgba(168, 201, 114, 0.20); /* status-neutral-dim referenziert im Dark Mode rgba(255,255,255,0.04) (ein heller Schleier auf dunklem Grund) — auf Weiss braucht dieselbe "neutrale Chip-Flaeche" die umgekehrte Richtung. */ --status-neutral-dim: rgba(16, 28, 51, 0.05); --hairline: rgba(16, 28, 51, 0.10); --neutral-chip-bg: rgba(16, 28, 51, 0.06); /* v10.2.3 Light Mode Final Pass (Mandat §32-35, "weekly view readability" -- real gerendert geprueft): --panel-alt (#CDD1D9) und die Wochenkarten-Flaeche (--surface-hero, ~#D2DAE8) liegen im Light Mode fast auf derselben Helligkeitsstufe -- der leere (0%) Wochenfortschrittsbalken (.wk-progress-bar, dashboard.css) war dadurch als Flaeche kaum vom Kartenhintergrund zu unterscheiden, obwohl der gefuellte Teil selbst (die Blau/Cyan/Violet-Gradient-Fill) klar sichtbar ist. Derselbe dunkel-auf-hell-Ueberlagerungs-Ton wie --border-soft/--hairline oben statt eines neuen, unpassenden Grautons. */ --wk-progress-track: rgba(16, 28, 51, 0.16); /* Schatten — auf Weiss deutlich subtiler noetig als auf Navy, sonst wirken Karten schwer/schmutzig statt leicht erhaben. Navy-getoentes Schwarz (--text) statt reinem #000 fuer weichere Schatten, dieselbe Technik wie viele Light-Mode-Systeme. */ --shadow-sm: 0 1px 3px rgba(16, 28, 51, 0.12); --shadow-md: 0 8px 20px rgba(16, 28, 51, 0.16); --shadow-lg: 0 16px 40px rgba(16, 28, 51, 0.20); /* Part F §48/49 ("cards must feel like they float above the background, avoid heavy black shadows"): 0.09 -> 0.16 — real gerendert war 0.09 gegen die texturierte Wellen-Flaeche kaum wahrnehmbar (siehe .hero-card, das bisher GAR KEINEN Schatten hatte, unten in dashboard.css nachgeruestet). Bleibt navy-getoent statt Schwarz, nur die Alpha ist staerker, kein neuer Ton. */ --shadow-raised: 0 3px 12px rgba(16, 28, 51, 0.16); --shadow-hover: 0 12px 28px rgba(16, 28, 51, 0.18); --shadow-glow-ready: 0 0 0 1px rgba(12, 122, 107, 0.30), 0 8px 24px rgba(12, 122, 107, 0.12); --shadow-glow-caution: 0 0 0 1px rgba(138, 90, 15, 0.30), 0 8px 24px rgba(138, 90, 15, 0.12); --shadow-glow-recovery: 0 0 0 1px rgba(194, 47, 65, 0.30), 0 8px 24px rgba(194, 47, 65, 0.12); /* Depth/Surface-System — "gefuellte" interaktive Flaechen (CTA-Buttons, ausgewaehlte Kacheln) bekommen helle Blau-Tints statt dunkler Navy-Fuellungen, weil sie mit var(--text) beschriftet sind (siehe .dh-cta in dashboard.css) — var(--text) ist im Light Mode dunkel, dunkler Text auf dunkler Flaeche waere unlesbar. Hell + dunkler Text ergibt denselben klaren "gefuellter Button"- Charakter wie dunkel + hellem Text im Dark Mode. */ --surface-section: #EAF1FB; --surface-interactive: #D3E6FF; --surface-selected: #B9D8FF; /* Milchglas-Karten (Nutzerauftrag 2026-08-29, siehe dashboard.css/components.css backdrop-filter-Verbrauchsstellen): helles, halbtransparentes Weiss statt dunklem Navy-Glas, damit dieselbe Wellen-Hintergrund-Animation im Light Mode als heller Frost statt als dunkler Fleck durchscheint. Alpha 0.76 -> 0.87 (Nutzerauftrag 2026-08-29, Folgekorrektur): die zuvor behobene Wellen- Sichtbarkeit (source-over + alphaBoost im Light Mode, siehe wave-canvas-engine.js) liess die Welle durch dieselbe Kartenflaeche zu stark durchscheinen — Karten wirkten "zu durchsichtig". */ /* v10.2.2 (Mandat §61-63 "TALVAXO IN LIGHT" — Restwirkung von v10.2.1: nur die Stage bekam einen kuehlen Blauton, JEDE andere Karte (Woche, Road to Goal, Trends, Capability, ...) teilte sich weiterhin dieses neutrale Grau -- exakt das im Mandat benannte "generic Enterprise SaaS"-Gefuehl, weil Karte und Hintergrund (--bg: #9CA2AF, ebenfalls neutral) kaum unterscheidbar waren. Jetzt sichtbar kuehler/blauer (nicht so stark wie --surface-stage, das bleibt die hellste Flaeche der Seite) UND spuerbar heller als --bg, damit jede Karte wieder wie eine eigene, angehobene Flaeche wirkt statt mit dem Hintergrund zu verschmelzen. */ --surface-hero: linear-gradient(160deg, rgba(226, 232, 242, 0.89) 0%, rgba(210, 218, 232, 0.89) 55%, rgba(196, 205, 222, 0.89) 100%); /* v10.2.1 (Mandat Teil 34-37, "too many white/light-grey cards... insufficient perceived depth" / "distinct luminous cool surface" fuer die Stage): --surface-hero oben ist ein neutrales Grau -- auf einer ebenfalls grauen --bg (#9CA2AF) reicht das nicht, um die Stage als "die wichtigste Flaeche der Seite" erkennbar abzusetzen. --surface-stage ist sichtbar HELLER und deutlich blau- getoent statt grau (naeher an Weiss mit TALVAXO-Blau-Unterton) -- dieselbe Markenfarbfamilie wie --bg-glow-1 oben, nur als eigene, luminose Kartenflaeche statt eines atmosphaerischen Flecks. */ --surface-stage: linear-gradient(160deg, rgba(241, 247, 255, 0.96) 0%, rgba(226, 237, 251, 0.94) 55%, rgba(207, 224, 246, 0.91) 100%); /* Scrim hinter dem Feedback-Modal — siehe tokens.css fuer die volle Begruendung der Trennung von --loader-page-scrim. */ --loader-scrim: rgba(154, 160, 172, 0.82); /* Nutzerauftrag 2026-08-30 ("Welle beim Seitenwechsel nicht sichtbar") — deutlich transparenter als das Modal-Scrim, damit die (jetzt hellere) Welle im Light Mode waehrend des Ladens sichtbar bleibt statt vom Scrim verdeckt zu werden. */ --loader-page-scrim: rgba(154, 160, 172, 0.38); /* --color-weather ist im Dark Mode ein eigener Hex-Wert (kein Alias) — muss hier separat vertieft werden, sonst bleibt das helle Dark-Mode-Cyan als Text auf Weiss stehen. */ --color-weather: #1B7FA8; }