Normally, if we use a variable color on a desktop breakpoint, for example, the value var(--text-1) will be displayed. But on lower breakpoints, the HEX code of the color will be displayed. It seems not as expected, right?
On the other hand, if we create a selectors (elements) and use the color var(--text-1) on the desktop breakpoint for example, the color value will not display anything at other breakpoints.
Interesting, nothing is displayed? For me the HEX color is displayed because the variable I created has HEX. In Playground I have created a color with hsl code and after applying the variable color the result is as follows.