/** * Lets Pop — semantic theme tokens (dark + light). * Active theme: [data-theme] on , set by toggle + localStorage only. */ /* ------------------------------------------------------------------ dark */ [data-theme='dark'] { color-scheme: dark; --color-bg: #000000; --color-surface: #141414; --color-surface-elevated: rgba(255, 255, 255, 0.06); --color-surface-image: #1c1c1c; --color-text: #ffffff; --color-text-body: #e0e0e0; --color-text-muted: #a3a3a3; --color-border: rgba(255, 255, 255, 0.14); --color-border-strong: rgba(255, 255, 255, 0.35); --color-accent: #f51822; --color-accent-hover: #ff2f38; --color-accent-soft: rgba(245, 24, 34, 0.16); --color-header-bg: #000000; --color-header-text: #ffffff; --color-header-icon: #ffffff; --color-header-hover: #f05a4f; --color-btn-primary-bg: #f51822; --color-btn-primary-text: #ffffff; --color-btn-primary-hover-bg: #111111; --color-btn-primary-hover-text: #ffffff; --color-btn-secondary-bg: #ffffff; --color-btn-secondary-text: #111111; --color-badge-bg: #ffffff; --color-badge-text: #111111; --color-shadow-accent: rgba(245, 24, 34, 0.22); --color-shadow-neutral: rgba(0, 0, 0, 0.35); --color-input-bg: rgba(255, 255, 255, 0.06); --color-overlay: rgba(0, 0, 0, 0.62); --color-drawer-bg: #0a0a0a; --color-marquee-bg: #f51822; --color-marquee-text: #ffffff; --color-smooth-bg: #000000; } /* ----------------------------------------------------------------- light */ [data-theme='light'] { color-scheme: light; --color-bg: #ffffff; --color-surface: #f5f5f5; --color-surface-elevated: rgba(0, 0, 0, 0.04); --color-surface-image: #ececec; --color-text: #111111; --color-text-body: #333333; --color-text-muted: #6b6b6b; --color-border: rgba(0, 0, 0, 0.12); --color-border-strong: rgba(0, 0, 0, 0.28); --color-accent: #f51822; --color-accent-hover: #d4141c; --color-accent-soft: rgba(245, 24, 34, 0.1); --color-header-bg: #ffffff; --color-header-text: #111111; --color-header-icon: #111111; --color-header-hover: #f51822; --color-btn-primary-bg: #f51822; --color-btn-primary-text: #ffffff; --color-btn-primary-hover-bg: #111111; --color-btn-primary-hover-text: #ffffff; --color-btn-secondary-bg: #111111; --color-btn-secondary-text: #ffffff; --color-badge-bg: #111111; --color-badge-text: #ffffff; --color-shadow-accent: rgba(245, 24, 34, 0.18); --color-shadow-neutral: rgba(0, 0, 0, 0.12); --color-input-bg: rgba(0, 0, 0, 0.04); --color-overlay: rgba(0, 0, 0, 0.45); --color-drawer-bg: #ffffff; --color-marquee-bg: #f51822; --color-marquee-text: #ffffff; --color-smooth-bg: #ffffff; } /* --------------------------------------------------- legacy / alias bridge */ [data-theme='dark'], [data-theme='light'] { --clr-bg: var(--color-bg); --clr-surface: var(--color-surface); --clr-surface-img: var(--color-surface-image); --clr-text: var(--color-text); --clr-body: var(--color-text-body); --clr-muted: var(--color-text-muted); --clr-accent-red: var(--color-accent); --clr-accent-yel: #f5a623; --clr-accent-grn: var(--color-surface); --clr-btn-dark: var(--color-btn-secondary-bg); --clr-btn-text: var(--color-btn-secondary-text); --clr-badge-bg: var(--color-badge-bg); --clr-badge-text: var(--color-badge-text); --clr-border: var(--color-border); --lp-color-primary: var(--color-text); --lp-color-primary-light: var(--color-text-body); --lp-color-primary-lighter: var(--color-text-muted); --lp-bg-white: var(--color-bg); --lp-bg-cream: var(--color-surface); --lp-bg-warm: var(--color-surface); --lp-bg-beige: var(--color-surface-image); --lp-text-primary: var(--color-text); --lp-text-secondary: var(--color-text-body); --lp-text-muted: var(--color-text-muted); --lp-text-light: var(--color-text-muted); --lp-text-white: #ffffff; --lp-border-light: var(--color-border); --lp-border-medium: var(--color-border-strong); --lp-border-dark: var(--color-text); --lp-wc-ac-surface: var(--color-surface-elevated); --lp-wc-ac-border: var(--color-border); --lp-wc-ac-accent: var(--color-accent); --lp-wc-ac-accent-hover: var(--color-accent-hover); --lp-cart-accent: var(--color-accent); --lp-cart-accent-hover: var(--color-accent-hover); --lp-cart-surface: var(--color-surface-elevated); --lp-cart-border: var(--color-border); --lp-cart-bg: var(--color-drawer-bg); --lp-corp-accent: var(--color-accent); --lp-corp-accent-hover: var(--color-accent-hover); --lp-corp-surface: var(--color-surface-elevated); --lp-corp-border: var(--color-border); --lp-product-card-border: #00000014; }