refactor: separate CSS variables into file

apps/website/src/style/_base.scss

@@ -1,29 +1,13 @@
-// CSS Variables
-:root {
-    // Sizes
-    --container-width: #{$container-width};
-
-    // Offsets
-    --switcher-offset: 16px;
-
-    // Animation
-    --ease-quart: cubic-bezier(.165, .84, .44, 1);
-    --ease-cubic: cubic-bezier(.785, .135, .15, .86);
-    --ease-inout-quart: cubic-bezier(.76, 0, .24, 1);
-}
-@include bp (sm) {
-    :root {
-        // Offsets
-        --switcher-offset: clamp(20px, 3vw, 40px);
-    }
-}
-
 html {
     font: #{$base-font-size}/1.2 $font-sans;
     font-weight: 400;
     color: #fff;
     min-width: 320px;
     word-break: normal;
+
+    &.block-scroll {
+        overflow: hidden;
+    }
 }
 body {
     @include font-smooth;
@@ -33,9 +17,6 @@ body {
     overflow-x: hidden;
     overscroll-behavior: none;
 
-    &.block-scroll {
-        overflow: hidden;
-    }
     &.is-loading * {
         cursor: wait !important;
     }

apps/website/src/style/_variables-css.scss

@@ -0,0 +1,17 @@
+:root {
+    // Sizes
+    --container-width: #{$container-width};
+
+    // Offsets
+    --switcher-offset: 16px;
+
+    // Animation
+    --ease-quart: cubic-bezier(.165, .84, .44, 1);
+    --ease-cubic: cubic-bezier(.785, .135, .15, .86);
+    --ease-inout-quart: cubic-bezier(.76, 0, .24, 1);
+
+    @include bp (sm) {
+        // Offsets
+        --switcher-offset: clamp(20px, 3vw, 40px);
+    }
+}

apps/website/src/style/global.scss

@@ -7,6 +7,7 @@
 @import "tools/helpers";
 
 // Base
+@import "variables-css";
 @import "base";
 @import "fonts";
 @import "typography";