Use SASS variables instead of CSS custom properties

assets/css/abstracts/_variables.scss

@@ -2,58 +2,23 @@
 // VARIABLES
 // --------------------------------------------------
 
-:root {
+// Fonts
+$text-font-family: Helvetica, Arial, sans-serif;
+$regular-font-weight: 400;
+$medium-font-weight: 500;
+$semi-bold-font-weight: 600;
+$bold-font-weight: 700;
+$text-font-size: 1rem;
+$text-line-height: 1.1;
 
-    // Fonts
+// Dimensions
+$icon-size: 3rem;
+$sidebar-padding: 0.8rem;
 
-    --text-font-family: Helvetica, Arial, sans-serif;
-    --regular-font-weight: 400;
-    --medium-font-weight: 500;
-    --semi-bold-font-weight: 600;
-    --bold-font-weight: 700;
-    --text-font-size: 1rem;
-    --text-line-height: 1.1;
-
-    // Dimensions
-
-    --icon-size: 3rem;
-    --sidebar-padding: 0.8rem;
-
-    // Colors
-
-    --black: #000;
-    --white: #fff;
-}
+// Colors
+$black: #000;
+$white: #fff;
 
 // Media queries
-
 $tablet-media-query: 48rem;
 $desktop-media-query: 62rem;
-
-@media screen and (min-width: $tablet-media-query) {
-
-    :root {
-
-        // Fonts
-
-        --text-font-size: 0.95rem;
-
-        // Dimensions
-
-        --icon-size: 2.8rem;
-    }
-}
-
-@media screen and (min-width: $desktop-media-query) {
-
-    :root {
-
-        // Fonts
-
-        --text-font-size: 0.9rem;
-
-        // Dimensions
-
-        --icon-size: 2.6rem;
-    }
-}

assets/css/base/_base.scss

@@ -7,14 +7,14 @@
 // Fonts and colors
 
 body {
-    font-family: var(--text-font-family);
-    font-size: var(--text-font-size);
-    line-height: var(--text-line-height);
-    color: var(--black);
+    font-family: $text-font-family;
+    font-size: $text-font-size;
+    line-height: $text-line-height;
+    color: $black;
 }
 
 strong {
-    font-weight: var(--bold-font-weight);
+    font-weight: $bold-font-weight;
 }
 
 em {
@@ -24,7 +24,7 @@ em {
 // Link style
 
 a {
-    color: var(--black);
+    color: $black;
     text-decoration: none;
     transition: text-decoration 200ms ease-in-out;
 
@@ -35,7 +35,7 @@ a {
     }
 
     &:focus-visible {
-        outline: 1px dashed var(--black);
+        outline: 1px dashed $black;
         outline-offset: 2px;
     }
 }
@@ -68,8 +68,8 @@ body {
             display: flex;
             justify-content: center;
             align-items: center;
-            width: var(--icon-size);
-            height: var(--icon-size);
+            width: $icon-size;
+            height: $icon-size;
 
             svg {
                 width: 100%;