/* ========================================================================== SimpLISM CMS – Design Tokens ========================================================================== Das ist die EINZIGE Datei, die pro Kundenprojekt angepasst werden muss, um das Admin-Panel an die Kunden-Brand anzupassen (Farben, Fonts, Radien). Restlicher Code (admin.css, js/*) referenziert ausschließlich diese Variablen – keine Farbwerte im Rest des Codes hart verdrahten. Vorgehen pro neuem Kundenprojekt: 1. --accent / --accent-ink unten auf die Kundenfarbe setzen 2. --font-sans / --font-mono ggf. austauschen (Font-Link in admin.html anpassen) 3. --radius bei Bedarf anpassen (z.B. 0 für ein kantigeres Corporate Design) 4. Fertig – der Rest des UI übernimmt die neuen Werte automatisch ========================================================================== */ :root { /* ---- Brand / Accent ----------------------------------------------- Default: neutrales, premium wirkendes Kobaltblau. Bewusst kein Lism-Branding (Gelb/Grün) und kein generisches "AI-Lila" – das Grundgerüst muss zu jeder Kunden-Brand passen können. */ --accent-h: 226; --accent-s: 84%; --accent-l: 58%; --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); /* calc() statt fixer Prozentwerte, damit Hover/Soft/Ring auch dann stimmig bleiben, wenn --accent-l zur Laufzeit geändert wird (siehe Einstellungen -> Branding-Vorschau, js/modules/settings.js). */ --accent-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 6%)); --accent-ink: #ffffff; /* Textfarbe AUF --accent (Kontrast prüfen bei Farbwechsel!) */ --accent-soft: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.12); --accent-soft-hover: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.2); --accent-ring: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.35); /* ---- Chart-Farben (segmentierte Balken, z.B. Speicher-/DB-Aufteilung im Dashboard) - Hue-Rotation relativ zu --accent-h, damit sie bei jedem Kundenprojekt automatisch zur jeweiligen Akzentfarbe passen, ohne eigene Pflege pro Projekt. Bewusst NICHT --warning/--danger wiederverwendet, die haben an anderer Stelle eine feste Bedeutung (Warnung/Fehler) - hier geht es nur um Kategorien, nicht um Status. */ --chart-1: var(--accent); --chart-2: hsl(calc(var(--accent-h) + 70) var(--accent-s) var(--accent-l)); --chart-3: hsl(calc(var(--accent-h) - 60) var(--accent-s) var(--accent-l)); --chart-track: var(--border-strong); /* ---- Status-Farben (bewusst nicht kundenspezifisch) ---------------- Werte unten pro Theme in den Light/Dark-Blöcken gesetzt, damit Badge-Text auf dem jeweiligen Soft-Hintergrund WCAG AA (4.5:1) erreicht (ein einzelner Grün-/Rot-/Gelbton reicht dafür nicht für beide Modi). */ /* Fixer (nicht theme-abhängiger) Rotton NUR für gefüllte destruktive Buttons mit weißer Schrift (z.B. "Löschen"-Bestätigung). --danger oben ist für Text-auf-Soft-Hintergrund optimiert und wechselt pro Theme – als Button-Hintergrund mit weißem Text wäre das im Dark Mode zu hell für ausreichenden Kontrast, daher getrennter Token. */ --danger-solid: #dc2626; --danger-solid-ink: #ffffff; /* ---- Typografie ------------------------------------------------------ System-Font-Stack als Fallback ohne Ladezeit. "Manrope" optional per CDN-Link in admin.html eingebunden (siehe README) für einen etwas eigenständigeren Look als Standard-Inter/Arial. */ --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; /* ---- Form / Geometrie ------------------------------------------------ EINE Radius-Skala fürs ganze UI (Shape Consistency). */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --sidebar-w: 232px; --topbar-h: 60px; --content-max: 1180px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration: 180ms; } /* ---- Light Mode (Default) --------------------------------------------- */ :root, [data-theme="light"] { --bg: #f7f7f9; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f0f0f3; --border: rgb(20 20 30 / 0.09); --border-strong: rgb(20 20 30 / 0.16); --text: #17171c; --text-muted: #6b6b76; --text-faint: #9a9aa4; --shadow-color: 220deg 30% 30%; --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06); --shadow-md: 0 4px 16px -4px hsl(var(--shadow-color) / 0.14), 0 1px 2px hsl(var(--shadow-color) / 0.06); --shadow-lg: 0 16px 48px -12px hsl(var(--shadow-color) / 0.22); --scrim: rgb(20 20 25 / 0.4); /* Dunklere Statusfarben, geprüft auf >= 4.5:1 Kontrast gegen den jeweiligen Soft-Badge-Hintergrund (WCAG AA für Fließtext-Größe). */ --success: #15803d; --success-soft: rgb(21 128 61 / 0.12); --danger: #c22e2e; --danger-soft: rgb(194 46 46 / 0.12); --warning: #92400e; --warning-soft: rgb(146 64 14 / 0.12); } /* ---- Dark Mode --------------------------------------------------------- Kein reines #000 – Off-Black mit leichtem Blaustich für Tiefe. */ [data-theme="dark"] { --bg: #0d0d10; --surface: #16161a; --surface-raised: #1c1c21; --surface-sunken: #0a0a0c; --border: rgb(255 255 255 / 0.08); --border-strong: rgb(255 255 255 / 0.16); --text: #f2f2f4; --text-muted: #9c9ca6; --text-faint: #6c6c76; --shadow-color: 220deg 40% 2%; --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.4); --shadow-md: 0 4px 20px -4px hsl(var(--shadow-color) / 0.5); --shadow-lg: 0 24px 60px -12px hsl(var(--shadow-color) / 0.6); --scrim: rgb(0 0 0 / 0.55); --accent-ink: #0d0d10; --accent-l: 64%; /* Hellere Statusfarben für ausreichend Kontrast auf dunklem Grund. */ --success: #4ade80; --success-soft: rgb(74 222 128 / 0.14); --danger: #f87171; --danger-soft: rgb(248 113 113 / 0.14); --warning: #fbbf24; --warning-soft: rgb(251 191 36 / 0.14); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration: 0ms; } }