/* ========================================================================== Datei: /assets/css/tokens.css Zweck: Single Source of Truth für alle Design-Tokens im Dienstbuch. Wird IMMER als allererste CSS-Datei im geladen. Regeln: - Diese Datei enthält AUSSCHLIESSLICH :root-Tokens und Theme-Overrides via [data-theme="..."]. Keine Klassen, keine seitenspezifischen Stile. - Werte werden hier festgelegt, nirgendwo anders. Alle Modul-CSS beziehen ihre Werte über diese Tokens (ggf. via Alias-Block). - Wenn ein neuer Token gebraucht wird, kommt er HIER rein, nicht ins Modul-CSS. Themes: - dark (Default, aktuelles Aussehen, dunkelblau + Gold) - light (Light-Mode für tagsüber) - midnight (OLED-Schwarz) - western (Sepia/Braun, passt zu RedM-Stimmung) - ocean (kühles Tiefblau + Cyan) Anwendung über via partials/page_head.php ========================================================================== */ /* ========================================================================== STANDARD-THEME: DARK :root wird angewendet, wenn kein data-theme gesetzt ist (Fallback) und wenn data-theme="dark" gesetzt ist. ========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; /* ---------- Flächen / Surfaces ---------- */ --bg: #1a1b2e; --bg-deep: #16172a; --bg-elevated: #1e1f34; --card: #24253c; --card-hover: #292a45; --card-glass: rgba(36, 37, 60, 0.65); /* ---------- Akzent (Dienstbuch-Gold) ---------- */ --accent: #FFD166; --accent-hover: #e6b84a; --accent-dark: #c99a2e; --accent-text: #1a1b2e; --accent-wash: rgba(255, 209, 102, 0.08); --accent-glow: rgba(255, 209, 102, 0.15); --accent-glow-strong: rgba(255, 209, 102, 0.25); /* ---------- Semantische Farben ---------- */ --danger: #e63946; --danger-hover: #c41225; --danger-wash: rgba(230, 57, 70, 0.12); --success: #2ecc71; --success-hover: #25a85c; --success-wash: rgba(46, 204, 113, 0.12); --info: #3498db; --info-hover: #2378b6; --info-wash: rgba(52, 152, 219, 0.12); --warning: #f59e0b; --warning-hover: #d97706; --warning-wash: rgba(245, 158, 11, 0.12); /* ---------- Text ---------- */ --text: #f0f0f5; --text-muted: #a0aec0; --text-dim: #6b7280; --text-dim-rgb: 107, 114, 128; /* ---------- Rahmen ---------- */ --border: #3a3b53; --border-subtle: rgba(255, 255, 255, 0.04); --border-strong: #565878; /* ---------- Schatten (Cards heben sich klar ab) ---------- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2); --shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5), 0 6px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-glow: 0 0 20px rgba(255, 209, 102, 0.08); /* ---------- RGB-Komponenten (für rgba()) ---------- */ --bg-rgb: 26, 27, 46; --bg-deep-rgb: 22, 23, 42; --bg-elevated-rgb: 30, 31, 52; --card-rgb: 36, 37, 60; --card-hover-rgb: 41, 42, 69; --accent-rgb: 255, 209, 102; --danger-rgb: 230, 57, 70; --success-rgb: 46, 204, 113; --info-rgb: 52, 152, 219; --warning-rgb: 245, 158, 11; --text-rgb: 240, 240, 245; --border-rgb: 58, 59, 83; --surface-overlay-rgb: 255, 255, 255; /* helle Aufhellung im Dark Theme */ --surface-shadow-rgb: 0, 0, 0; /* ---------- Identity-Tokens (Forts, Sisika) ---------- */ --fort-wallace: #5B9BD5; --fort-wallace-rgb: 91, 155, 213; --fort-mercer: #FF6F61; --fort-mercer-rgb: 255, 111, 97; --fort-brennand: #46CD73; --fort-brennand-rgb: 70, 205, 115; --sisika: #FF66FF; --sisika-rgb: 255, 0, 255; /* ---------- Row-Tint Alphas (für Status-Zeilen) ---------- */ --row-alpha: 0.15; --row-alpha-strong: 0.25; --row-alpha-mute: 0.18; /* ---------- Logo-Backdrop (Watermark) ---------- */ --logo-blend: screen; --logo-opacity: 0.065; /* ---------- Tabellen-Trennlinien & Rang-Gruppen ---------- */ --table-divider: rgba(255, 255, 255, 0.07); --table-divider-strong: rgba(255, 209, 102, 0.18); --table-section-bg: rgba(255, 209, 102, 0.05); --table-section-bd: rgba(255, 209, 102, 0.15); } /* ========================================================================== THEME: LIGHT (White-Mode) Heller Hintergrund, dunkler Text, gedämpftes Gold als Akzent. ========================================================================== */ :root[data-theme="light"] { color-scheme: light; /* ---------- Flächen / Surfaces ---------- Klare Stufung: Page-BG deutlich grauer, damit weiße Cards sichtbar "schweben". Hierarchie: bg-deep < bg < bg-elevated < card */ --bg: #e5e7eb; /* Page-Hintergrund: deutlich grau */ --bg-deep: #d1d5db; /* tiefer (z.B. Footer-Bereich) */ --bg-elevated: #f3f4f6; /* erhöhte Fläche (z.B. Sidebar-Container) */ --card: #ffffff; /* weiße Card auf grauem Body */ --card-hover: #f9fafb; --card-glass: rgba(255, 255, 255, 0.85); /* ---------- Akzent (kräftiges Bronze, sichtbar auf weiß) ---------- */ --accent: #b45309; --accent-hover: #92400e; --accent-dark: #78350f; --accent-text: #ffffff; --accent-wash: rgba(180, 83, 9, 0.10); --accent-glow: rgba(180, 83, 9, 0.18); --accent-glow-strong: rgba(180, 83, 9, 0.28); /* ---------- Semantische Farben (WCAG-AA auf weiß) ---------- */ --danger: #b91c1c; --danger-hover: #991b1b; --danger-wash: rgba(185, 28, 28, 0.10); --success: #15803d; --success-hover: #126631; --success-wash: rgba(21, 128, 61, 0.10); --info: #1d4ed8; --info-hover: #1e40af; --info-wash: rgba(29, 78, 216, 0.10); --warning: #b45309; --warning-hover: #92400e; --warning-wash: rgba(180, 83, 9, 0.10); /* ---------- Text (alle WCAG-AA konform gegen --bg/--card) ---------- */ --text: #111827; /* Haupttext, hoch-kontrastig */ --text-muted: #374151; /* Sekundärtext, immer noch klar lesbar */ --text-dim: #6b7280; --text-dim-rgb: 107, 114, 128; /* Hint-Text, minimaler Kontrast */ /* ---------- Rahmen ---------- */ --border: #d1d5db; --border-subtle: rgba(0, 0, 0, 0.06); --border-strong: #9ca3af; /* ---------- Schatten (weicher, deutlicher Card-Lift) ---------- */ --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 3px 8px rgba(15, 23, 42, 0.06); --shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.14), 0 6px 14px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04); --shadow-glow: 0 0 20px rgba(180, 83, 9, 0.12); /* ---------- RGB-Komponenten ---------- */ --bg-rgb: 229, 231, 235; --bg-deep-rgb: 209, 213, 219; --bg-elevated-rgb: 243, 244, 246; --card-rgb: 255, 255, 255; --card-hover-rgb: 249, 250, 251; --accent-rgb: 180, 83, 9; --danger-rgb: 185, 28, 28; --success-rgb: 21, 128, 61; --info-rgb: 29, 78, 216; --warning-rgb: 180, 83, 9; --text-rgb: 17, 24, 39; --border-rgb: 229, 231, 235; --surface-overlay-rgb: 0, 0, 0; --surface-shadow-rgb: 15, 23, 42; /* ---------- Identity-Tokens (für hellen BG kalibriert) ---------- */ --fort-wallace: #1d4ed8; /* dunkleres Blau, 6.7:1 auf weiß */ --fort-wallace-rgb: 29, 78, 216; --fort-mercer: #c2410c; /* dunkles Koral/Orange-Rot */ --fort-mercer-rgb: 194, 65, 12; --fort-brennand: #15803d; /* dunkles Grün */ --fort-brennand-rgb: 21, 128, 61; --sisika: #a21caf; /* sattes Magenta */ --sisika-rgb: 162, 28, 175; /* ---------- Row-Tint Alphas ---------- */ --row-alpha: 0.28; --row-alpha-strong: 0.42; --row-alpha-mute: 0.18; /* ---------- Logo-Backdrop ---------- */ --logo-blend: multiply; /* damit Logo auf hellem BG sichtbar bleibt */ --logo-opacity: 0.12; /* etwas opaker, da multiply weniger Bild zeigt */ /* ---------- Tabellen-Trennlinien & Rang-Gruppen ---------- */ --table-divider: rgba(0, 0, 0, 0.09); --table-divider-strong: rgba(180, 83, 9, 0.25); --table-section-bg: rgba(180, 83, 9, 0.06); --table-section-bd: rgba(180, 83, 9, 0.20); } /* ========================================================================== THEME: MIDNIGHT (OLED-Schwarz) Reines Schwarz, maximaler Kontrast, gut für nachts / OLED-Displays. ========================================================================== */ :root[data-theme="midnight"] { color-scheme: dark; /* ---------- Flächen / Surfaces ---------- */ --bg: #000000; --bg-deep: #000000; --bg-elevated: #0a0a0c; --card: #111114; --card-hover: #1a1a1f; --card-glass: rgba(17, 17, 20, 0.75); /* ---------- Akzent (klassisches Gold, leuchtet auf Schwarz) ---------- */ --accent: #FFD166; --accent-hover: #ffdb85; --accent-dark: #c99a2e; --accent-text: #000000; --accent-wash: rgba(255, 209, 102, 0.06); --accent-glow: rgba(255, 209, 102, 0.18); --accent-glow-strong: rgba(255, 209, 102, 0.30); /* ---------- Semantische Farben ---------- Auf reinem Schwarz brauchen Status-Farben extra Helligkeit/Sättigung für gute Lesbarkeit. Diese Werte sind speziell auf #000 optimiert (Tailwind 400er-Töne mit etwas erhöhtem Wash für mehr Kontrast). */ --danger: #f87171; /* heller, gesättigter Rot-Ton */ --danger-hover: #fca5a5; --danger-wash: rgba(248, 113, 113, 0.18); --success: #4ade80; /* leuchtendes Grün */ --success-hover: #6ee7a3; --success-wash: rgba(74, 222, 128, 0.18); --info: #60a5fa; /* helles, klares Blau */ --info-hover: #93c5fd; --info-wash: rgba(96, 165, 250, 0.18); --warning: #fbbf24; /* leuchtendes Orange-Gelb */ --warning-hover: #fcd34d; --warning-wash: rgba(251, 191, 36, 0.18); /* ---------- Text ---------- */ --text: #ffffff; --text-muted: #a0a0a8; --text-dim: #606068; --text-dim-rgb: 96, 96, 104; /* ---------- Rahmen ---------- */ --border: #2a2a30; --border-subtle: rgba(255, 255, 255, 0.03); --border-strong: #4a4a52; /* ---------- Schatten (auf OLED-Schwarz nur durch Card-Lift sichtbar) ---------- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.03); --shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.9), 0 6px 14px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-glow: 0 0 24px rgba(255, 209, 102, 0.15); /* ---------- RGB-Komponenten ---------- */ --bg-rgb: 0, 0, 0; --bg-deep-rgb: 0, 0, 0; --bg-elevated-rgb: 10, 10, 12; --card-rgb: 17, 17, 20; --card-hover-rgb: 26, 26, 31; --accent-rgb: 255, 209, 102; --danger-rgb: 248, 113, 113; --success-rgb: 74, 222, 128; --info-rgb: 96, 165, 250; --warning-rgb: 251, 191, 36; --text-rgb: 255, 255, 255; --border-rgb: 42, 42, 48; --surface-overlay-rgb: 255, 255, 255; --surface-shadow-rgb: 0, 0, 0; /* ---------- Identity-Tokens (helle Töne für OLED-Schwarz) ---------- */ --fort-wallace: #74c0fc; --fort-wallace-rgb: 116, 192, 252; --fort-mercer: #ff9999; --fort-mercer-rgb: 255, 153, 153; --fort-brennand: #69db7c; --fort-brennand-rgb: 105, 219, 124; --sisika: #f783ac; --sisika-rgb: 247, 131, 172; /* ---------- Row-Tint Alphas (helle Tönung auf reinem Schwarz) ---------- */ --row-alpha: 0.22; --row-alpha-strong: 0.35; --row-alpha-mute: 0.20; /* ---------- Logo-Backdrop ---------- */ --logo-blend: screen; --logo-opacity: 0.08; /* ---------- Tabellen-Trennlinien & Rang-Gruppen ---------- */ --table-divider: rgba(255, 255, 255, 0.10); --table-divider-strong: rgba(255, 209, 102, 0.22); --table-section-bg: rgba(255, 209, 102, 0.06); --table-section-bd: rgba(255, 209, 102, 0.20); } /* ========================================================================== THEME: WESTERN (Sepia / Braun) Warmer Sepia-Look, Bronze-Gold-Akzent. Passt zur RedM-Stimmung und zum 19.-Jahrhundert-Setting der 101st Army. ========================================================================== */ :root[data-theme="western"] { color-scheme: dark; /* ---------- Flächen / Surfaces ---------- */ --bg: #2a2018; --bg-deep: #1e1610; --bg-elevated: #352a20; --card: #3d3025; --card-hover: #4a3a2d; --card-glass: rgba(61, 48, 37, 0.70); /* ---------- Akzent (warmes Bronze-Gold) ---------- */ --accent: #d4a647; --accent-hover: #e5b855; --accent-dark: #a8842e; --accent-text: #1e1610; --accent-wash: rgba(212, 166, 71, 0.10); --accent-glow: rgba(212, 166, 71, 0.18); --accent-glow-strong: rgba(212, 166, 71, 0.28); /* ---------- Semantische Farben (gedämpft, erdig) ---------- */ --danger: #c44536; --danger-hover: #a93829; --danger-wash: rgba(196, 69, 54, 0.12); --success: #8a9a5b; --success-hover: #748245; --success-wash: rgba(138, 154, 91, 0.12); --info: #6b8caf; --info-hover: #547399; --info-wash: rgba(107, 140, 175, 0.12); --warning: #d4823a; --warning-hover: #b86d2a; --warning-wash: rgba(212, 130, 58, 0.12); /* ---------- Text (warmes Cremeweiß) ---------- */ --text: #f4e8d0; --text-muted: #c4b393; --text-dim: #8a7a5e; --text-dim-rgb: 138, 122, 94; /* ---------- Rahmen ---------- */ --border: #5a4732; --border-subtle: rgba(244, 232, 208, 0.05); --border-strong: #8a6f4f; /* ---------- Schatten (warme Tiefe) ---------- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3); --shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 2px 5px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(244, 232, 208, 0.04); --shadow-glow: 0 0 20px rgba(212, 166, 71, 0.18); /* ---------- RGB-Komponenten ---------- */ --bg-rgb: 42, 32, 24; --bg-deep-rgb: 30, 22, 16; --bg-elevated-rgb: 53, 42, 32; --card-rgb: 61, 48, 37; --card-hover-rgb: 74, 58, 45; --accent-rgb: 212, 166, 71; --danger-rgb: 196, 69, 54; --success-rgb: 138, 154, 91; --info-rgb: 107, 140, 175; --warning-rgb: 212, 130, 58; --text-rgb: 244, 232, 208; --border-rgb: 90, 71, 50; --surface-overlay-rgb: 244, 232, 208; --surface-shadow-rgb: 0, 0, 0; /* ---------- Identity-Tokens (harmonisch zur Sepia-Palette) ---------- */ --fort-wallace: #a8c5e0; /* helleres Stahlblau, lesbar auf Sepia */ --fort-wallace-rgb: 168, 197, 224; --fort-mercer: #e88560; /* helleres rostiges Orange */ --fort-mercer-rgb: 232, 133, 96; --fort-brennand: #b8c885; /* helleres oliv */ --fort-brennand-rgb: 184, 200, 133; --sisika: #e0a6c2; /* helleres Altrosa */ --sisika-rgb: 224, 166, 194; /* ---------- Row-Tint Alphas (kräftig für Sepia-BG) ---------- */ --row-alpha: 0.30; --row-alpha-strong: 0.45; --row-alpha-mute: 0.25; /* ---------- Logo-Backdrop ---------- */ --logo-blend: screen; --logo-opacity: 0.085; /* ---------- Tabellen-Trennlinien & Rang-Gruppen ---------- */ --table-divider: rgba(244, 232, 208, 0.11); --table-divider-strong: rgba(212, 166, 71, 0.28); --table-section-bg: rgba(212, 166, 71, 0.08); --table-section-bd: rgba(212, 166, 71, 0.25); } /* ========================================================================== THEME: OCEAN (Tiefblau + Cyan) Kühles Tiefblau, frischer Cyan-Akzent. Alternative für User, die das Gold nicht mögen. ========================================================================== */ :root[data-theme="ocean"] { color-scheme: dark; /* ---------- Flächen / Surfaces ---------- */ --bg: #0f1e2e; --bg-deep: #0a1622; --bg-elevated: #142838; --card: #1a3148; --card-hover: #1f3a55; --card-glass: rgba(26, 49, 72, 0.70); /* ---------- Akzent (helles Cyan) ---------- */ --accent: #4dd0e1; --accent-hover: #67dae8; --accent-dark: #26a0b0; --accent-text: #0a1622; --accent-wash: rgba(77, 208, 225, 0.08); --accent-glow: rgba(77, 208, 225, 0.18); --accent-glow-strong: rgba(77, 208, 225, 0.30); /* ---------- Semantische Farben ---------- */ --danger: #ff6b6b; --danger-hover: #ff4d4d; --danger-wash: rgba(255, 107, 107, 0.12); --success: #51cf66; --success-hover: #3eb854; --success-wash: rgba(81, 207, 102, 0.12); --info: #74c0fc; --info-hover: #4ea8f5; --info-wash: rgba(116, 192, 252, 0.12); --warning: #ffd43b; --warning-hover: #f5c518; --warning-wash: rgba(255, 212, 59, 0.12); /* ---------- Text ---------- */ --text: #e6f1f7; --text-muted: #94b3c7; --text-dim: #5e7d92; --text-dim-rgb: 94, 125, 146; /* ---------- Rahmen ---------- */ --border: #2a4a68; --border-subtle: rgba(255, 255, 255, 0.04); --border-strong: #4a6d8c; /* ---------- Schatten (kühle Tiefe) ---------- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); --shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 2px 5px rgba(0, 0, 0, 0.25); --shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-glow: 0 0 20px rgba(77, 208, 225, 0.18); /* ---------- RGB-Komponenten ---------- */ --bg-rgb: 15, 30, 46; --bg-deep-rgb: 10, 22, 34; --bg-elevated-rgb: 20, 40, 56; --card-rgb: 26, 49, 72; --card-hover-rgb: 31, 58, 85; --accent-rgb: 77, 208, 225; --danger-rgb: 255, 107, 107; --success-rgb: 81, 207, 102; --info-rgb: 116, 192, 252; --warning-rgb: 255, 212, 59; --text-rgb: 230, 241, 247; --border-rgb: 42, 74, 104; --surface-overlay-rgb: 255, 255, 255; --surface-shadow-rgb: 0, 0, 0; /* ---------- Identity-Tokens (passend zur Cyan-Palette) ---------- */ --fort-wallace: #74c0fc; --fort-wallace-rgb: 116, 192, 252; --fort-mercer: #ffa94d; /* warmes Bernstein */ --fort-mercer-rgb: 255, 169, 77; --fort-brennand: #69db7c; --fort-brennand-rgb: 105, 219, 124; --sisika: #e599f7; --sisika-rgb: 229, 153, 247; /* ---------- Row-Tint Alphas ---------- */ --row-alpha: 0.20; --row-alpha-strong: 0.30; --row-alpha-mute: 0.20; /* ---------- Logo-Backdrop ---------- */ --logo-blend: screen; --logo-opacity: 0.07; /* ---------- Tabellen-Trennlinien & Rang-Gruppen ---------- */ --table-divider: rgba(255, 255, 255, 0.09); --table-divider-strong: rgba(77, 208, 225, 0.22); --table-section-bg: rgba(77, 208, 225, 0.06); --table-section-bd: rgba(77, 208, 225, 0.20); } /* ========================================================================== ALLE THEMES — Theme-unabhängige Tokens Diese Werte sind in allen Themes identisch (Größen, Schriften, Timing). ========================================================================== */ :root { /* ---------- Typografie ---------- */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* ---------- Radius ---------- */ --radius: 14px; --radius-sm: 10px; --radius-xs: 6px; --radius-lg: 18px; --radius-pill: 999px; /* ---------- Übergänge ---------- */ --transition: all 0.2s ease-in-out; --transition-fast: all 0.12s ease; --transition-slow: all 0.35s ease-in-out; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* ---------- Spacing-Skala ---------- */ --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; /* ---------- Layout ---------- */ --content-max: 1600px; --sidebar-width: 280px; } /* ========================================================================== Theme-Wechsel-Animation Sanfter Übergang beim Theme-Switch (z.B. Live-Preview in Einstellungen). ========================================================================== */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out !important; } /* ========================================================================== Globale Basis-Anwendung ========================================================================== */ body { background-color: var(--bg); color: var(--text); font-family: var(--font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *::before, *::after { box-sizing: border-box; } /* ========================================================================== LEGACY ALIASES Viele ältere Module verwenden eigene Variablen-Namen (--bg-card statt --card, --text-primary statt --text, --radius-md statt --radius, etc.). Diese Aliase verbinden die alten Namen mit den aktuellen Tokens, damit: 1) Module ohne Änderung weiter funktionieren 2) Theme-Wechsel überall greift (weil die Aliase auf die echten Tokens verweisen, die sich pro Theme ändern) ========================================================================== */ :root { --accent-dim: var(--accent-wash); --accent-primary: var(--accent); --accent-soft: var(--accent-wash); --bg-app: var(--bg); --bg-base: var(--bg); --bg-card: var(--card); --bg-card-hover: var(--card-hover); --bg-hover: var(--card-hover); --bg-primary: var(--bg); --bg-secondary: var(--bg-deep); --bg-surface: var(--bg-elevated); --border-1: var(--border); --border-accent: var(--accent); --border-color: var(--border); --border-color-light: var(--border-subtle); --border-hover: var(--border-strong); --border-radius: var(--radius); --danger-soft: var(--danger-wash); --dim: var(--text-dim); --dur: var(--transition); --ease: var(--ease-out); --ease-out-quart: var(--ease-out); --ease-spring: var(--ease-out); --fg-3: var(--text-muted); --font: var(--font-family); --gold: var(--accent); --info-soft: var(--info-wash); --lg-border: var(--border); --lg-gold: var(--accent); --lg-sp-4: var(--space-4); --muted: var(--text-muted); --primary: var(--accent); --radius-md: var(--radius); --radius-xl: var(--radius-lg); --s-2: var(--space-2); --s-3: var(--space-3); --s-4: var(--space-4); --shadow-md: var(--shadow); --space-2xl: var(--space-7); --space-lg: var(--space-5); --space-md: var(--space-4); --space-sm: var(--space-2); --space-xl: var(--space-6); --space-xs: var(--space-1); --success-soft: var(--success-wash); --surface: var(--card); --surface-2: var(--bg-elevated); --surface-hover: var(--card-hover); --text-3: var(--text-muted); --text-4: var(--text-dim); --text-main: var(--text); --text-primary: var(--text); --text-secondary: var(--text-muted); --text-tertiary: var(--text-dim); --transition-micro: var(--transition-fast); --transition-normal: var(--transition); --transition-spring: var(--transition-slow); --warning-soft: var(--warning-wash); } /* Erweiterte Aliases — Top-80 verbleibende Variablennamen */ :root { --accent-10: var(--accent-wash); --accent-20: var(--accent-glow); --accent-blue: var(--accent); --accent-border: var(--border-strong); --accent-color: var(--accent); --accent-gold: var(--accent); --accent-muted: var(--accent-dark); --accent-primary-bg: var(--bg); --bg-2: var(--bg); --bg-3: var(--bg); --bg-body: var(--bg); --bg-dark: var(--bg); --bg-input: var(--bg-elevated); --bg-inset: var(--bg); --bg-light: var(--bg); --bg-raised: var(--bg-elevated); --bg-sidebar: var(--bg); --blue: var(--info); --border-light: var(--border-subtle); --border-sub: var(--border-subtle); --card-elevated: var(--bg-elevated); --color-border: var(--border); --color-danger: var(--danger); --color-primary: var(--accent); --color-text-muted: var(--text-muted); --danger-bg: var(--danger-wash); --ease-fast: var(--ease-out); --ff: var(--font-family); --fg-1: var(--text); --fg-4: var(--text-dim); --font-body: var(--font-family); --font-ui: var(--font-family); --glass-border: var(--border-subtle); --green: var(--success); --lg-bg: var(--bg); --lg-border-soft: var(--border-subtle); --lg-border-strong: var(--border-strong); --lg-danger: var(--danger); --lg-r-md: var(--radius); --lg-sp-3: var(--space-3); --lg-sp-5: var(--space-5); --lg-success: var(--success); --lg-surface-1: var(--bg-elevated); --lg-surface-2: var(--bg-elevated); --lg-text: var(--text); --lg-text-dim: var(--text-dim); --lg-text-muted: var(--text-muted); --lg-trans-fast: var(--transition-fast); --primary-glow: var(--accent-glow); --purple: var(--accent); --purple-soft: var(--accent-wash); --pv-accent: var(--accent); --pv-border: var(--border); --pv-text: var(--text); --pv-text-muted: var(--text-muted); --r-md: var(--radius); --r-sm: var(--radius-sm); --radius-full: var(--radius-pill); --red: var(--danger); --rs: var(--radius-sm); --s-5: var(--space-5); --space-8: var(--space-7); --speed: var(--transition); --status-danger: var(--danger); --status-success: var(--success); --success-bg: var(--success-wash); --surface-3: var(--bg-elevated); --t-fast: var(--transition-fast); --t-sm: var(--transition-fast); --t1: var(--transition); --t2: var(--transition); --text-2: var(--text-muted); --text-faint: var(--text-dim); --tm: var(--transition); --transition-med: var(--transition); --transition-speed: var(--transition); --tx-fast: var(--transition-fast); --warn: var(--warning); --yellow: var(--warning); } /* Erweiterte Aliases — color-*, spacing-*, border-radius-* Konventionen */ :root { --spacing-m: var(--space-4); --color-text: var(--text); --spacing-l: var(--space-5); --color-border-subtle: var(--border-subtle); --spacing-s: var(--space-2); --color-content-bg: var(--bg); --color-success: var(--success); --color-primary-text: var(--accent-text); --border-radius-sm: var(--radius-sm); --space-12: var(--space-3); --font-family-base: var(--font-family); --color-info: var(--info); --border-radius-xs: var(--radius-xs); --color-warning: var(--warning); --color-danger-glow: var(--danger-wash); --space-10: var(--space-3); --color-background: var(--bg); --color-primary-hover: var(--accent-hover); --spacing-xl: var(--space-6); --color-secondary-bg: var(--card); --color-primary-glow: var(--accent-glow); --color-input-bg: var(--bg); --color-table-header: var(--bg-elevated); --color-success-glow: var(--success-wash); --color-info-glow: var(--info-wash); --spacing-xs: var(--space-1); --color-row-hover: var(--card-hover); --color-secondary-bg-hover: var(--card-hover); --color-danger-hover: var(--danger-hover); --color-info-hover: var(--info-hover); --color-warning-glow: var(--warning-wash); --color-card-hover: var(--card-hover); --color-row-stripe: var(--bg-elevated); --border-radius-lg: var(--radius-lg); --sidebar-bg: var(--card); /* Sidebar als Card (im Light weiß, im Dark dunkler) */ --surface-border-1: var(--divider); --surface-border-2: var(--divider-strong); } /* ========================================================================== DIVIDER-ALIASES — allgemeine Trennlinien-Tokens (mappen auf table-divider) ========================================================================== */ :root { --divider: var(--table-divider); --divider-strong: var(--table-divider-strong); } /* ========================================================================== LEGACY-VARIABLEN-ALIASES — Mappt alte Modul-spezifische Variablen-Namen auf moderne tokens. Verhindert "color: var(--undefined)" Fehler die im Light-Theme zu schwarzem/weißem currentColor-Fallback führen. ========================================================================== */ :root { /* Text */ --text-color: var(--text); --text-light: var(--text); --text-inverse: var(--accent-text); --primary-text: var(--text); --fg-2: var(--text-muted); --pv-text-dim: var(--text-dim); /* Backgrounds */ --bg-color: var(--bg); --bg-main: var(--bg); --bg-active: var(--card-hover); --bg-tertiary: var(--bg-deep); --bg-medium: var(--bg-elevated); --bg-darker: var(--bg-deep); --bg-darkest: var(--bg-deep); --bg-1: var(--bg); /* Cards */ --card-bg: var(--card); --card-sunken: var(--bg-deep); /* Light-Gold / Legacy "lg-*" Modul-Variablen (laufbahn_verwaltung etc.) */ --lg-bg-deep: var(--bg-deep); --lg-gold-dim: var(--accent); --lg-gold-soft: var(--accent-wash); --lg-gold-glow: var(--accent-glow); /* Provost / "pv-*" Modul-Variablen */ --pv-bg: var(--bg); --pv-card: var(--card); --pv-bg-deep: var(--bg-deep); --pv-card-hover: var(--card-hover); /* Akzente / Sub-Variants */ --accent-25: rgba(var(--accent-rgb), 0.25); --accent-40: rgba(var(--accent-rgb), 0.4); --accent-bg: var(--accent-wash); --accent-light: var(--accent); --accent-subtle: var(--accent-wash); --accent-primary-hover: var(--accent-hover); --accent-gold-glow: var(--accent-glow); --accent-gold-dim: var(--accent); --accent-status-blue: var(--info); --accent-blue-bg: var(--info-wash); --accent-success: var(--success); --accent-warning: var(--warning); --accent-danger: var(--danger); --accent2: var(--accent-hover); --accent-g: var(--success); /* Status / Info-Boxes */ --info-bg: var(--info-wash); --alert-blue-bg: var(--info-wash); --alert-orange-bg: var(--warning-wash); --alert-purple-bg: rgba(var(--sisika-rgb), 0.12); --alert-red-bg: var(--danger-wash); --status-warning: var(--warning); --blue-soft: var(--info-wash); --prio-kritisch: var(--danger); /* Document/Note */ --bg-document: var(--card); --bg-internal-note: var(--warning-wash); /* Badges/Avatars */ --badge-color: var(--accent); --avatar-hue: 45; /* Default-Hue für HSL-Avatars */ /* Status-Erweiterungen */ --lg-warn: var(--warning); --pv-danger: var(--danger); --success-border: rgba(var(--success-rgb), 0.3); --green-soft: var(--success-wash); /* Cards 2nd-Layer */ --card-2: var(--card-hover); --bg-surface-alt: var(--bg-elevated); /* Text weitere */ --text2: var(--text-muted); /* Overlay (für Modal-Backdrops) */ --bg-overlay: rgba(0, 0, 0, 0.5); /* Typ/Kategorie-Farben (Meeting, Drill, etc.) */ --typ-meeting: var(--info); --typ-drill: var(--warning); --typ-event: var(--success); --typ-deadline: var(--danger); /* Prioritäten */ --prio-hoch: var(--warning); --prio-niedrig: var(--text-dim); --prio-mittel: var(--info); /* Aktenzivilisten / Sidebar-spezifische */ --surface-1: var(--card); --sidebar-hover: var(--card-hover); --sidebar-active: var(--accent-wash); --verstorben-badge: var(--text-dim); --verstorben-bg: rgba(var(--text-dim, 107) , 0.1); --group-color: var(--accent); }