/* Theme-Overrides für Tailwind-Utility-Klassen. Wird NACH app.css geladen, überschreibt die dort fest kompilierten Slate-Farben je nach data-theme/ data-accent auf . Server-seitig gesetzt (kein Flash-of-wrong-theme, kein JS nötig) — siehe app/templates/base.html. */ :root[data-theme="light"] { --bg: #f8fafc; --bg-elevated: #ffffff; --text: #0f172a; --text-muted: #475569; --text-faint: #64748b; --text-fainter: #94a3b8; --border: #e2e8f0; --border-strong: #cbd5e1; --badge-bg: #f1f5f9; --hover-surface: #f8fafc; } :root[data-theme="dark"] { --bg: #0f172a; --bg-elevated: #1e293b; --text: #f1f5f9; --text-muted: #cbd5e1; --text-faint: #94a3b8; --text-fainter: #64748b; --border: #334155; --border-strong: #475569; --badge-bg: #334155; --hover-surface: #334155; } :root[data-theme="light"][data-accent="gray"] { --accent-600: #0f172a; --accent-700: #334155; } :root[data-theme="dark"][data-accent="gray"] { --accent-600: #475569; --accent-700: #64748b; } :root[data-theme="light"][data-accent="green"] { --accent-600: #16a34a; --accent-700: #15803d; } :root[data-theme="dark"][data-accent="green"] { --accent-600: #22c55e; --accent-700: #16a34a; } :root[data-theme="light"][data-accent="blue"] { --accent-600: #2563eb; --accent-700: #1d4ed8; } :root[data-theme="dark"][data-accent="blue"] { --accent-600: #3b82f6; --accent-700: #2563eb; } html { background: var(--bg); color-scheme: light dark; } /* Flächen / Text / Ränder */ .bg-slate-50 { background-color: var(--bg) !important; } .bg-white { background-color: var(--bg-elevated) !important; } .bg-slate-100 { background-color: var(--badge-bg) !important; } .text-slate-900 { color: var(--text) !important; } .text-slate-700 { color: var(--text-muted) !important; } .text-slate-600 { color: var(--text-muted) !important; } .text-slate-500 { color: var(--text-faint) !important; } .text-slate-400 { color: var(--text-fainter) !important; } .border-slate-200 { border-color: var(--border) !important; } .border-slate-300 { border-color: var(--border-strong) !important; } .border-slate-400 { border-color: var(--border-strong) !important; } .hover\:text-slate-600:hover { color: var(--text-muted) !important; } .hover\:bg-slate-50:hover { background-color: var(--hover-surface) !important; } /* Primärbuttons/Links -> Akzentfarbe */ .bg-slate-900 { background-color: var(--accent-600) !important; } .hover\:bg-slate-700:hover { background-color: var(--accent-700) !important; } /* Formularfelder (bg-white Inputs sollen im Dark Mode nicht grell weiß bleiben) */ input, textarea, select { background-color: var(--bg-elevated); color: var(--text); } input::placeholder, textarea::placeholder { color: var(--text-fainter); } /* Status-Farben: im Light Mode unverändert (kräftige helle Flächen), im Dark Mode auf abgedunkelte, transparente Varianten für ausreichend Kontrast. */ :root[data-theme="dark"] .bg-emerald-50, :root[data-theme="dark"] .bg-emerald-100 { background-color: rgba(34, 197, 94, 0.15) !important; } :root[data-theme="dark"] .text-emerald-700, :root[data-theme="dark"] .text-emerald-800 { color: #4ade80 !important; } :root[data-theme="dark"] .border-emerald-200 { border-color: rgba(34, 197, 94, 0.35) !important; } :root[data-theme="dark"] .bg-red-50, :root[data-theme="dark"] .bg-red-100 { background-color: rgba(248, 113, 113, 0.15) !important; } :root[data-theme="dark"] .text-red-600, :root[data-theme="dark"] .text-red-700, :root[data-theme="dark"] .text-red-800 { color: #f87171 !important; } :root[data-theme="dark"] .border-red-200, :root[data-theme="dark"] .border-red-300 { border-color: rgba(248, 113, 113, 0.35) !important; } :root[data-theme="dark"] .bg-amber-100 { background-color: rgba(251, 191, 36, 0.18) !important; } :root[data-theme="dark"] .text-amber-700 { color: #fbbf24 !important; }