Reduce duplication in media queries

Question

I have a site with 3 themes: dark, light, and system. System selects between dark and light based on a media query against prefers-color-scheme. The root html will have a class of theme-system, theme-light, or theme-dark. Currently my css looks like this

html {
    --dark-background:   #212121;
    --dark-text:         #bdbdbd;

    --light-background:   #bdbdbd;
    --light-text:         #212121;
}

.theme-system, .theme-dark {
    --background:   var(--dark-background);
    --text:         var(--dark-text);
}

.theme-light {
    --background:   var(--light-background);
    --text:         var(--light-text);
}

@media (prefers-color-scheme: light) {
    .theme-system {
        --background:   var(--light-background);
        --text:         var(--light-text);
    }
}

Notice that I only use --dark-background in a single place, but I have to use --light-background in two places. If I didn't need to do this, I could remove the indirection through --dark-*/--light-* and simplify the whole deal. Is there a way to do this?

I'm attempting to get to something like this pseudocode

.theme-system, .theme-dark {
    --background:   #212121;
    --text:         #bdbdbd;
}

@media (prefers-color-scheme: light) .theme-system, .theme-light {
    --background:   #bdbdbd;
    --text:         #212121;
}