I found a solution that works well for most use cases. At the top of each page (I normally add it to my nav component) add an embed with the same variable names but custom values. Something like this:

<style>

  :root {

  	--_fonts---step-1: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
	--_spacing---xl: calc(100vw - 40px);

  }

</style>

In this example I have variable collections named "fonts" & "spacing" and size variables named "step-1" and "xl" respectively.
This style overwrites the original values but allows you to still use the variable in the visual editor.

Alternatively you can add the css style block in the custom code section for the entire site however you will not see the changes in the visual editor only on the published site.

Just a note - if you add the embed to each page be sure it is part of a component so that you only have to make changes in 1 place.

Hope this helps and can't wait for native custom variables!

Yes, please!