/* ═══════════════════════════════════════════════════════════════════════════════ VSG SHARED THEME LAYER /assets/vsg-theme.css ───────────────────────────────────────────────────────────────────────────── Single source of truth for the VSG palette and every site theme. Linked by: /index.html · /catalogue/index.html · /stones/index.html HOW IT WORKS Colours are declared as custom properties on :root. Each theme is a body[data-theme="…"] block that re-declares a subset of those properties. Because is a CLOSER ancestor than :root for every element in the page, a value declared on body[data-theme=…] always wins over the :root value — regardless of stylesheet source order. That is what lets this file be loaded AFTER a page's own stylesheet (e.g. /stones/stones-shared.css) and still override its :root palette. Corollary, and the one thing to watch: a literal hardcoded hex in a page's own CSS (a colour NOT routed through a var) cannot be themed. If a section refuses to change theme, that is the reason — route it through a var. ADDING A THEME 1. Add a body[data-theme="your-name"] block here. 2. Add a matching