To use the negative value of a CSS variable, it must be wrapped in the calc function and multiplied by -1. Like this: calc(var(--my-variable) * -1).

A common scenario could be when there is a variable for the margin and we want to use it to offset the margin in the opposite direction. For example:

:root {
  --margin: 20px;
}

/* Set margin-left of the container to -20px */
.container {
  margin-left: calc(var(--margin) * -1);
}

Simply adding - in front of the variable like this -var(--margin), will not work.