/* ============================================================ Golf-Tracker – CSS-Variablen (Design-Tokens) Alle Farben an EINER Stelle. Zwei Themes: hell & dunkel. Umschaltung über . ============================================================ */ :root { /* Marke: Golf-Grün (in beiden Themes gleich) */ --brand: #2e9d46; --brand-hover: #37b352; --brand-contrast: #ffffff; --brand-rgb: 46, 157, 70; /* Abstände */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* Typografie */ --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-xs: 12px; --font-sm: 13px; --font-base: 15px; --font-lg: 18px; --font-xl: 22px; /* Radien */ --radius-sm: 5px; --radius: 8px; --radius-lg: 12px; /* Sidebar */ --sidebar-width: 230px; } /* ---------- HELLES THEME (Standard) ---------- */ [data-theme="light"], :root { --bg: #f2f5f2; --card-bg: #ffffff; --text: #14231a; --text-muted: #5d6f63; --border: #d9e3dc; --input-bg: #ffffff; --hover-bg: #eef3ef; --topbar-bg: #0f1a12; --topbar-text: #cfe3d2; --topbar-brand: #9fe28a; /* Sidebar (dunkel gehalten, in beiden Themes) */ --sidebar-bg: #0f1a12; --sidebar-text: #cfe3d2; --sidebar-muted: #7f9a85; --sidebar-brand: #9fe28a; --sidebar-hover: rgba(255,255,255,0.06); --sidebar-active-bg: rgba(46,157,70,0.20); --sidebar-active-text: #9fe28a; --sidebar-border: rgba(255,255,255,0.08); --ok-bg: #e3f5e7; --ok-border: #b6e3bf; --ok-text: #1f6b32; --err-bg: #fdecea; --err-border: #f2b8b2; --err-text: #a12a1f; --shadow: 0 1px 3px rgba(20,35,26,0.08); } /* ---------- DUNKLES THEME ---------- */ [data-theme="dark"] { --bg: #0d1410; --card-bg: #111a14; --text: #eef6ef; --text-muted: #a8b8aa; --border: #334238; --input-bg: #0b120d; --hover-bg: #16281c; --topbar-bg: #090f0b; --topbar-text: #cfe3d2; --topbar-brand: #9fe28a; /* Sidebar (im Dunkelmodus noch etwas dunkler) */ --sidebar-bg: #070c08; --sidebar-text: #b8ccbc; --sidebar-muted: #6a8570; --sidebar-brand: #9fe28a; --sidebar-hover: rgba(255,255,255,0.05); --sidebar-active-bg: rgba(46,157,70,0.22); --sidebar-active-text: #9fe28a; --sidebar-border: rgba(255,255,255,0.06); --ok-bg: #1b3a22; --ok-border: #3f8f4c; --ok-text: #b7e9be; --err-bg: #3a1f1f; --err-border: #7a3a3a; --err-text: #f4b0b0; --shadow: 0 2px 6px rgba(0,0,0,0.35); }