Generating custom property from the value of another custom property - css

Question

I have a class .btn, with variants .primary and .secondary:
.btn {
background-color: var(--bg-color);
color: var(--color);
}
.btn.primary {
--bg-color: red;
--color: white;
}
.btn.secondary {
--bg-color: lightgray;
--color: black;
}
I instead want to modify this so that by changing a single custom property --variant, it will swap all styles via the custom properties. But to do so I'd need to generate the variable name before it's evaluated. Something like this:
.btn {
background-color: var("--bg-color-" + var(--variant));
color: var("--color-" + var(--variant));
/* primary */
--bg-color-primary: red;
--color-primary: white;
/* secondary */
--bg-color-secondary: lightgray;
--color-secondary: black;
}
.btn.primary {
--variant: primary;
}
.btn.secondary {
--variant: secondary;
}
<!-- Add inline custom property to override variant -->
<button class="btn secondary" style="--variant: primary">I want to be primary</button>
Is this possible in CSS? If not, what is the reason for this limitation / is there any proposal to add this sort of ability? I've read the level 1 W3 spec for custom properties but couldn't find anything like this. This would be an incredibly useful feature for drastically changing an element's style contextually. For example:
#media (min-width: 1024px) {
/* swap button "my-cool-button" to secondary
on large screens while keeping it primary
on small screens */
.my-cool-button.primary {
--variant: secondary;
}
}
Not looking for preprocessor, or JS solutions.