Five colours, one CSS variable

Every service page on the site has its own accent colour. Audio is cyan. Production is emerald. Musician is orange. Software is purple. Accessibility is pink. The entire colour system runs on a single CSS custom property — --service-accent — set as an inline style on the root div of each page. Every component underneath reads that variable. Headings, buttons, active states, card borders, progress indicators, form highlights — all of them pull from --service-accent. The checkout page reads the product's service type and sets the accent automatically, so a client buying a mixing package sees cyan through the whole flow and a client buying a landing page sees purple. No theme prop drilling, no context providers, no conditional className logic. One CSS variable at the top, and every child component adapts. The sidebar highlights the active product with an accent-coloured border using color-mix to generate a subtle tinted background. The wizard steps use the accent for progress. The form accordion uses it for the active section indicator. Adding a sixth service colour means changing one hex value in one config object. The components do not know or care which service they are rendering for. They just read the variable.