refactor(styles): separated fonts and responsiveness to scss files; made global reference only once

src/styles/_global.scss

@@ -1,33 +1,15 @@
-$breakpointMd: 960px;
-$breakpointSm: 550px;
+@use 'fonts';
+@use 'responsive';
 
-$bgColor: #2b3552;
-$bgColorDarker: #1f263b;
-$textColor: #fff;
-$secondaryColor: #1b1b1b;
-$accentColor: #e4c428;
+:root {
+  --bgColor: #2b3552;
+  --bgColorDarker: #1f263b;
+  --textColor: #fff;
+  --secondaryColor: #1b1b1b;
+  --accentColor: #e4c428;
 
-$sponsorColor: gold;
-$teamColor: #ff4848;
-
-@font-face {
-  font-family: 'Lato';
-  src:
-    url('/fonts/Lato-Bold.woff2') format('woff2'),
-    url('/fonts/Lato-Bold.woff') format('woff');
-  font-weight: bold;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Lato';
-  src:
-    url('/fonts/Lato-Regular.woff2') format('woff2'),
-    url('/fonts/Lato-Regular.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
+  --sponsorColor: gold;
+  --teamColor: #ff4848;
 }
 
 ::-webkit-scrollbar {
@@ -56,7 +38,7 @@ html {
 
   font-family: Lato, sans-serif;
 
-  background-color: $bgColor;
+  background-color: var(--bgColor);
   overflow-x: hidden;
 }
 
@@ -78,7 +60,7 @@ a {
 
   &:hover,
   &:focus {
-    color: $accentColor;
+    color: var(--accentColor);
   }
 }
 
@@ -104,11 +86,11 @@ button {
   color: white;
 
   &:hover {
-    color: $accentColor;
+    color: var(--accentColor);
   }
 
   &:focus-visible {
-    outline: 1px solid $accentColor;
+    outline: 1px solid var(--accentColor);
   }
 }
 
@@ -130,7 +112,7 @@ button {
 
     z-index: 100;
 
-    @media screen and (max-width: $breakpointSm) {
+    @include responsive.smallScreen {
       left: 50%;
       transform: translate(-50%, 3ex);
       text-align: center;
@@ -165,7 +147,7 @@ button {
   padding: 0.4em 0.75em;
 
   outline: none;
-  background-color: $secondaryColor;
+  background-color: var(--secondaryColor);
   border-radius: 8px;
   font-weight: bold;
 
@@ -174,25 +156,25 @@ button {
     background-color 150ms;
 
   &:hover {
-    color: $accentColor;
+    color: var(--accentColor);
   }
 
   &.btn--outline {
     background: none;
     font-weight: bold;
-    outline: 1px solid $accentColor;
+    outline: 1px solid var(--accentColor);
   }
 
   &:focus-visible {
-    color: $accentColor;
+    color: var(--accentColor);
     outline: 1px solid white;
   }
 
   &[data-chosen='true'] {
-    background-color: $accentColor;
+    background-color: var(--accentColor);
     color: black;
 
-    box-shadow: 0 0 5px 1px $accentColor;
+    box-shadow: 0 0 5px 1px var(--accentColor);
   }
 
   &[data-disabled='true'] {
@@ -240,13 +222,13 @@ button {
 }
 
 .link-btn.router-link-exact-active {
-  color: $accentColor;
+  color: var(--accentColor);
 }
 
 select,
 input[type='text'],
 input[type='number'] {
-  background: $bgColor;
+  background: var(--bgColor);
   border: 2px solid #aaa;
   outline: none;
 
@@ -257,7 +239,7 @@ input[type='number'] {
   font-size: 1em;
 
   &:focus-visible {
-    border-color: $accentColor;
+    border-color: var(--accentColor);
   }
 
   &::placeholder {
@@ -268,7 +250,7 @@ input[type='number'] {
 option {
   color: white;
   border: none;
-  background-color: $bgColor;
+  background-color: var(--bgColor);
 }
 
 ul {
@@ -279,7 +261,7 @@ ul {
 
 .text {
   &--accent {
-    color: $accentColor;
+    color: var(--accentColor);
   }
 
   &--grayed {
@@ -336,19 +318,18 @@ hr {
   }
 
   span:focus {
-    color: $accentColor;
+    color: var(--accentColor);
     outline: none;
   }
 
-  label>input:checked+span {
-    color: $accentColor;
-    border-color: $accentColor;
+  label > input:checked + span {
+    color: var(--accentColor);
+    border-color: var(--accentColor);
   }
 }
 
 // Vue Transition anims
 .slide-top {
-
   &-enter-from,
   &-leave-to {
     transform: translateY(-100%);
@@ -361,7 +342,6 @@ hr {
 }
 
 .card-appear {
-
   &-enter-from,
   &-leave-to {
     opacity: 0;
@@ -371,4 +351,4 @@ hr {
   &-leave-active {
     transition: all 100ms ease-in-out;
   }
-}
+}