Overriding :root CSS variables from inner scopes

In our design system at Stack Overflow, we use Less to compile CSS color values.

We have global Less variables like @orange-500 that are frequently modified for hover states, building border styling, background colors, etc.

In Less, this is written as darken(@orange-500, 5%). I'm trying to achieve something similar…