Using media query in CSS to alter variables that change the dimensioning of the content?

Question

I'm building this web app that's supposed to scale things to a precise size according to certain specifications. My approach to this was to create an equation that takes such specifications into consideration the use it inside a css calc() anywhere where dimensions are declared. So, instead of having say

width: 100px; i'd have width: calc(100px * var(--XY));

Where XY is calculated beforehand.

Here's an example to better explain without showing the actual code (I can't)

:root{
    --X: 2;
    --Y: var(--X);
    }


@media screen and (min-width:500px){ 
    :root{
        --Y: 1.0;
    }
} 

html{
    --XY: calc( (var(--X) / (var(--Y))));
}


body{
    width: calc(1280px * var(--XY));

The idea is that if its displayed on the base display, the @media won't alter the initial values of the variables and --XY will equal 1.

The math is solid, I've tested with values inputted manually and the output changes accordingly. The @media is also working because I can see the variables getting changed in the browsers developer tools tab. However, the output doesn't change when the media query triggers.

In this example, the media query would only trigger if the screen is wider than 500px, otherwise the variables would stay the same.

It seems to me that the page is getting drawn after the calc() are run through but before the media query is checked somehow? Also what I don't get is that if I for example botch 'width: calc(1280px * var(--XY));' on purpose by replacing --XY with a variable that doesn't exist (say --ZZZ), the page is still drawn as if XY = 1.

What's the run order of html and css? where is the render itself done? What am I missing here? I have a feeling it must be something elemental that I don't know about.

Any ideas? Or any tips on how to troubleshoot it?

Also: I'm new here, I tried searching for similar questions but came empty handed - could be that I'm searching for the wrong terms. I tried describing the problem as best as I can, but please forgive any mistakes or lacking information.

Thanks in advance!