/* ========================================================================== Storefront theme palettes — one per App\Support\StorefrontThemes slug. Applied via [data-storefront-theme="slug"] on (storefront) or on a small wrapper div (admin/vendor theme-picker swatch previews). Each block overrides the same token set declared in shop.css's base :root — derived tokens there (--accent, --accent-dark, --on-accent) reference --gold/ --gold-dark/--on-gold via var() and so pick up each theme's values automatically without being redeclared here. "classic-editorial" mirrors shop.css's base :root exactly, so it's a no-op in practice — declared anyway so every theme (including the default) resolves identically through this one file, e.g. for swatch previews in Admin/Vendor settings. ========================================================================== */ :root[data-storefront-theme="classic-editorial"]{ --bg:#FFFFFF; --surface:#FFFFFF; --surface-alt:#F6F4EE; --text:#0A0A0A; --text-muted:#6B6558; --text-faint:#A69F8E; --border:#E7E2D3; --ink:#0A0A0A; --on-ink:#F5F1E6; --on-gold:#0A0A0A; --gold:#B7912B; --gold-light:#E3C567; --gold-dark:#8C6C1E; --display:'Playfair Display', serif; --sans:'Inter', sans-serif; } :root[data-storefront-theme="minimal-mono"]{ --bg:#FFFFFF; --surface:#FFFFFF; --surface-alt:#F5F5F5; --text:#111111; --text-muted:#666666; --text-faint:#999999; --border:#E0E0E0; --ink:#111111; --on-ink:#FFFFFF; --on-gold:#FFFFFF; --gold:#111111; --gold-light:#444444; --gold-dark:#000000; --display:'Inter', sans-serif; --sans:'Inter', sans-serif; } :root[data-storefront-theme="boutique-blush"]{ --bg:#FFF9F7; --surface:#FFFFFF; --surface-alt:#FBEDEA; --text:#3A2C2C; --text-muted:#8C7373; --text-faint:#C4A8A8; --border:#F0DAD4; --ink:#3A2C2C; --on-ink:#FFF3EF; --on-gold:#3A2C2C; --gold:#D9A79C; --gold-light:#EFC9BE; --gold-dark:#B8776A; --display:'Playfair Display', serif; --sans:'Inter', sans-serif; } :root[data-storefront-theme="bold-luxury"]{ --bg:#0A0A0A; --surface:#141414; --surface-alt:#1C1414; --text:#F5F1E6; --text-muted:#B8A8A8; --text-faint:#6B5555; --border:#2E1E1E; --ink:#000000; --on-ink:#F5F1E6; --on-gold:#0A0A0A; --gold:#C41E3A; --gold-light:#E33A56; --gold-dark:#8C1428; --display:'Playfair Display', serif; --sans:'Inter', sans-serif; } :root[data-storefront-theme="coastal-linen"]{ --bg:#FBF9F4; --surface:#FFFFFF; --surface-alt:#F1EDE1; --text:#2B3A42; --text-muted:#71858C; --text-faint:#AEC0C4; --border:#DDE3DE; --ink:#2B3A42; --on-ink:#F5F1E6; --on-gold:#FFFFFF; --gold:#5B8A9A; --gold-light:#89AFBC; --gold-dark:#3D6472; --display:'Playfair Display', serif; --sans:'Inter', sans-serif; } :root[data-storefront-theme="streetwear-bold"]{ --bg:#0D0D0D; --surface:#161616; --surface-alt:#1E1E1E; --text:#F2F2F2; --text-muted:#A0A0A0; --text-faint:#5C5C5C; --border:#2A2A2A; --ink:#000000; --on-ink:#F2F2F2; --on-gold:#0D0D0D; --gold:#C6F135; --gold-light:#DFF77A; --gold-dark:#9BC220; --display:'Inter', sans-serif; --sans:'Inter', sans-serif; } :root[data-storefront-theme="vintage-atelier"]{ --bg:#FAF3E7; --surface:#FFFDF8; --surface-alt:#F0E4CE; --text:#3B2A1F; --text-muted:#7A6249; --text-faint:#B79C7D; --border:#E2D0AE; --ink:#3B2A1F; --on-ink:#FAF3E7; --on-gold:#FAF3E7; --gold:#7A2331; --gold-light:#A3495A; --gold-dark:#551723; --display:'Playfair Display', serif; --sans:'Inter', sans-serif; } :root[data-storefront-theme="noir"]{ --bg:#050505; --surface:#0F0F0F; --surface-alt:#181818; --text:#FFFFFF; --text-muted:#B0B0B0; --text-faint:#5A5A5A; --border:#242424; --ink:#000000; --on-ink:#FFFFFF; --on-gold:#000000; --gold:#FFFFFF; --gold-light:#E5E5E5; --gold-dark:#CCCCCC; --display:'Playfair Display', serif; --sans:'Inter', sans-serif; } :root[data-storefront-theme="artisan-craft"]{ --bg:#FAF4EC; --surface:#FFFFFF; --surface-alt:#F0E6D6; --text:#3E3226; --text-muted:#7D6E58; --text-faint:#B7A88E; --border:#E2D3B8; --ink:#3E3226; --on-ink:#FAF4EC; --on-gold:#FAF4EC; --gold:#B8623A; --gold-light:#D18A63; --gold-dark:#8C4726; --display:'Playfair Display', serif; --sans:'Inter', sans-serif; } :root[data-storefront-theme="pastel-pop"]{ --bg:#FDFBFF; --surface:#FFFFFF; --surface-alt:#F3F0FB; --text:#443B54; --text-muted:#8D80A3; --text-faint:#C7BEDA; --border:#E5DFF5; --ink:#443B54; --on-ink:#FDFBFF; --on-gold:#443B54; --gold:#A692D1; --gold-light:#C7B8E8; --gold-dark:#7F69B0; --display:'Inter', sans-serif; --sans:'Inter', sans-serif; } /* Swatch preview chips — used by the admin/vendor theme-picker grids, wraps a small div in [data-storefront-theme="slug"] to preview real tokens without needing shop.css's full storefront-only structural rules. */ .theme-swatch-preview{display:flex;gap:0;border-radius:2px;overflow:hidden;height:28px;border:1px solid var(--border);} .theme-swatch-preview span{flex:1 1 0;} .theme-swatch-preview span:nth-child(1){background:var(--bg);} .theme-swatch-preview span:nth-child(2){background:var(--surface-alt);} .theme-swatch-preview span:nth-child(3){background:var(--gold);} .theme-swatch-preview span:nth-child(4){background:var(--ink);}