Media queries not working properly

[AranjuezY]

The css variables associated to media queries are defined as --phone and --tablet. In fact, CSS media queries cannot get these two variables.
I replaced these variables with scss variables:

:root {
  /* COLOR VARIABLES */
  ...
}

/* MEDIA QUERIES */
$phone: 684px;
$tablet: 900px;

And replaced all related styles like this:

  @media (max-width: $phone) {
    font-size: 1rem;
  }

Then the styles work fine on my mobile phone.

[mirus-ua]

Hello. Thank you that you noticed.
This is a sad limitation of the native variables despite the fact that we have an active proposal to solve this issue https://drafts.csswg.org/css-env-1/
I'll do a small rollback to scss vars only for media queries