/* ========================================================================== DocMind - theme.css Copyright (c) 2026 GeekInfinity. DIE EINZIGE STELLE, AN DER FARBEN STEHEN. Vorher deklarierten index.php, login.php, signup.php und lib/legal.php JEDER einen eigenen :root-Block. Dieselbe Palette lag also viermal im Code - ein Umschalter haette viermal gepflegt werden muessen. Die vier Bloecke sind entfernt; hier steht sie einmal. AUFBAU :root = DUNKEL (Vorgabe fuer jeden Erstbesucher) :root[data-theme="light"] = HELL prefers-color-scheme wird BEWUSST NICHT ausgewertet: die Wahl trifft der Nutzer ueber den Umschalter, sie steht im Cookie dm_theme, und PHP setzt data-theme schon beim Ausliefern ins . Sonst blitzt bei jedem Aufruf kurz die falsche Farbe auf. RGB-TRIPEL Zu jedem Grundton gibt es zusaetzlich --x-rgb als "r, g, b". Das CSS braucht das fuer rgba(var(--accent-rgb), .16) - eine Farbe mit Deckkraft laesst sich aus einem Hex-Wert nicht bilden. HELL IST NICHT INVERTIERT Die dunklen Toene sind fuer dunklen Grund gemacht und haetten auf Weiss zu wenig Kontrast. Jeder Akzent wurde einzeln ausgerechnet: mindestens 4,5:1 gegen den Hintergrund UND 4,5:1 fuer weisse Schrift darauf. Gemessen: --accent #3861ff 4,54:1 auf Hintergrund 4,86:1 weisse Schrift --accent-2 #7e48f9 4,69:1 5,02:1 --good #19805a 4,58:1 4,91:1 --warn #8f6700 4,77:1 5,11:1 --bad #e00606 4,67:1 5,00:1 MARKENFARBEN stehen AUSSERHALB beider Bloecke und aendern sich nie - der Schriftzug auf der Anmeldeseite soll in hell wie dunkel gleich aussehen, so wie auf geekinfinity.net. ========================================================================== */ /* --- Marke: themenunabhaengig ------------------------------------------- */ :root { --brand-cyan: #00e5ff; --brand-cyan-rgb: 0, 229, 255; --brand-violet: #7c3aed; --brand-violet-rgb: 124, 58, 237; --brand-violet-light: #8b5cf6; } /* --- DUNKEL (Vorgabe) --------------------------------------------------- */ :root, :root[data-theme="dark"] { --bg: #0f1115; --bg-2: #1a1f2e; --panel: #171a21; --panel-2: #1e222b; --border: #2a2f3a; --text: #e6e9ef; --text-2: #c7cede; --muted: #9aa3b2; --muted-2: #5b6270; --accent: #6d8bff; --accent-rgb: 109, 139, 255; --accent-soft: #c3cffd; --accent-2: #8b5cf6; --accent-2-rgb: 139, 92, 246; --accent-2-soft: #d3c4ff; --good: #34d399; --good-rgb: 52, 211, 153; --good-soft: #9ce9c8; --warn: #fbbf24; --warn-rgb: 251, 191, 36; --warn-soft: #fde68a; --warn-ink: #3a2f0b; --bad: #f87171; --bad-rgb: 248, 113, 113; --bad-soft: #fecaca; --on-accent: #ffffff; --overlay-rgb: 8, 10, 14; /* Abdunklung hinter Dialogen */ --shadow-rgb: 0, 0, 0; --radius: 14px; color-scheme: dark; } /* --- HELL --------------------------------------------------------------- */ :root[data-theme="light"] { --bg: #f6f7fa; --bg-2: #e7eaf2; --panel: #ffffff; --panel-2: #f0f2f7; --border: #d3d8e3; --text: #262a31; --text-2: #657186; --muted: #5b6472; --muted-2: #657186; --accent: #3861ff; --accent-rgb: 56, 97, 255; --accent-soft: #3861ff; --accent-2: #7e48f9; --accent-2-rgb: 126, 72, 249; --accent-2-soft: #7e48f9; --good: #19805a; --good-rgb: 25, 128, 90; --good-soft: #19805a; --warn: #8f6700; --warn-rgb: 143, 103, 0; --warn-soft: #8f6700; --warn-ink: #fdf3d4; --bad: #e00606; --bad-rgb: 224, 6, 6; --bad-soft: #e00606; --on-accent: #ffffff; --overlay-rgb: 40, 44, 54; --shadow-rgb: 90, 100, 120; --radius: 14px; color-scheme: light; }