/* ============================================================ Elvaro — LIGHT mode (preview). The storefront is dark by default. This file only re-maps the colour tokens when is present (set by the ?elvaro_theme=light link — see inc/light-mode.php). It keeps the gold brand accent, typography, spacing, radii and motion identical to the dark DS — only colours invert. ============================================================ */ html[data-elvaro-theme="light"] { color-scheme: light; /* ---------- Surfaces (dark → light) ---------- */ --bg: #F4F6F8; --surface-1: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F1F3F5; --surface-4: #E7EBEF; --hairline: rgba(10, 14, 17, 0.08); --hairline-strong: rgba(10, 14, 17, 0.16); --hairline-yellow: rgba(214, 154, 3, 0.55); /* ---------- Foreground (light text → dark text) ---------- */ --fg-1: #0E1215; --fg-2: rgba(10, 14, 17, 0.72); --fg-3: rgba(10, 14, 17, 0.56); --fg-4: rgba(10, 14, 17, 0.42); --fg-on-yellow: #0A0E11; /* Channel inversion — flips every rgba(var(--fg-rgb)/--bg-rgb), …) automatically. */ --fg-rgb: 14, 18, 21; /* ink → dark on light */ --bg-rgb: 244, 246, 248; /* page-bg → light */ /* ---------- Brand (kept; soft tint a touch stronger on white) ---------- */ --brand-yellow-soft: rgba(247, 183, 3, 0.16); --brand-yellow-ring: rgba(247, 183, 3, 0.45); /* ---------- Semantic soft tints (dark → light) ---------- */ --success-soft: #E6F7EE; --warning-soft: #FDF3E0; --danger-soft: #FCE9EA; --info-soft: #E7F0FE; /* ---------- Condition badges (light bg + darker fg for contrast) ---------- */ --cond-new-bg: #E3EFFB; --cond-new-fg: #1366C9; --cond-tested-bg: #F6EFD6; --cond-tested-fg: #8A6A00; --cond-refurb-bg: #DDF3E8; --cond-refurb-fg: #0E7A45; --cond-broken-bg: #FBE4E5; --cond-broken-fg: #C32A2A; --cond-excellent-bg: #ECE8FB; --cond-excellent-fg: #5B3FD6; --cond-good-bg: #FBE9DC; --cond-good-fg: #C25A12; /* ---------- Shadows (softer on light) ---------- */ --shadow-card: 0 1px 0 0 rgba(255,255,255,0.6) inset, 0 8px 24px -14px rgba(10,14,17,0.18); --shadow-pop: 0 24px 48px -16px rgba(10,14,17,0.22), 0 1px 0 0 rgba(255,255,255,0.6) inset; --shadow-button: 0 1px 0 0 rgba(255,255,255,0.7) inset, 0 4px 10px -6px rgba(10,14,17,0.22); } /* A few spots in the theme paint the page/body dark directly rather than via a token — pin those to the light bg so the override is complete. */ html[data-elvaro-theme="light"], html[data-elvaro-theme="light"] body { background-color: var(--bg); color: var(--fg-1); }