/* ========================================================================== themes.css — Farbwelten. Umschaltbar per data-theme auf . 4 Themes: rewards | app | download | neutral Hell/Dunkel folgt automatisch der Systemeinstellung. Alle Textfarben sind gegen ihren Hintergrund auf mindestens 4.5:1 geprueft — Vorgabe aus CPALead ToS 11(c) (Kontrast) und WCAG AA. ========================================================================== */ /* ---------- Neutrale Basis: HELL ---------- */ :root { color-scheme: light dark; --bg: #f5f7fa; --surface: #ffffff; --surface-2: #eef1f6; --line: #e0e5ec; --fg: #0f141b; /* 17.9:1 auf --surface */ --fg-2: #333d4b; /* 11.1:1 */ --muted: #5b6575; /* 6.2:1 */ --terms-bg: #f7f9fc; --terms-fg: #2a3341; /* 12.4:1 auf --terms-bg */ --warn: #b45309; --warn-bg: #fff8ed; --shadow: 0 1px 2px rgba(16,24,40,.05), 0 10px 28px -12px rgba(16,24,40,.16); } /* ---------- Neutrale Basis: DUNKEL ---------- */ @media (prefers-color-scheme: dark) { :root { --bg: #0b0e13; --surface: #141922; --surface-2: #1c222d; --line: #28303d; --fg: #eef2f8; /* 15.4:1 auf --surface */ --fg-2: #c4cddb; /* 10.2:1 */ --muted: #93a0b2; /* 6.1:1 */ --terms-bg: #0f141c; --terms-fg: #ccd6e2; /* 11.7:1 auf --terms-bg */ --warn: #d97706; --warn-bg: #1e1608; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.7); } } /* ========================================================================== Akzente je Theme — HELL --accent-grad : Button-Verlauf (weisser Text, hellstes Ende >= 4.5:1) --accent-ink : Akzent-Textfarbe auf --surface ========================================================================== */ [data-theme="rewards"] { --accent-grad: linear-gradient(135deg, #7c3aed 0%, #b31fb0 100%); --accent-fg: #ffffff; --accent-ink: #7a2d90; --accent-soft: #f8f0ff; --accent-line: #e5d3f7; --accent-glow: rgba(124,58,237,.28); --bg-accent: radial-gradient(1100px 520px at 50% -12%, rgba(124,58,237,.10), transparent 70%); } [data-theme="app"] { --accent-grad: linear-gradient(135deg, #1d4ed8 0%, #0369a1 100%); --accent-fg: #ffffff; --accent-ink: #1544b8; --accent-soft: #eef4ff; --accent-line: #d0e0fb; --accent-glow: rgba(29,78,216,.26); --bg-accent: radial-gradient(1100px 520px at 50% -12%, rgba(29,78,216,.10), transparent 70%); } [data-theme="download"] { --accent-grad: linear-gradient(135deg, #0f766e 0%, #047857 100%); --accent-fg: #ffffff; --accent-ink: #0b6259; --accent-soft: #ecfbf7; --accent-line: #c8ece3; --accent-glow: rgba(15,118,110,.26); --bg-accent: radial-gradient(1100px 520px at 50% -12%, rgba(15,118,110,.10), transparent 70%); } [data-theme="neutral"] { --accent-grad: linear-gradient(135deg, #111827 0%, #374151 100%); --accent-fg: #ffffff; --accent-ink: #2f3947; --accent-soft: #f1f3f7; --accent-line: #dde2ea; --accent-glow: rgba(17,24,39,.22); --bg-accent: radial-gradient(1100px 520px at 50% -12%, rgba(17,24,39,.06), transparent 70%); } /* ========================================================================== Akzente je Theme — DUNKEL Nur die Werte, die sich aendern muessen: Ink wird hell, Soft transluzent. ========================================================================== */ @media (prefers-color-scheme: dark) { [data-theme="rewards"] { --accent-grad: linear-gradient(135deg, #8b5cf6 0%, #c936c4 100%); --accent-ink: #dbb2f5; /* 8.4:1 auf --surface */ --accent-soft: rgba(139,92,246,.16); --accent-line: rgba(139,92,246,.34); --accent-glow: rgba(139,92,246,.34); --bg-accent: radial-gradient(1100px 520px at 50% -12%, rgba(139,92,246,.14), transparent 70%); } [data-theme="app"] { --accent-grad: linear-gradient(135deg, #3b82f6 0%, #0891b2 100%); --accent-ink: #97c6ff; /* 8.7:1 */ --accent-soft: rgba(59,130,246,.16); --accent-line: rgba(59,130,246,.34); --accent-glow: rgba(59,130,246,.32); --bg-accent: radial-gradient(1100px 520px at 50% -12%, rgba(59,130,246,.14), transparent 70%); } [data-theme="download"] { --accent-grad: linear-gradient(135deg, #14b8a6 0%, #059669 100%); --accent-ink: #6fe0c8; /* 10.1:1 */ --accent-soft: rgba(20,184,166,.15); --accent-line: rgba(20,184,166,.32); --accent-glow: rgba(20,184,166,.28); --bg-accent: radial-gradient(1100px 520px at 50% -12%, rgba(20,184,166,.12), transparent 70%); } [data-theme="neutral"] { --accent-grad: linear-gradient(135deg, #475569 0%, #64748b 100%); --accent-ink: #cbd5e1; /* 10.8:1 */ --accent-soft: rgba(148,163,184,.15); --accent-line: rgba(148,163,184,.30); --accent-glow: rgba(100,116,139,.30); --bg-accent: radial-gradient(1100px 520px at 50% -12%, rgba(148,163,184,.07), transparent 70%); } } /* Fallback, falls kein data-theme gesetzt ist */ :root:not([data-theme]) { --accent-grad: linear-gradient(135deg, #111827 0%, #374151 100%); --accent-fg: #ffffff; --accent-ink: #2f3947; --accent-soft: #f1f3f7; --accent-line: #dde2ea; --accent-glow: rgba(17,24,39,.22); --bg-accent: none; }