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.