CSS colour variables generator

Turns a list of name-and-value pairs into a `:root` block of CSS custom properties, normalising the names to valid identifiers and taking an optional prefix.

Custom properties are not the same thing as Sass variables, and the difference is the reason to use them. A Sass variable is substituted at build time and then gone; a custom property is live in the browser, inherits down the tree, and can be read and changed with JavaScript or overridden inside a media query. That is exactly what makes a dark mode a matter of redefining a handful of values rather than duplicating a stylesheet. Name them for their role, not their appearance. `--brand-blue` becomes a lie the day the brand changes; `--brand` does not. The same applies to `--grey-100` versus `--surface`: the first describes the value, the second describes the job, and only the second survives a redesign. One gotcha worth knowing: an invalid custom property value does not fall back at parse time the way a normal declaration does. It is substituted first and only then found to be invalid, at which point the property becomes unset rather than reverting to what it was — a failure mode that looks like the rule vanished.