Did you set the custom property first? If you didn’t, it will “fall through” and use the browser default.
Also, did you realize your a.nav will never select? That will only hit items like this
<a class="nav" href="#">Click me</a>
You need to use nav a. I’ve taken your code, added a different custom property to your visited so it doesn’t look like the other links, and changed that selector (plus the flex won’t work because display:flex needed to be put on the nav element, not the links