feat: added bot, light and dark mode

src/styles.css

@@ -1,26 +1,61 @@
+@import 'styles-variables.css';
 @import 'bootstrap/dist/css/bootstrap.min.css';
 
-:root {
-  --warm-primary: #BA6D4B;
-  --warm-dark: #5A2C28;
-  --warm-light: #F3C8A0;
-  --cool-mint: #B9DAD1;
-  --cool-blue: #B9C2DA;
-  --cool-purple: #C19EF5;
-  --cool-lime: #E1EAA9;
-}
-
 * {
   box-sizing: border-box;
 }
 
+/* Light Mode (Default) */
+html:not([data-theme='dark']),
+html:not([data-theme='dark']) body {
+  background: linear-gradient(160deg, var(--color-primary-light), var(--color-secondary-mint));
+  color: var(--color-text-primary);
+}
+
+html:not([data-theme='dark']) body::before {
+  display: none;
+}
+
+/* Dark Mode */
+html[data-theme='dark'],
+html[data-theme='dark'] body {
+  background: #0f1f2e;
+  background-image: 
+    radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
+    radial-gradient(2px 2px at 60px 70px, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)),
+    radial-gradient(1px 1px at 50px 50px, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)),
+    radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
+    radial-gradient(2px 2px at 90px 10px, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)),
+    radial-gradient(1px 1px at 130px 120px, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)),
+    radial-gradient(2px 2px at 10px 90px, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)),
+    radial-gradient(1px 1px at 40px 120px, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
+  background-repeat: repeat;
+  background-size: 150px 150px;
+  background-attachment: fixed;
+  color: var(--color-text-primary);
+}
+
+html[data-theme='dark'] body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 20% 80%, rgba(45, 90, 123, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(90, 111, 165, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 50% 50%, rgba(29, 53, 82, 0.05) 0%, transparent 50%);
+  pointer-events: none;
+  z-index: -1;
+}
+
 html,
 body {
   margin: 0;
   min-height: 100%;
   font-family: "Comic Sans MS", "Comic Sans", cursive;
-  background: linear-gradient(160deg, var(--warm-light), var(--cool-mint));
-  color: var(--warm-dark);
+  position: relative;
 }
 
 button,