/* ============================================================ TECP Popups — shared design tokens for all overlays/drawers/modals (Phase 5). One source of truth for: mini-cart, filter drawer, payment-method delete modal, and any future pop-up. Two themes switched by a single class on : (default) → GLASS (dark overlay + translucent glass panel) body.tecp-theme-white → WHITE (dark overlay + solid white panel) Consumers reference var(--tecp-pop-*) only — never hard-coded colours. Change a pop-up's look site-wide by editing ONE variable here. ============================================================ */ :root { /* shared drawer width (filter left / mini-cart right) */ --tecp-drawer-width: 480px; /* ---- overlay (the dimming layer behind every pop-up) ---- */ --tecp-pop-overlay-bg: rgba(19, 19, 19, 0.80); /* #131313CC — §3 standard */ /* ---- panel (the window itself) ---- */ --tecp-pop-panel-bg: rgba(255, 255, 255, 0.08); /* #FFFFFF14 */ --tecp-pop-panel-blur: 1.3px; /* ⚠ blur ONLY on pop-ups (§3) */ --tecp-pop-panel-border: rgba(255, 255, 255, 0.12); --tecp-pop-panel-shadow: none; /* ---- text ---- */ --tecp-pop-text: #ffffff; --tecp-pop-text-muted: rgba(255, 255, 255, 0.5); --tecp-pop-text-faint: rgba(255, 255, 255, 0.4); /* ---- separators ---- */ --tecp-pop-sep: rgba(255, 255, 255, 0.25); /* in-panel separator (§3) */ /* ---- interactive surfaces (rows, inputs, secondary buttons) ---- */ --tecp-pop-surface: rgba(255, 255, 255, 0.08); --tecp-pop-surface-hover: rgba(255, 255, 255, 0.15); --tecp-pop-surface-active: rgba(255, 255, 255, 0.25); --tecp-pop-surface-border: rgba(255, 255, 255, 0.15); /* ---- primary button (checkout / apply / confirm) ---- */ --tecp-pop-primary-bg: rgba(255, 255, 255, 0.25); --tecp-pop-primary-bg-hover: rgba(255, 255, 255, 0.40); --tecp-pop-primary-text: #ffffff; /* ---- close / remove icons ---- */ --tecp-pop-icon: rgba(255, 255, 255, 0.4); --tecp-pop-icon-hover: rgba(255, 255, 255, 0.84); /* ---- swatch / control borders that need contrast on glass ---- */ --tecp-pop-control-border: rgba(255, 255, 255, 0.4); } /* ============================================================= WHITE THEME — solid white panel, dark text. Overlay stays dark. Toggle by adding `tecp-theme-white` to . ============================================================= */ body.tecp-theme-white { --tecp-pop-overlay-bg: rgba(19, 19, 19, 0.55); --tecp-pop-panel-bg: #ffffff; --tecp-pop-panel-blur: 0px; --tecp-pop-panel-border: rgba(0, 0, 0, 0.08); --tecp-pop-panel-shadow: none; --tecp-pop-text: rgba(0, 0, 0, 0.85); --tecp-pop-text-muted: rgba(0, 0, 0, 0.5); --tecp-pop-text-faint: rgba(0, 0, 0, 0.4); --tecp-pop-sep: rgba(0, 0, 0, 0.08); --tecp-pop-surface: rgba(0, 0, 0, 0.05); --tecp-pop-surface-hover: rgba(0, 0, 0, 0.12); --tecp-pop-surface-active: rgba(0, 0, 0, 0.80); --tecp-pop-surface-border: rgba(0, 0, 0, 0.15); --tecp-pop-primary-bg: rgba(0, 0, 0, 0.85); --tecp-pop-primary-bg-hover: #000000; --tecp-pop-primary-text: #ffffff; --tecp-pop-icon: rgba(0, 0, 0, 0.4); --tecp-pop-icon-hover: rgba(0, 0, 0, 0.75); --tecp-pop-control-border: rgba(0, 0, 0, 0.2); }