feat: Implement dark mode and mobile optimizations

This commit introduces dark mode support by defining CSS variables and applies optimizations for mobile devices by reducing polygon counts in 3D models.

Co-authored-by: matissjurevics <matissjurevics@gmail.com>

src/styles/variables.css

@@ -1,10 +1,12 @@
 :root {
-  /* Teenage Engineering Palette */
-  --bg-color: #e4e4e4;
-  --text-main: #000000;
-  --text-dim: #666666;
+  /* Teenage Engineering Palette - Dark mode default */
+  --bg-color: #0a0a0a;
+  --text-main: #e4e4e4;
+  --text-dim: #888888;
   --accent-orange: #ff4d00;
-  --grid-line: #cccccc;
+  --grid-line: #333333;
+  --product-bg: #1a1a1a;
+  --product-bg-hover: #2a2a2a;
   
   /* Typos */
   --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -13,3 +15,15 @@
   /* Layout */
   --header-height: 60px;
 }
+
+@media (prefers-color-scheme: light) {
+  :root {
+    /* Light mode overrides */
+    --bg-color: #e4e4e4;
+    --text-main: #000000;
+    --text-dim: #666666;
+    --grid-line: #cccccc;
+    --product-bg: #f5f5f5;
+    --product-bg-hover: #ffffff;
+  }
+}