/* ───────────────────────────────────────────────────────────────────── FlowAI Design Tokens (E1 — Fundament). Hex-Token, direkt via `var(--token)` in flowai-Komponenten konsumiert. Tailwind wird bewusst NICHT auf diese Tokens umgebogen — dort bleiben die Blueprint-Tokens (in input.css :root) fuer die Alt-UI. Diese Datei wird VOR tailwind.css eingebunden, damit die Custom- Properties zum Zeitpunkt der Tailwind-Base-Regeln bereits gesetzt sind. Fuer Alt-Templates ist der einzige Effekt: zusaetzliche, ungenutzte CSS-Variablen im :root — kein Style-Impact. Dark-Mode-Aufloesung (analog zum bestehenden Theme-Toggle in base.html): 1. `data-theme="dark"` (manueller Umschalter) → immer dunkel. 2. `data-theme="light"` → immer hell. 3. `data-theme="auto"` bzw. nichts gesetzt → System-Preference. ───────────────────────────────────────────────────────────────────── */ :root { /* ── Backgrounds ─────────────────────────────────────────────── */ --fa-bg-canvas: #f4f5f9; --fa-bg-surface: #ffffff; --fa-bg-subtle: #f7f8fb; --fa-bg-inset: #eef0f6; /* ── Sidebar (dark in both modes by design) ─────────────────── */ --fa-sidebar-bg: #14162b; --fa-sidebar-text: #a9adce; --fa-sidebar-text-dim: #6a6f97; --fa-sidebar-active-bg: #23264a; --fa-sidebar-active-text: #ffffff; --fa-sidebar-active-icon: #aab4ff; /* ── Text ────────────────────────────────────────────────────── */ --fa-text-strong: #14162b; --fa-text: #3a3f5c; --fa-text-muted: #8990ab; /* ── Borders ─────────────────────────────────────────────────── */ --fa-border: #e6e8f0; --fa-border-strong: #d5d8e6; /* ── Accent + Semantik ───────────────────────────────────────── */ --fa-accent: #5b6dff; --fa-accent-soft: #ecefff; --fa-accent-ink: #3f4fd6; --fa-good: #17b385; --fa-good-soft: #e2f6ef; --fa-warn: #e8912a; --fa-warn-soft: #fbeed9; --fa-bad: #e5484d; --fa-bad-soft: #fce4e4; --fa-info: #3b82f6; /* ── Shadows ─────────────────────────────────────────────────── */ --fa-shadow-card: 0 1px 2px rgba(20, 22, 43, 0.04), 0 1px 3px rgba(20, 22, 43, 0.06); --fa-shadow-lift: 0 2px 4px rgba(20, 22, 43, 0.05), 0 4px 12px rgba(20, 22, 43, 0.08); /* ── Radii ───────────────────────────────────────────────────── */ --fa-r-sm: 7px; --fa-r-md: 10px; --fa-r-lg: 14px; /* ── Layout ──────────────────────────────────────────────────── */ --fa-sidebar-w: 244px; --fa-topbar-h: 60px; } /* Dark: manueller Umschalter (setzt data-theme="dark" auf ). */ :root[data-theme="dark"] { --fa-bg-canvas: #0d0e1a; --fa-bg-surface: #16182b; --fa-bg-subtle: #1b1d33; --fa-bg-inset: #1f2138; --fa-sidebar-bg: #0a0b16; --fa-sidebar-active-bg: #20233f; --fa-text-strong: #f2f3fa; --fa-text: #c3c7dd; --fa-text-muted: #7b81a3; --fa-border: #262a42; --fa-border-strong: #333857; --fa-accent: #7c8bff; --fa-accent-soft: #20244a; --fa-accent-ink: #a8b2ff; --fa-good: #34d3a0; --fa-good-soft: #14352b; --fa-warn: #f0a54a; --fa-warn-soft: #3a2c14; --fa-bad: #f2686c; --fa-bad-soft: #3a1d1f; --fa-info: #60a5fa; --fa-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.40); --fa-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.45); } /* Dark: System-Preference — nur wenn kein manueller Modus gesetzt ist. Analog zur bestehenden Logik in base.html (dort wird das Attribut ohnehin schon vor dem ersten Paint gesetzt); dies ist der SSR- Fallback fuer alle Kontexte, in denen JS deaktiviert ist oder das Attribut noch nicht angewendet wurde. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fa-bg-canvas: #0d0e1a; --fa-bg-surface: #16182b; --fa-bg-subtle: #1b1d33; --fa-bg-inset: #1f2138; --fa-sidebar-bg: #0a0b16; --fa-sidebar-active-bg: #20233f; --fa-text-strong: #f2f3fa; --fa-text: #c3c7dd; --fa-text-muted: #7b81a3; --fa-border: #262a42; --fa-border-strong: #333857; --fa-accent: #7c8bff; --fa-accent-soft: #20244a; --fa-accent-ink: #a8b2ff; --fa-good: #34d3a0; --fa-good-soft: #14352b; --fa-warn: #f0a54a; --fa-warn-soft: #3a2c14; --fa-bad: #f2686c; --fa-bad-soft: #3a1d1f; --fa-info: #60a5fa; --fa-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.40); --fa-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.45); } }