I like the idea of using CSS variables for consistency.

Many years ago, before CSS variables were a thing, I did a very similar thing using a LESS function:

$zindices:
  hero-mobile,
  nav-bar,
  hero,
  nav-contents;

@function zindex($layer) {
  @return index($zindices, $layer);
}

Which would be used like:

z-index: zindex('hero'); 

The z-index value is just that string's position in the list.

Well given how many times I've tried z-index: 999999 and it didn't do what I wanted it to, the value of z-index is apparently multiplied by zero.

(OK fine, I'll read the article...)

inb4 --zz-top