chore:fix my merge mistake

scss/utils/_colors.scss

@@ -0,0 +1,13 @@
+$c-white: #fff;
+$c-black: #000;
+
+$c-dark: #191813;
+$c-faint: #c9c7b8;
+$c-beige: #b5b3a4;
+$c-tan: #444;
+
+$primary-border-color: rgb(81, 81, 81);
+
+$focus-border-color: #8102dd;
+$hover-text-shadow: 0 0 10px rgb(179, 7, 217);
+$border-color: #ccc;

scss/utils/_mixins.scss

@@ -0,0 +1,25 @@
+@mixin element-invisible {
+  position: absolute;
+
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+
+@mixin hide {
+  display: none;
+}
+
+// Update the mixin to accept 3 arguments: direction, wrap, and justify
+@mixin flexbox($direction, $wrap: nowrap, $justify: flex-start, $align: stretch) {
+  display: flex;
+  flex-direction: $direction;
+  flex-wrap: $wrap;
+  justify-content: $justify;
+  align-items: $align;
+}

scss/utils/_typography.scss

@@ -0,0 +1,2 @@
+$font-primary: 'Roboto', sans-serif;
+$font-secondary: 'Roboto', sans-serif;

scss/utils/_variables.scss

@@ -0,0 +1,10 @@
+$padding-sm: 5px;
+$padding-md: 10px;
+$padding-lg: 20px;
+
+$border-groove: 2px groove #eeede0;
+
+$font-stack: "Roboto", sans-serif;
+$padding: 10px;
+$border-radius: 5px;
+$flex-align: center;