/* Design tokens. Dark is the default; [data-theme="light"] overrides below. Dark palette matches the Brevo campaign look: warm near-black greys, a gold accent, and warm off-white text. Light mode keeps its indigo/violet accent. The theme is set on before first paint by an inline script in the layouts. */ :root { --bg: #0a0a0a; --bg-grad: linear-gradient(135deg, #0a0a0a 0%, #141414 55%, #0d0d0d 100%); --panel: #141414; --panel-2: #0f0f0f; --input-bg: #0f0f0f; /* Warm off-white text in dark mode (pure black in light, set below). Headings, paragraphs, body, and content links all resolve to this unless the Appearance picker injects a custom color. */ --text: #f2ede3; --muted: #8a8072; --accent: #c9a86a; --accent-2: #d8bd85; --accent-3: #b8975a; --brand-grad: linear-gradient(90deg, #b8975a, #c9a86a, #d8bd85); --border: #2a2620; --secondary: #1c1812; --error: #f87171; --error-bg: rgba(248, 113, 113, 0.12); --error-border: rgba(248, 113, 113, 0.3); --ok: #22c55e; --radius: 12px; /* Make native controls (select dropdowns, scrollbars, pickers) render dark. */ color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; } [data-theme="light"] { --bg: #f5f5fa; --bg-grad: linear-gradient(135deg, #f7f7fb 0%, #eef0f7 50%, #e9ecf6 100%); --panel: #ffffff; --panel-2: #f2f3f8; --input-bg: #ffffff; --text: #000000; --muted: #52525b; /* Light mode keeps the original indigo/violet accent ramp. */ --accent: #6366f1; --accent-2: #8b5cf6; --accent-3: #a855f7; --brand-grad: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7); --border: rgba(0, 0, 0, 0.10); --secondary: rgba(0, 0, 0, 0.06); --error: #dc2626; --error-bg: rgba(220, 38, 38, 0.08); --error-border: rgba(220, 38, 38, 0.25); --ok: #16a34a; color-scheme: light; } /* Dark mode places dark text on the gold accent (matches the Brevo CTAs) so buttons/badges/banner stay legible instead of white-on-gold. */ [data-theme="dark"] .btn, [data-theme="dark"] a.btn, [data-theme="dark"] .promo-banner, [data-theme="dark"] .promo-banner a, [data-theme="dark"] .cart-link .badge, [data-theme="dark"] .chip.active, [data-theme="dark"] .range-pill.active { color: #0a0a0a; } [data-theme="dark"] a.btn:hover { color: #0a0a0a; } /* Storefront light mode uses the gold brand (copper accent for legibility on the light background). Scoped to non-admin bodies so the admin UI is untouched. */ [data-theme="light"] body:not(.admin-body) { --accent: #a9803a; --accent-2: #b8975a; --accent-3: #8f6a2c; --brand-grad: linear-gradient(90deg, #b8975a, #c9a86a, #d8bd85); } /* The gold gradient buttons (incl. bare