Establish a consistent, flexible variable naming convention

This PR proposes and implements the following naming convention for all variables:

- Names must be lowercase and dash-separated (kebab-case).
- Variables without a qualifier at the end are implicitly “base” variables, i.e. the default value for that type, e.g. `$font-size`, `$brand-color`, `$grey-50`.
- Variables with a qualifier at the end are considered “variations” on a base variable, e.g. `$font-size-small, $brand-color-light`, `$grey-50-light`.
- Variables with a lot of variations may use a predefined scale, e.g. `$grey-10`, `-20`, `-30`, etc. Note that assigned values are intended to be only approximate (in this case, 10% or so). This provides room to adjust values without changing variable names, but should be more meaningful for users. Additional variables can be easily inserted between disparate values, e.g. `$grey-40` between `$grey-20` and `$grey-50`. Micro-variations should be rare, but are possible with a variation suffix such as `-light`, e.g. $grey-10-light.

Status: Ready for review
Reviewers: @jeffkamo @kpeatt

## Changes
- Apply the proposed variable naming convention across the board.

## Notes
- Fixes #11, #20, #22
- Improvement towards #19
- Overlaps with and intends to supercede PRs #12, #15
- Ignore changes to test/test.css. This file will soon be in .gitignore.