Add CSS vars and refactor Tailwind brand values for robustness

[tarinrickett]

Currently, our Tailwind CSS brand values are specific to the colors they represent; e.g., bluedot-lighter.

I would like us to adopt a more generic naming system, e.g. bluedot-primary, bluedot-secondary, etc. so that we are set up to adapt more rapidly to changing design system requirements.

I recommend doing this in a backwards compatible manner; i.e., add the new values to the existing list and map them all to CSS vars:

        colors: {
          bluedot: {
-            normal: '#0037FF',
+           normal: var(--bluedot-normal),
+           primary: var(--bluedot-normal),
          },

Open to discussion here!

---

This is not just for color tokens – we should also update for standard grid sizes (incl. width, padding, margins, etc.), font sizes (s/m/l), etc.

[domdomegg]

sgtm

[tarinrickett]

Blocked

Waiting on definitions from UX. ETA EOW