/* theme.css * Shared colour palette, as CSS custom properties — used by * product_page.css, product_grid.css, product_browser.css, and * swatch.css. Consolidated here because these same handful of colours * were previously hardcoded separately in every one of those files, * meaning a rebrand or even a single colour tweak meant hunting down and * editing the same hex value in several different places by hand, with * no guarantee they'd all agree. Link this file BEFORE the page-specific * stylesheet that uses these variables, since :root custom properties * need to be defined before anything references them. * * NOTE (2026-08-25): there is now deliberately only ONE red across the * whole site — --brand-red, #DC1F1D — used for the promo badge * background (constants.php's PROMO_BG_COLOR, kept in sync with this by * hand since a PHP define() can't reference a CSS custom property), the * sale price, and the "View Product"/add-to-basket buttons. The one * deliberate exception is product_hub.php's tab bar — see * product_hub.css's own --hub-red, which is intentionally NOT this * variable, so the hub can keep a different shade without affecting * everything else that reads --brand-red. * * letter-spacing below is set ONCE, here, on `html` — every page in this * file set links theme.css first (see each .php file's own ), and * letter-spacing is an INHERITED property, so this one line cascades to * every element on every page without needing to be repeated anywhere * else. That's the efficient way to apply one value site-wide: one * inherited property, one rule, rather than a rule (or a `*{}` universal * selector, which is far more expensive for the browser to match — it * has to test every single element individually) repeated in every * page's own stylesheet. */ :root{ --brand-red: #DC1F1D; --brand-red-hover: #E5504E; --brand-red-dark: #7A0D0D; /* out-of-stock CTA button */ --brand-red-dark-hover: #8F1A1A; --border-grey: #d1d5db; /* input/swatch borders */ --card-border-grey: #e5e7eb; /* card/list-item borders */ --page-bg: #f8f9fa; --image-placeholder-bg: #f0f0f0; --link-blue: #0073aa; /* "+N more" links */ --text-dark: #222; } html{ letter-spacing: -.05em; }