Organise CSS variables

[robb-j]

These are my first thoughts on organising the CSS variables in alembic. I'm thinking they should be namespaced to the thing they are used on and introduce axioms to be used across multiple things.

--color-foreground
    → --box-layout-foreground
    → --reel-layout-foreground

--color-background
    → --box-layout-background
    → --reel-layout-background

--border-thin
    → --box-border-thin

And we could consider these as axioms too

• --stroke — the colour of the primary content you're looking at, e.g. the text, border or icon
• --canvas — the colour that is behind the stroke, what you're drawing onto, e.g. the background colour
• --boundary — the minimum width of a line that will clearly separate two adjacent elements