Framework: Use named SCSS variables for z-index values

[hoverduck]

We could create variables like this:

$bottom-layer: 0;
$middle-layer: 1;
$overlay-layer: 9999;

If we don't have some kind of system for this, we're going to end up with random z-indexes scattered throughout the code:

grep -orP --no-filename "z-index:[^;]*" stylesheets | sort | uniq -c

      8 z-index: 0
     17 z-index: 1
      5 z-index: 10
      6 z-index: 1000
      2 z-index: 10000
      1 z-index: 100000
      1 z-index: 11
      2 z-index: 11111
      2 z-index: 18
      1 z-index: 180
      1 z-index: 19
      8 z-index: 2
      5 z-index: 20
      1 z-index: 20000
      1 z-index: 201
      4 z-index: 3
      1 z-index: 30000
      1 z-index: 4000
      1 z-index: 40000
      1 z-index: 500
      1 z-index: 800
      2 z-index: 900
      3 z-index: 999
      1 z-index: 9998
      5 z-index: 9999
      1 z-index: 99999
      1 z-index: auto