/* ────────────────────────────────────────────────────────────────────────── xXx Sphere – Design Tokens Dark ist der Default. Reihenfolge der Auflösung: 1. :root → dark (Fallback, Spez. 0,1,0) 2. @media prefers-light → light via OS (Spez. 0,1,0, überschreibt via Position) 3. :root[data-theme=dark] → dark manuell (Spez. 0,2,0 – schlägt immer :root) 4. :root[data-theme=light]→ light manuell (Spez. 0,2,0 – schlägt immer :root) JS setzt data-theme auf und gewinnt damit immer. ────────────────────────────────────────────────────────────────────────── */ /* ── 1. Dark mode – Default ───────────────────────────────────────────────── */ :root { color-scheme: dark; /* Surfaces */ --color-bg: #0e0c15; --color-card: #19162a; --color-secondary: #272338; --color-surface: #201d2f; /* Text */ --color-text: #eae8f0; --color-muted: #8a879a; /* Brand */ --color-primary: #e94560; --color-primary-rgb: 233, 69, 96; /* Semantic */ --color-success: #27ae60; --color-danger: #e74c3c; /* Aliases */ --color-border: #272338; --color-hover: #272338; /* Shadows */ --shadow: 0 8px 32px rgba(0, 0, 0, 0.55); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); /* Overlay */ --overlay-bg: rgba(0, 0, 0, 0.55); /* Message boxes */ --msg-error-bg: #3d0f1a; --msg-warning-bg: #3a2c0a; --msg-warning-text: #f5c518; --msg-success-bg: #0f3d1a; /* Buttons */ --btn-primary-hover: #c73652; --btn-secondary-hover: #1a3a6a; /* Misc */ --placeholder: rgba(234, 232, 240, 0.35); --unread: #e94560; --accept: #27ae60; --decline: #c0392b; --breakpoint-mobile: 768px; } /* ── 2. Light mode via OS (CSS-Fallback, wenn JS nicht verfügbar) ─────────── */ @media (prefers-color-scheme: light) { :root { color-scheme: light; --color-bg: #f2f0f9; --color-card: #ffffff; --color-secondary: #e9e6f5; --color-surface: #f7f5fc; --color-text: #1a1628; --color-muted: #6a677e; --color-primary: #c9324d; --color-primary-rgb: 201, 50, 77; --color-success: #1a8c4e; --color-danger: #c0392b; --color-border: #d8d4ed; --color-hover: #e9e6f5; --shadow: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06); --overlay-bg: rgba(0, 0, 0, 0.35); --msg-error-bg: #fde8ec; --msg-warning-bg: #fdf5e0; --msg-warning-text: #b38800; --msg-success-bg: #e0f5e8; --btn-primary-hover: #a82942; --btn-secondary-hover: #d8d4ed; --placeholder: rgba(26, 22, 40, 0.30); --unread: #c9324d; --accept: #1a8c4e; --decline: #c0392b; } } /* ── 3+4. JS-Override via data-theme auf ───────────────────────────── */ /* :root[data-theme] hat Spezifität (0,2,0) und schlägt :root (0,1,0) immer. */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #0e0c15; --color-card: #19162a; --color-secondary: #272338; --color-surface: #201d2f; --color-text: #eae8f0; --color-muted: #8a879a; --color-primary: #e94560; --color-primary-rgb: 233, 69, 96; --color-success: #27ae60; --color-danger: #e74c3c; --color-border: #272338; --color-hover: #272338; --shadow: 0 8px 32px rgba(0, 0, 0, 0.55); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --overlay-bg: rgba(0, 0, 0, 0.55); --msg-error-bg: #3d0f1a; --msg-warning-bg: #3a2c0a; --msg-warning-text: #f5c518; --msg-success-bg: #0f3d1a; --btn-primary-hover: #c73652; --btn-secondary-hover: #1a3a6a; --placeholder: rgba(234, 232, 240, 0.35); --unread: #e94560; --accept: #27ae60; --decline: #c0392b; } :root[data-theme="light"] { color-scheme: light; --color-bg: #f2f0f9; --color-card: #ffffff; --color-secondary: #e9e6f5; --color-surface: #f7f5fc; --color-text: #1a1628; --color-muted: #6a677e; --color-primary: #c9324d; --color-primary-rgb: 201, 50, 77; --color-success: #1a8c4e; --color-danger: #c0392b; --color-border: #d8d4ed; --color-hover: #e9e6f5; --shadow: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06); --overlay-bg: rgba(0, 0, 0, 0.35); --msg-error-bg: #fde8ec; --msg-warning-bg: #fdf5e0; --msg-warning-text: #b38800; --msg-success-bg: #e0f5e8; --btn-primary-hover: #a82942; --btn-secondary-hover: #d8d4ed; --placeholder: rgba(26, 22, 40, 0.30); --unread: #c9324d; --accept: #1a8c4e; --decline: #c0392b; }