/* ============================================================================ tokens.css — Design-Tokens (Farben, Abstände, Typografie) ---------------------------------------------------------------------------- Zentrale Design-Variablen. Ändere Farben/Abstände NUR hier — sie wirken automatisch in der ganzen App. Enthält Light- und Dark-Mode. Basis: Stückemann-Marke (#0085C2) + Anthrazit (Wunsch Geschäftsführung), clean & modern. Siehe DESIGN.md. ============================================================================ */ :root { /* ---- Markenfarbe (verbindlich, aus Gestaltungsrichtlinien) ---- */ --marke: #0085C2; /* RGB 0/133/194 */ --marke-dunkel: #006a9c; --marke-tint: #e6f3fa; /* ---- Neutrale Farben (Light Mode) ---- */ --anthrazit: #2b2f36; --text: #2b2f36; --text-sekundaer: #4a4f57; --grau: #6b7280; --rand: #e2e5ea; --bg: #f5f6f8; --flaeche: #ffffff; --flaeche-alt: #f0f2f5; /* ---- Statusfarben ---- */ --erfolg: #2e9e5b; --erfolg-bg: #e7f5ec; --warnung: #d99a00; --warnung-bg: #fbf3e0; --fehler: #d64545; --fehler-bg: #fbeaea; --info: var(--marke); --info-bg: var(--marke-tint); --zeit: #7c5cbf; /* Zeitanpassung (kommt später/geht früher) */ --zeit-bg: #f1ecf9; /* ---- Maße ---- */ --radius: 10px; --radius-klein: 6px; --schatten: 0 2px 12px rgba(20, 30, 45, .07); --schatten-stark: 0 6px 24px rgba(20, 30, 45, .13); /* ---- Abstände ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* ---- Typografie ---- */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-h1: 1.6rem; --fs-h2: 1.15rem; --fs-body: 0.95rem; --fs-klein: 0.82rem; color-scheme: light; } /* ---- Dark Mode ---- Aktiviert über (per Umschalter im Header). */ [data-theme="dark"] { --marke: #33a3d6; /* etwas heller für Kontrast auf dunkel */ --marke-dunkel: #2a8bb8; --marke-tint: #16323f; --anthrazit: #e8eaed; --text: #e8eaed; --text-sekundaer: #a8adb5; --grau: #8b9199; --rand: #363b43; --bg: #1a1d21; --flaeche: #24282e; --flaeche-alt: #2e333a; --erfolg: #4bbf7b; --erfolg-bg: #16301f; --warnung: #e0ad33; --warnung-bg: #33290f; --fehler: #e56b6b; --fehler-bg: #331a1a; --info: var(--marke); --info-bg: var(--marke-tint); --zeit: #a78bda; --zeit-bg: #2a2140; --schatten: 0 2px 12px rgba(0, 0, 0, .35); --schatten-stark: 0 6px 24px rgba(0, 0, 0, .5); color-scheme: dark; }