/* ========================================================================== MELLINOR Lernplattform – Design-Tokens Einzige Stelle, an der Farben, Abstände, Schriften und Maße definiert sind. Alle anderen CSS-Dateien verwenden ausschließlich diese Variablen. Themes: Das Attribut data-theme am -Element wählt Dark oder Light. Gesetzt wird es vor dem ersten Zeichnen durch ein kurzes Script im , die Auswahl selbst verwaltet assets/js/theme.js. ========================================================================== */ /* -------------------------------------------------------------------------- Farben – MELLINOR Dark (Standard und freigegebene Grundlage) Jede Komponente verwendet ausschließlich diese Tokens. Ein Theme ändert nur die Werte, nie die Komponenten. -------------------------------------------------------------------------- */ :root, html[data-theme="dark"] { color-scheme: dark; /* Flächen */ --color-bg: #05080D; /* Seitenhintergrund, auch Einsätze innerhalb von Panels */ --color-bg-secondary: rgba(7, 19, 31, 0.55); /* abgesetzte Seitenabschnitte */ --color-panel: #07131F; /* Cards, Panels, Sidebar */ --color-panel-raised: #0B1B2B; /* angehobene Fläche, Hover */ --color-input-bg: #05080D; /* Eingabefelder */ --color-header-bg: rgba(5, 8, 13, 0.95); --color-bar-bg: rgba(5, 8, 13, 0.94); --color-overlay: rgba(5, 8, 13, 0.7); --color-hover: rgba(170, 180, 192, 0.08); --color-track: rgba(170, 180, 192, 0.16); /* Schiene der Fortschrittsanzeige */ /* Text */ --color-text: #F5F7FA; --color-text-muted: #AAB4C0; --color-text-faint: #7F8B99; --color-on-accent: #05080D; /* Text auf Sakura- oder Cyan-Fläche */ /* Linien */ --color-line: rgba(170, 180, 192, 0.14); --color-line-strong: rgba(170, 180, 192, 0.3); /* Marke: Sakura (primär), Cyan (technisch), Grün (sparsam) */ --color-sakura: #FF2A8A; --color-sakura-hover: #ff4a9c; --color-sakura-soft: rgba(255, 42, 138, 0.12); --color-sakura-line: rgba(255, 42, 138, 0.45); --color-cyan: #25D9FF; --color-cyan-soft: rgba(37, 217, 255, 0.1); --color-cyan-line: rgba(37, 217, 255, 0.4); --color-green: #8CFF00; --color-green-soft: rgba(140, 255, 0, 0.1); /* Rückmeldung */ --color-success: #8CFF00; --color-success-line-soft: rgba(140, 255, 0, 0.3); --color-success-line: rgba(140, 255, 0, 0.45); --color-success-line-strong: rgba(140, 255, 0, 0.6); --color-error: #FF2A8A; --color-error-line: rgba(255, 42, 138, 0.45); --color-warning: #FF2A8A; /* Code: Blöcke bleiben in jedem Theme dunkel, Inline-Code passt sich an */ --color-code-bg: #05080D; --color-code-text: #F5F7FA; --color-code-comment: #7F8B99; --color-code-border: rgba(170, 180, 192, 0.14); --color-inline-code-bg: rgba(170, 180, 192, 0.12); /* Visualisierung: Netzbits und Hostbits */ --color-net-bg: rgba(37, 217, 255, 0.16); --color-host-bg: rgba(255, 42, 138, 0.12); /* Effekte */ --glow-sakura: rgba(255, 42, 138, 0.13); --glow-cyan: rgba(37, 217, 255, 0.07); --shadow-card: none; } /* -------------------------------------------------------------------------- Farben – MELLINOR Light Hell, neutral, ruhig. Akzente sind abgedunkelt, damit Text und Linien auf hellem Grund den Kontrast nach WCAG AA erreichen. -------------------------------------------------------------------------- */ html[data-theme="light"] { color-scheme: light; --color-bg: #F4F6F8; --color-bg-secondary: #EEF1F4; --color-panel: #FFFFFF; --color-panel-raised: #F8F9FB; --color-input-bg: #FFFFFF; --color-header-bg: rgba(255, 255, 255, 0.94); --color-bar-bg: rgba(244, 246, 248, 0.96); --color-overlay: rgba(23, 26, 31, 0.45); --color-hover: rgba(23, 26, 31, 0.05); --color-track: #DFE4EA; --color-text: #171A1F; --color-text-muted: #525B66; --color-text-faint: #66707C; --color-on-accent: #FFFFFF; --color-line: #D8DEE5; --color-line-strong: #8A95A2; --color-sakura: #BF2E6E; --color-sakura-hover: #A82660; --color-sakura-soft: rgba(191, 46, 110, 0.08); --color-sakura-line: rgba(191, 46, 110, 0.5); --color-cyan: #0E7490; --color-cyan-soft: rgba(14, 116, 144, 0.08); --color-cyan-line: rgba(14, 116, 144, 0.45); --color-green: #5D8A32; --color-green-soft: rgba(93, 138, 50, 0.12); --color-success: #3D6B1E; --color-success-line-soft: rgba(61, 107, 30, 0.4); --color-success-line: rgba(61, 107, 30, 0.6); --color-success-line-strong: #3D6B1E; --color-error: #B3261E; --color-error-line: rgba(179, 38, 30, 0.6); --color-warning: #8A5300; --color-code-bg: #0D1620; --color-code-text: #E8ECF1; --color-code-comment: #8A96A5; --color-code-border: #0D1620; --color-inline-code-bg: #E7EBF0; --color-net-bg: rgba(14, 116, 144, 0.16); --color-host-bg: rgba(191, 46, 110, 0.14); --glow-sakura: rgba(191, 46, 110, 0.08); --glow-cyan: rgba(14, 116, 144, 0.07); --shadow-card: 0 1px 2px rgba(23, 26, 31, 0.06); } /* -------------------------------------------------------------------------- Schrift, Abstände, Maße – in jedem Theme gleich -------------------------------------------------------------------------- */ :root { /* Schriften */ --font-display: "Sora", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* Schriftgrößen */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --text-3xl: clamp(2rem, 1.3rem + 3vw, 3.25rem); --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.6; /* Abstände (4-px-Raster) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-section: clamp(3rem, 2rem + 4vw, 5.5rem); /* Formen */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Maße */ --content-width: 1200px; --content-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); --header-height: 68px; /* Bewegung */ --transition-fast: 140ms ease; --transition-base: 220ms ease; /* Ebenen */ --z-header: 100; --z-drawer: 200; }