/* BetMich V2 — zentrales Theme-System. Eine Token-Quelle für Dark (Standard) + Light. Umschaltung über , Persistenz in localStorage (v2.js). Keine Farben hart in Komponenten — immer var(--…). */ :root, html[data-theme="dark"] { color-scheme: dark; /* Flächen — ruhige, leicht abgestufte Tiefen statt flachem Schwarz */ --bg: #0a0e17; /* App-Hintergrund */ --bg-sunken: #070a11; /* Tiefer (Tabellen-Header, Wells) */ --surface: #111726; /* Karten */ --surface-2: #161e30; /* erhöht / Hover-Flächen */ --surface-3: #1d2740; /* Chips, aktive Zeile */ /* Linien */ --border: #222c42; --border-soft: #1a2336; --border-strong:#33415c; /* Text */ --text: #e8edf6; --text-2: #9fb0c8; --text-muted: #66758f; --on-accent: #ffffff; /* Akzent */ --accent: #4f8cff; --accent-hover: #3b78f0; --accent-soft: rgba(79,140,255,.14); --ring: rgba(79,140,255,.45); /* Status-Töne (Badges/Werte) — Flächen bewusst gedämpft */ --ok: #34d399; --ok-bg: rgba(52,211,153,.13); --ok-bd: rgba(52,211,153,.30); --warn: #f5b54a; --warn-bg: rgba(245,181,74,.13); --warn-bd: rgba(245,181,74,.30); --info: #5b9dff; --info-bg: rgba(91,157,255,.13); --info-bd: rgba(91,157,255,.30); --danger: #f87171; --danger-bg: rgba(248,113,113,.12); --danger-bd: rgba(248,113,113,.30); --neutral: #8b9bb4; --neutral-bg: rgba(139,155,180,.12); --neutral-bd: rgba(139,155,180,.26); /* Geld-Werte ruhiger: positiv grün, negativ gedämpftes Rot (nicht grell) */ --money-pos: #34d399; --money-neg: #e08585; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 4px 16px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); --shadow-lg: 0 18px 48px rgba(0,0,0,.55); } html[data-theme="light"] { color-scheme: light; /* Gebrochenes Weiß statt grellem #fff */ --bg: #eef1f6; --bg-sunken: #e6eaf1; --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #eef2f8; --border: #dce2ec; --border-soft: #e7ecf3; --border-strong:#c3cdda; --text: #131a26; --text-2: #475467; --text-muted: #7a8699; --on-accent: #ffffff; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: rgba(37,99,235,.10); --ring: rgba(37,99,235,.35); --ok: #15a36a; --ok-bg: rgba(21,163,106,.10); --ok-bd: rgba(21,163,106,.26); --warn: #b9740a; --warn-bg: rgba(217,138,11,.12); --warn-bd: rgba(217,138,11,.26); --info: #2563eb; --info-bg: rgba(37,99,235,.10); --info-bd: rgba(37,99,235,.24); --danger: #d4493f; --danger-bg: rgba(212,73,63,.09); --danger-bd: rgba(212,73,63,.24); --neutral: #64748b; --neutral-bg: rgba(100,116,139,.10); --neutral-bd: rgba(100,116,139,.22); --money-pos: #15a36a; --money-neg: #c4524a; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow: 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06); --shadow-lg: 0 16px 40px rgba(16,24,40,.14); } :root { --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --sidebar-w: 248px; --font: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; }