Add color-scheme and min-width media mixins

Also update media vars to respectable numbers rather than 0s

scss/utilities/_mixins.scss

@@ -2,3 +2,17 @@
     margin: 0;
     padding: 0;
 }
+
+// @include color-scheme() {}
+@mixin color-scheme($value: dark) {
+    @media (prefers-color-scheme: $value) {
+        @content;
+    }
+}
+
+// @include media($media-lg) {}
+@mixin media($value: $media-md) {
+    @media (min-width: $value) {
+        @content;
+    }
+}

scss/utilities/_variables.scss

@@ -1,9 +1,9 @@
 // Variables
-$media-xs: 0;
-$media-sm: 0;
-$media-md: 0;
-$media-lg: 0;
-$media-xl: 0;
+$media-xs: 360px;
+$media-sm: 540px;
+$media-md: 768px;
+$media-lg: 900px;
+$media-xl: 1200px;
 
 $active-brightness: .85;
 $hover-brightness: 1.2;