fix: move color variables to seperate directory

issue: #53

src/main.css

@@ -1,3 +1,4 @@
+@import "./theme/theme.css";
 @import "tailwindcss";
 
 @plugin "tailwind-scrollbar";
@@ -29,51 +30,3 @@
 @utility btn-secondary {
   @apply bg-neutral-400 text-contrast rounded-sm p-2 sm:p-4 hover:bg-neutral-300 cursor-pointer transition-colors;
 }
-
-:root {
-  /* Light mode */
-  --contrast: oklch(100% 0 0);
-  /* Neutral colors - Gray */
-  --neutral-950: oklch(98.5% 0.002 247.839);
-  --neutral-900: oklch(96.7% 0.003 264.542);
-  --neutral-800: oklch(92.8% 0.006 264.531);
-  --neutral-700: oklch(87.2% 0.01 258.338);
-  --neutral-600: oklch(70.7% 0.022 261.325);
-  --neutral-500: oklch(55.1% 0.027 264.364);
-  --neutral-400: oklch(44.6% 0.03 256.802);
-  --neutral-300: oklch(37.3% 0.034 259.733);
-  --neutral-200: oklch(26.9% 0 0);
-  --neutral-100: oklch(21% 0.034 264.665);
-  --neutral-50: oklch(13% 0.028 261.692);
-  /* lime-700 */
-  --accent-600: oklch(53.2% 0.157 131.589);
-  /* lime-600 */
-  --accent-500: oklch(64.8% 0.2 131.684);
-  /* lime-500 */
-  --accent-400: oklch(76.8% 0.233 130.85);
-}
-
-@media (prefers-color-scheme: dark) {
-  /* Dark mode */
-  :root {
-    --contrast: oklch(0% 0 0);
-    /* Neutral colors - Gray */
-    --neutral-950: oklch(13% 0.028 261.692);
-    --neutral-900: oklch(21% 0.034 264.665);
-    --neutral-800: oklch(27.8% 0.033 256.848);
-    --neutral-700: oklch(37.3% 0.034 259.733);
-    --neutral-600: oklch(44.6% 0.03 256.802);
-    --neutral-500: oklch(55.1% 0.027 264.364);
-    --neutral-400: oklch(70.7% 0.022 261.325);
-    --neutral-300: oklch(87.2% 0.01 258.338);
-    --neutral-200: oklch(92.8% 0.006 264.531);
-    --neutral-100: oklch(96.7% 0.003 264.542);
-    --neutral-50: oklch(98.5% 0.002 247.839);
-    /* lime-600 */
-    --accent-600: oklch(64.8% 0.2 131.684);
-    /* lime-500 */
-    --accent-500: oklch(76.8% 0.233 130.85);
-    /* lime-400 */
-    --accent-400: oklch(84.1% 0.238 128.85);
-  }
-}

src/theme/theme.css

@@ -0,0 +1,47 @@
+:root {
+  /* Light mode */
+  --contrast: oklch(100% 0 0);
+  /* Neutral colors - Gray */
+  --neutral-950: oklch(98.5% 0.002 247.839);
+  --neutral-900: oklch(96.7% 0.003 264.542);
+  --neutral-800: oklch(92.8% 0.006 264.531);
+  --neutral-700: oklch(87.2% 0.01 258.338);
+  --neutral-600: oklch(70.7% 0.022 261.325);
+  --neutral-500: oklch(55.1% 0.027 264.364);
+  --neutral-400: oklch(44.6% 0.03 256.802);
+  --neutral-300: oklch(37.3% 0.034 259.733);
+  --neutral-200: oklch(26.9% 0 0);
+  --neutral-100: oklch(21% 0.034 264.665);
+  --neutral-50: oklch(13% 0.028 261.692);
+  /* lime-700 */
+  --accent-600: oklch(53.2% 0.157 131.589);
+  /* lime-600 */
+  --accent-500: oklch(64.8% 0.2 131.684);
+  /* lime-500 */
+  --accent-400: oklch(76.8% 0.233 130.85);
+}
+
+@media (prefers-color-scheme: dark) {
+  /* Dark mode */
+  :root {
+    --contrast: oklch(0% 0 0);
+    /* Neutral colors - Gray */
+    --neutral-950: oklch(13% 0.028 261.692);
+    --neutral-900: oklch(21% 0.034 264.665);
+    --neutral-800: oklch(27.8% 0.033 256.848);
+    --neutral-700: oklch(37.3% 0.034 259.733);
+    --neutral-600: oklch(44.6% 0.03 256.802);
+    --neutral-500: oklch(55.1% 0.027 264.364);
+    --neutral-400: oklch(70.7% 0.022 261.325);
+    --neutral-300: oklch(87.2% 0.01 258.338);
+    --neutral-200: oklch(92.8% 0.006 264.531);
+    --neutral-100: oklch(96.7% 0.003 264.542);
+    --neutral-50: oklch(98.5% 0.002 247.839);
+    /* lime-600 */
+    --accent-600: oklch(64.8% 0.2 131.684);
+    /* lime-500 */
+    --accent-500: oklch(76.8% 0.233 130.85);
+    /* lime-400 */
+    --accent-400: oklch(84.1% 0.238 128.85);
+  }
+}