> Preprocessors evaluate CSS and the cascade so there's nothing stopping them from adding local scope or specificity to variables.

That cascade depends on the structure of the document, not just the CSS. For instance, consider the following (contrived) example:

    :root { var-accent: black; }
    .someclass > :first-child { var-accent: blue; }
    .otherclass { background-color: var(accent); }
    .anotherclass :first-letter { color: var(accent); }

The value of var(accent) for any element depends on whether the ancestors of that element include the first child of an element with class="someclass". For a preprocessor to duplicate that effect on the server side, it would need to construct all possible combinations of the selectors for the variables and the selectors depending on those variables:

    .otherclass { background-color: black; }
    .anotherclass :first-letter { color: black; }
    .someclass > :first-child .otherclass { background-color: blue; }
    .someclass > :first-child .anotherclass :first-letter { color: blue; }

Now consider that with a dozen variables and a hundred variable-dependent rules.

> On the other hand, if you can really edit variable values with Javascript then that would be client-side only, although I haven't seen anything that says you _can_ do that - for all we know Javascript may only allow getting/setting of the evaluated value, not the variable expression itself.

The CSS Variables spec talks about dynamic variable updates via scripting.