/* ============================================================================= Feedrium - Theme Variables Dark (Default) + Light Geschaltet via ============================================================================= */ /* DARK — Default und Fallback */ :root, [data-theme="dark"] { --bg: #0c0c0c; --bg2: #161616; --bg3: #1e1e1e; --bg4: #262626; --border: rgba(255, 255, 255, 0.10); --border-h: rgba(255, 255, 255, 0.20); --text: #f2f2f2; --text2: #a8a8a8; --text3: #666666; --blue: #00c8dc; --blue2: #00a8c0; --gold: #f6c36a; --green: #68d391; --red: #fc8181; --shadow: 0 4px 20px rgba(0, 0, 0, 0.4); --serif: 'Playfair Display', Georgia, serif; --sans: 'Sora', system-ui, -apple-system, sans-serif; } /* LIGHT — warmes Sand/Beige wie im Mockup */ [data-theme="light"] { --bg: #f4ede0; /* Sand-Beige für Hauptfläche */ --bg2: #ffffff; /* Cards */ --bg3: #faf3e6; /* Hover */ --bg4: #ede4d2; /* Akzent-Background */ --border: rgba(40, 70, 100, 0.10); --border-h: rgba(40, 70, 100, 0.20); --text: #1a2a3a; /* Dunkles Petrol für Lesbarkeit */ --text2: #4a6378; --text3: #7a8e9f; --blue: #0598a8; /* Etwas dunkler im Light-Mode für Kontrast */ --blue2: #047b87; --gold: #c89832; --green: #4a9d6f; --red: #c25555; --shadow: 0 2px 12px rgba(40, 70, 100, 0.12); } /* Smooth Transitions zwischen Themes */ body, .card, .btn-primary, .btn-ghost, .article-card, input, select, textarea, button { transition: background-color 0.25s ease, color 0.2s ease, border-color 0.2s ease; }