What is the correct way to define a CSS variable that will inherit from a prior value (of the same name) but have a sensible default?

Question

It seems to me that the best way to use CSS variables in many cases is to have them default to a pre-existing value but have a sensible default.

E.g. instead of writing:

:host {
  --background: white;
  --color: black;
}

You should be able to write:

:host {
  --background: var(--background, white);
  --color: var(--color, black);
}

This would allow settings to flow through from "above" for consistency, but allow a component to render nicely in isolation.

Weirdly, this doesn't work even though Chrome (at least) suggests it does work in the inspector.

E.g. if I define a component with --error-color: var(--error-color, crimson) then in the inspector the --error-color is shown as having a crimson swatch (yay!) but the color doesn't actually get used by CSS rules.

As far as I can tell, this definition is correct, the inspector recognizes it, but it doesn't actually work.

So, should this work or is it just wrong? Is there a right way to accomplish this?