Refactor naming of CSS color variables

[jotaen4tinypilot]

Currently, we use “meaningful” / descriptive names for the colour shades, like --brand-blue-light, or --brand-red-bright.

The downside of this naming approach is that it doesn’t scale well, the more colours we add. So we could consider changing it to something number-based, e.g. --brand-blue-1 through --brand-blue-5.

(I still, btw., believe that it’s worthwhile to have an explicit catalogue/inventory of all colours that we use, just to force ourselves to keep track of them, and add new ones only deliberately.)