Refactor

app/globals.scss

@@ -0,0 +1,56 @@
+:root {
+    box-sizing: border-box;
+    --color-background: #e8e6e3;
+    --color-foreground: #181a1b;
+    --color-form-error: #ff0000;
+    --color-border: #5d6164;
+    --color-background-highlight: #f8f7f4;
+    --color-foreground-highlight: #292b2c;
+    --color-border-highlight: #6e7275;
+    --color-maze-background: #e8e6e3;
+    --color-maze-border: #333333;
+    --color-maze-cell-solution: #b1d5b1;
+    --color-maze-cell-solution-highlight: #b9e8b9;
+    --color-maze-cell-user: #ffcc00;
+    --color-maze-cell-user-solution: #47e147;
+    --color-accent: #ffcc00;
+    --color-accent-inverse: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-background: #181a1b;
+        --color-foreground: #e8e6e3;
+        --color-form-error: #ff0000;
+        --color-border: #5d6164;
+        --color-background-highlight: #292b2c;
+        --color-foreground-highlight: #f8f7f4;
+        --color-border-highlight: #6e7275;
+        --color-maze-background: #181a1b;
+        --color-maze-border: #e8e6e3;
+        --color-maze-cell-solution: #213d21;
+        --color-maze-cell-solution-highlight: #3d6e3d;
+        --color-maze-cell-user: #ffcc00;
+        --color-maze-cell-user-solution: #00a421;
+    }
+}
+
+body {
+    color: var(--color-foreground);
+    background: var(--color-background);
+    font-family: "Cantarell", Arial, Helvetica, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+input, select {
+    background-color: var(--color-background);
+    border: 1px solid var(--color-border);
+    color: var(--color-foreground);
+}
+
+input:hover, input:focus, select:hover, select:focus {
+    background-color: var(--color-background-highlight);
+    border-color: var(--color-border-highlight);
+    color: var(--color-foreground-highlight);
+}