/* ============================================================================ STOREFRONT COLOUR THEME (Shop Manager → «Цветовая тема» → public /shop/) ---------------------------------------------------------------------------- The shop owner picks a named preset in Shop Manager; it is saved on the shop record (shops.theme) and, on the public storefront, js/shop-theme.js stamps `data-shop-theme=""` on (:root). These rules then re-tint ONLY the shop's own accent surfaces. HARD CONSTRAINTS honoured here: • Colours are EXISTING brand tokens only (tokens.css) — no invented values. • Only `.shop-*` storefront classes are targeted. The global site header, footer and the sand store-pill are never selected, so the canonical brand chrome and the "our-shop pill = sand" rule are untouched. • DEFAULT = no `data-shop-theme` attribute = the current look. Nothing here applies until the owner deliberately picks a non-default preset. • Presets are scoped by explicit value (`:is(...pine, ...ink, ...plum)`) so an unexpected attribute value can never leave an accent property undefined. ========================================================================== */ /* Preset → brand-token accent. Kept in sync with the backend zod enum (backend/routes/shops.js) and the Shop Manager picker (shop-manager.html). */ :root[data-shop-theme="pine"] { --shop-theme-accent: var(--color-forest-dark); } :root[data-shop-theme="ink"] { --shop-theme-accent: var(--color-ink); } :root[data-shop-theme="plum"] { --shop-theme-accent: var(--color-ink-soft); } /* Shop header (cover) fill — mirrors the canonical forest gradient formula, swapping in the theme accent. Only visible when no banner image is uploaded (an uploaded banner paints over it, exactly as with the default look). */ :is(:root[data-shop-theme="pine"], :root[data-shop-theme="ink"], :root[data-shop-theme="plum"]) .shop-cover { background: linear-gradient(115deg, color-mix(in srgb, var(--shop-theme-accent) 72%, var(--color-ink)) 0%, color-mix(in srgb, var(--shop-theme-accent) 32%, var(--color-cream)) 48%, var(--color-sand) 100%); } /* Primary Contact button fill. */ :is(:root[data-shop-theme="pine"], :root[data-shop-theme="ink"], :root[data-shop-theme="plum"]) .shop-action--primary::before { background: var(--shop-theme-accent); } /* Active storefront tab. */ :is(:root[data-shop-theme="pine"], :root[data-shop-theme="ink"], :root[data-shop-theme="plum"]) .shop-tab.is-active, :is(:root[data-shop-theme="pine"], :root[data-shop-theme="ink"], :root[data-shop-theme="plum"]) .shop-tab.is-active:hover, :is(:root[data-shop-theme="pine"], :root[data-shop-theme="ink"], :root[data-shop-theme="plum"]) .shop-tab.is-active:focus-visible { background: var(--shop-theme-accent); }