I know this is an old post but I came looking for info on this and didn't turn up much. So I found my own 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!

I also want to use unitless variables to control the number of grid rows/columns in various contexts, etc.

it's needed for certain calculated styling features such as:

font-size: calc(var(--font-base-size) * var(--font-h1-size-mod));

where the base size is a rem and I'm looking to calculate different heading sizes based on one base size value to globally change font styles across the site quickly and consistently. Or if I wanted unitless line height.

Yes!!!

Unitless is also needed to change z-index, etc.

Yes!!

Yes we need the percentage unit in size variables! It's often used for sizing elements

Yes please!!!

Indeed - it is needed! By the way - in the interaction settings you can assign percentages to variables. Why not in the variables panel?

This is extremely needed.