/* ══════════════════════════════════════════════════════════════════════════ PortfoLeo — DESIGN-TOKENS (Single Source of Truth) ══════════════════════════════════════════════════════════════════════════ Diese Datei ist die EINZIGE Stelle, an der Farben, Flaechen, Radien und Typo-Grundwerte der App definiert werden. Sie wird in base.html VOR style.css geladen. Sie ist zugleich die Bruecke zu claude.ai/design: dieselbe Datei liegt im Design-System-Projekt "PortfoLeo Design System". Wird sie dort geaendert, holt eine Claude-Code-Session sie per DesignSync hierher — und die ganze App zieht nach, ohne dass ein Template angefasst wird. ── Herkunft (Umzug 2026-08-03, Werte UNVERAENDERT uebernommen) ────────── style.css:681-696 "CodeX Facelift B: Wealth OS" — die lebende Palette style.css:1795-1802 "GUI tuning pass" — additive Tokens, kein Konflikt style.css:4005-4070 --pl-s-* Panel-Palette inkl. Light/Dark-Themes ENTFERNT wurde style.css:2-15: eine aeltere Blau-Palette (#3b82f6 auf #0a0e1a), die von Block 681 vollstaendig ueberschrieben wurde. Gemessen an der aufgeloesten Kaskade (--pm-bg ergab #090d0d, nicht #0a0e1a) — toter Code, kein Verhalten daran. NICHT hierher gewandert: der Block in style.css, der --pm-navbar-h ab 992px auf 0 setzt (seit dem Menue-Umbau steht am Desktop oben nichts mehr). Der ist Layout, nicht Token, und bleibt bewusst wo er ist. ⚠️ Werte hier aendern heisst: die ganze App aendert sich. Das ist der Zweck. ══════════════════════════════════════════════════════════════════════════ */ /* ── Basis-Palette ──────────────────────────────────────────────────────── Grundton der App. Dunkel ist der Normalfall. */ :root { --pm-bg: #090d0d; --pm-surface: #111817; --pm-border: #283833; --pm-card: #141d1b; --pm-card-2: #18231f; --pm-accent: #6da7ff; --pm-accent-2: #56d6b0; --pm-green: #4fd6a4; --pm-red: #ff6875; --pm-gold: #e7c46a; --pm-purple: #9f8cff; --pm-text: #eef4f1; --pm-muted: #879891; --pm-navbar-h: 54px; /* mobile Kopfzeile; am Desktop 0, siehe style.css */ } /* ── Additive Tokens: Akzent-Schleier, Ring, Tinte ──────────────────────── Ergaenzen die Basis-Palette, ueberschreiben sie nicht. */ :root { --pm-ink: #f7fbff; --pm-blue-soft: rgba(109, 167, 255, .16); --pm-green-soft: rgba(79, 214, 164, .14); --pm-gold-soft: rgba(231, 196, 106, .12); --pm-red-soft: rgba(255, 104, 117, .12); --pm-ring: 0 0 0 1px rgba(79, 214, 164, .06), 0 18px 46px rgba(0, 0, 0, .24); } /* ── Hell-Standard-Welle (24.08.2026) — --pm-* Hell-Palette ─────────────── Bis hierher hatte NUR --pl-s-* (Panel-/Settings-Palette, siehe unten) eine Hell-Variante. Die --pm-Basis-Tokens oben waren nur dunkel — genau DAS war der Nebenfund der Plan-Reiter-Welle (23.08.): die --pap-*-Papier-Variablen in 17 Seiten-Templates (z.B. analytics.html, _position_sidecar.html) schalten schon lange sauber auf prefers-color-scheme:light um, faerbten damit aber HELLE pap-Werte auf die (noch) dunklen --pm-Basis-Tokens — Text auf Text, unlesbar. Deshalb stand in base.html bis zu dieser Welle eine hart codierte data-theme="dark"-Schutzklemme. Jetzt schliesst sich die Luecke: --pm-* bekommt Hell-Bloecke nach demselben Muster wie --pl-s-* weiter unten (media-Vorliebe / explizite [data-theme="light"]-Wahl) -- ABSICHTLICH NUR DREI Bloecke, nicht vier: kein eigener [data-theme="dark"]- Block. Begruendung + Messung siehe Kommentar direkt vor dem Panel-/ Settings-Palette-Abschnitt weiter unten (Stichwort portfo-leo-skin.css/ Studio-Console-Skin-Kollision) -- bei --pl-s-* ist der vierte Block harmlos (kein Namenskonflikt), bei --pm-* haette er Prod-Optik geaendert. Herkunft der Hell-Werte — NICHT frei erfunden, sondern der bereits gesetzte Hell-Standard des Hauses aus analytics.html:137-144 (Papier- Variante 4, Welle 1): bg #fcfcfa, flaeche2 #f2f2ee, linie #e0e0d8, text #191d1b, muted #6a736f, ok #0b7a4b, bad #b42318. gold/warn (#8a5a00) uebernommen aus --pl-s-warn hell (Zeile 96, dieselbe Datei) — bereits gesetzter Hell-Ton fuer Amber im Haus. accent/accent-2/purple sind neu abgeleitet (auf #fcfcfa abgestimmte, AA-taugliche Toene der gleichen Farbfamilie wie die Dunkel-Werte); card/card-2/surface/ink sind neu gestuft (Karten heller als Grund, ink dunkler als text — max. Kontrast fuer Ueberschriften/fette Zahlen, spiegelbildlich zum Dunkel- Wert #f7fbff, der dort HELLER als --pm-text ist). Gemessene WCAG-Kontraste (Text/Muted/Akzentfarben auf --pm-bg #fcfcfa, Formel nach WCAG 2.x relative Luminanz, AA-Schwelle 4.5:1 fett markiert): --pm-text #191d1b 16.58:1 ✅ weit ueber AA --pm-ink #0d1210 18.40:1 ✅ weit ueber AA --pm-muted #6a736f 4.76:1 ✅ AA (grenznah, wie vorgesehen fuer gedaempften Text) --pm-green #0b7a4b 5.24:1 ✅ AA --pm-red #b42318 6.40:1 ✅ AA --pm-gold #8a5a00 5.77:1 ✅ AA --pm-purple #6d28d9 6.92:1 ✅ AA --pm-accent #2563eb 5.03:1 ✅ AA --pm-accent-2 #0f766e 5.33:1 ✅ AA --pm-text auf --pm-card #ffffff: 17.03:1 ✅ --pm-text auf --pm-card-2 #f2f2ee: 15.18:1 ✅ --pm-text auf --pm-surface #f7f7f3: 15.86:1 ✅ Alle textrelevanten Paare liegen ueber 4.5:1 — keine WCAG-Ausnahme noetig. --pm-border ist eine Trennlinie, keine Textfarbe (WCAG-Textschwelle gilt dafuer nicht). --pm-navbar-h bleibt UNVERAENDERT (Layout, kein Farbwert, siehe Dateikopf). */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --pm-bg: #fcfcfa; --pm-surface: #f7f7f3; --pm-border: #e0e0d8; --pm-card: #ffffff; --pm-card-2: #f2f2ee; --pm-accent: #2563eb; --pm-accent-2: #0f766e; --pm-green: #0b7a4b; --pm-red: #b42318; --pm-gold: #8a5a00; --pm-purple: #6d28d9; --pm-text: #191d1b; --pm-muted: #6a736f; --pm-ink: #0d1210; --pm-blue-soft: rgba(37, 99, 235, .10); --pm-green-soft: rgba(11, 122, 75, .10); --pm-gold-soft: rgba(138, 90, 0, .10); --pm-red-soft: rgba(180, 35, 24, .10); --pm-ring: 0 0 0 1px rgba(11, 122, 75, .06), 0 18px 46px rgba(16, 24, 40, .10); } } :root[data-theme="light"] { --pm-bg: #fcfcfa; --pm-surface: #f7f7f3; --pm-border: #e0e0d8; --pm-card: #ffffff; --pm-card-2: #f2f2ee; --pm-accent: #2563eb; --pm-accent-2: #0f766e; --pm-green: #0b7a4b; --pm-red: #b42318; --pm-gold: #8a5a00; --pm-purple: #6d28d9; --pm-text: #191d1b; --pm-muted: #6a736f; --pm-ink: #0d1210; --pm-blue-soft: rgba(37, 99, 235, .10); --pm-green-soft: rgba(11, 122, 75, .10); --pm-gold-soft: rgba(138, 90, 0, .10); --pm-red-soft: rgba(180, 35, 24, .10); --pm-ring: 0 0 0 1px rgba(11, 122, 75, .06), 0 18px 46px rgba(16, 24, 40, .10); } /* KEIN :root[data-theme="dark"]-Block hier (anders als --pl-s-* unten) — bewusst weggelassen, gemessen bei der Sichtprobe dieser Welle (24.08.2026): portfo-leo-skin.css (der Studio-Console-Skin, den studio_console:app -- also Prod, siehe scripts/start-original.sh -- ueber allen anderen CSS-Dateien einbindet) definiert AUF EINEM BLANKEN :root SEINE EIGENEN Werte fuer 7 namensgleiche Tokens (--pm-bg/-surface/-border/-text/-muted/-green/-red, z.B. --pm-green:#19e06f statt #4fd6a4 hier) -- das ist die Studio-Marke, kein Bug. Ein blankes :root hier UND dort ergibt eine Spezifitaets-Bindung, die per Ladereihenfolge auflöst (Skin laedt zuletzt -> Skin gewinnt, exakt das gewuenschte Prod-Aussehen). EIN --pm-*[data-theme="dark"]-Block haette eine HOEHERE Spezifitaet als beide blanken :root-Bloecke -- und haette den Skin fuer alle 7 Tokens verdraengt, IMMER (data-theme="dark" steht seit dieser Welle weiterhin literal im -Tag, s. base.html), byte-UNgleich zum bisherigen Prod-Bild. Gemessen per getComputedStyle() im Dev-Server: mit einem versuchsweise eingebauten [data-theme="dark"]-Block wich --pm-text auf /positions von #dce2e2 (Skin) auf #eef4f1 (dieser Block) ab. Der Block hier ist auch nicht noetig: die MEDIA-Regel oben ist bereits mit :not([data-theme="dark"]) bewacht, greift also bei explizitem Dunkel-Wunsch ohnehin nicht -- das blanke :root (dunkel, ganz oben in dieser Datei) traegt den Dunkel-Fall vollstaendig, ohne die Skin-Spezifitaet zu stoeren. */ /* ── Panel-/Settings-Palette (--pl-s-*) mit Themen ──────────────────────── Eigene Ebene fuer Einstellungs- und Panel-Flaechen. Traegt heute noch Werte aus der alten Blau-Aera (--pl-s-panel: #141d2e, Fallback #3b82f6) und ist damit nicht auf die Wealth-OS-Palette oben abgestimmt. BEWUSST unveraendert uebernommen — das Angleichen ist eine Design- Entscheidung, kein Umzug. Gehoert in die Richtungswahl in claude.ai/design. */ :root { --pl-s-panel: #141d2e; --pl-s-panel2: #101828; --pl-s-line: #1f2937; --pl-s-line2: #18212f; --pl-s-text: #e5e7eb; --pl-s-text2: #c3ccda; --pl-s-muted: #8794a8; --pl-s-acc: var(--pm-accent, #3b82f6); --pl-s-acc-sf: rgba(59,130,246,.14); --pl-s-ok: #3fd39a; --pl-s-ok-sf: rgba(63,211,154,.12); --pl-s-warn: #f4bf5c; --pl-s-warn-sf:rgba(244,191,92,.12); --pl-s-bad: #ff7b72; --pl-s-bad-sf: rgba(255,123,114,.12); --pl-s-shadow: 0 1px 2px rgba(0,0,0,.4); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --pl-s-panel: #ffffff; --pl-s-panel2: #eef2f7; --pl-s-line: #dde3ec; --pl-s-line2: #e9edf4; --pl-s-text: #111827; --pl-s-text2: #374151; --pl-s-muted: #5b6878; --pl-s-acc-sf: rgba(59,130,246,.10); --pl-s-ok: #0b7a4b; --pl-s-ok-sf: rgba(11,122,75,.10); --pl-s-warn: #8a5a00; --pl-s-warn-sf:rgba(138,90,0,.10); --pl-s-bad: #b42318; --pl-s-bad-sf: rgba(180,35,24,.10); --pl-s-shadow: 0 1px 2px rgba(16,24,40,.06); } } :root[data-theme="light"] { --pl-s-panel: #ffffff; --pl-s-panel2: #eef2f7; --pl-s-line: #dde3ec; --pl-s-line2: #e9edf4; --pl-s-text: #111827; --pl-s-text2: #374151; --pl-s-muted: #5b6878; --pl-s-acc-sf: rgba(59,130,246,.10); --pl-s-ok: #0b7a4b; --pl-s-ok-sf: rgba(11,122,75,.10); --pl-s-warn: #8a5a00; --pl-s-warn-sf:rgba(138,90,0,.10); --pl-s-bad: #b42318; --pl-s-bad-sf: rgba(180,35,24,.10); --pl-s-shadow: 0 1px 2px rgba(16,24,40,.06); } :root[data-theme="dark"] { --pl-s-panel: #141d2e; --pl-s-panel2: #101828; --pl-s-line: #1f2937; --pl-s-line2: #18212f; --pl-s-text: #e5e7eb; --pl-s-text2: #c3ccda; --pl-s-muted: #8794a8; --pl-s-ok: #3fd39a; --pl-s-warn: #f4bf5c; --pl-s-bad: #ff7b72; }