Normalize variable names

[anselmbradford]

Current behavior

We have a number of different variable naming conventions in the project: For referring to elements, by:

• non-prefixed atomic name (ex)
• non-prefixed atomic name BEM-style (ex)
• element name (ex)
• conceptual name (ex)

For the states of things we use:

• BEM style (ex)
• dash style (ex)
• mix of BEM and dash (ex)

Expected behavior

• Variable naming conventions are consistent and when creating new variable names it's clear how to name them.

[anselmbradford]

Things we target with variables:

• text color
• border color
• background color
• outline color
• drop-shadow color
• The above for hover, focus, disabled, active (for links).
• margin
• padding
• height
• width (for breakpoints)
• font-size
• font family