/* ────────────────────────────────────────────────────────── ZULU shared design tokens Link this file from any page that needs consistent theming: Pair it with zulu-theme.js (which toggles [data-theme] on ). ──────────────────────────────────────────────────────────── */ :root { /* surfaces */ --bg: #060610; --bg2: #0a0918; --card: #0e0d1b; --card-bg: #0e0d1b; --panel: #0e0d1b; /* lines */ --line: rgba(255, 255, 255, .06); --line2: rgba(255, 255, 255, .11); --border: rgba(255, 255, 255, .06); --card-border: rgba(255, 255, 255, .08); /* text */ --txt: #f0f0f2; --txt-strong: #ffffff; --txt-mute: rgba(255, 255, 255, .65); --txt-dim: rgba(255, 255, 255, .42); --txt-faint: rgba(255, 255, 255, .28); --ash: rgba(255, 255, 255, .55); --bone: #ffffff; /* accents */ --col: #a78bfa; --acc: #a78bfa; --p: #a78bfa; --gold: #c9973e; --green: #3dba79; --red: #e8567a; --rose: #e8567a; --amber: #e8963a; --teal: #2dd4bf; --accent-grad: linear-gradient(120deg, var(--col) 0%, var(--amber) 100%); --noise-blend: overlay; --noise-op: .42; /* layout */ --mx: 1280px; } /* ──────────────────────────────── LIGHT MODE ──────────────────────────────── */ html[data-theme="light"] { color-scheme: light; --bg: #f7f2ea; --bg2: #fffaf3; --card: #ffffff; --card-bg: rgba(255, 255, 255, .92); --panel: #ffffff; --line: rgba(45, 32, 64, .12); --line2: rgba(45, 32, 64, .20); --border: rgba(45, 32, 64, .12); --card-border: rgba(45, 32, 64, .12); --txt: #1f1730; --txt-strong: #14102a; --txt-mute: rgba(31, 23, 48, .72); --txt-dim: rgba(31, 23, 48, .50); --txt-faint: rgba(31, 23, 48, .32); --ash: rgba(31, 23, 48, .62); --bone: #1f1730; --col: #7c3aed; --acc: #7c3aed; --p: #7c3aed; --gold: #b7791f; --green: #0f9f5e; --red: #d9465f; --rose: #d9465f; --amber: #b7791f; --teal: #0f9f8c; --accent-grad: linear-gradient(120deg, var(--col) 0%, var(--amber) 100%); --noise-blend: multiply; --noise-op: .22; } /* ── Light-mode overrides for product.html (.pd-*) so hardcoded white text becomes readable on light surfaces. Strong selectors so they win over inline page CSS without per-page edits. ── */ html[data-theme="light"] body { color: var(--txt) !important; } html[data-theme="light"] :where( .pd-name, .pd-price, .pd-stars, .pd-rating-val, .pd-bar-name, .pd-bar-price, .pd-seller-name, .pd-desc-label, .pd-desc, .pd-similar-title, .pd-similar-name, .pd-sim-name, .pd-sim-price, .pd-outlet-hname, .pd-outlet-gal-name, .pd-outlet-section-title, .pd-var-chip.on, .cart-title, .cart-row-name, .cart-row-price, .cart-sum-row.total, .nav-cart-iname, .nav-cart-iprice, .nav-cart-total, .nav-page-name, .nav-page-title ) { color: var(--txt-strong) !important; } html[data-theme="light"] :where( .pd-category, .pd-seller-sub, .pd-rating-cnt, .pd-var-label, .pd-tag, .pd-similar-row, .pd-bar-info, .pd-outlet-desc, .pd-outlet-meta-pill, .pd-outlet-gal-ct, .pd-outlet-view-btn, .pd-desc-toggle, .pd-mrp, .cart-row-brand, .cart-sum-row, .cart-count-lbl, .nav-cart-hdr, .nav-cart-empty, .nav-icon-btn, .footer-link, .footer-copy ) { color: var(--txt-mute) !important; } html[data-theme="light"] :where( .pd-seller-arr, .pd-stock-badge.out, .pd-car-dot, .pd-thumb, .pd-outlet-badge.off, .pd-outlet-skel ) { color: var(--txt-dim) !important; } html[data-theme="light"] .pd-fav-btn { color: var(--rose) !important; } /* Surfaces / cards / panels in light mode */ html[data-theme="light"] :where( .pd-seller, .pd-outlet-card, .pd-outlet-gal-card, .pd-sim-card, .nav-cart-drop, #cartPanel, .cart-row, .nav-cart-item, .pd-var-chip, .pd-desc, .pd-tag, .pd-stock-badge, .pd-outlet-meta-pill, .pd-outlet-act, .pd-car-btn, .pd-car-dot, .pd-thumb ) { background: var(--card-bg) !important; border-color: var(--border) !important; } html[data-theme="light"] :where(.pd-info, .pd-outlet-wrap, .pd-bar-info, .cart-empty-state) { color: var(--txt) !important; } html[data-theme="light"] #pdStickyBar { background: var(--card-bg) !important; border-top: 1px solid var(--border) !important; backdrop-filter: blur(12px); } html[data-theme="light"] #nav { background: rgba(255, 250, 243, .94) !important; border-bottom-color: var(--border) !important; color: var(--txt) !important; } html[data-theme="light"] #nav svg { stroke: var(--txt-mute) !important; } html[data-theme="light"] .nav-icon-btn { border-color: var(--border) !important; } html[data-theme="light"] .nav-icon-btn:hover { color: var(--col) !important; background: rgba(124, 58, 237, .08) !important; border-color: rgba(124, 58, 237, .25) !important; } html[data-theme="light"] :where(.btn-ghost) { color: var(--txt) !important; border-color: var(--border) !important; background: rgba(255, 255, 255, .55) !important; } html[data-theme="light"] :where(.btn-primary, .cart-btn-delivery, .cart-btn-pickup) { color: #fff !important; } /* Body backdrop for product page in light mode */ html[data-theme="light"] body { background: radial-gradient(circle at 15% 0%, rgba(124, 58, 237, .10), transparent 34%), radial-gradient(circle at 85% 12%, rgba(15, 159, 140, .08), transparent 32%), linear-gradient(180deg, #fffaf3 0%, #f7f0e8 48%, #efe3d6 100%) !important; } html[data-theme="light"] footer { background: transparent !important; color: var(--txt-mute) !important; }