feat: added dark and light mode

src/styles-variables.css

@@ -2,19 +2,20 @@
    COLOR VARIABLES - Semantic Naming
    ======================================== */
 
-:root {
-  /* Primary Colors */
+/* Light Mode Colors (Default) */
+:root:not([data-theme='dark']) {
+  /* Primary Colors - Light Mode */
   --color-primary: #BA6D4B;
   --color-primary-dark: #5A2C28;
   --color-primary-light: #F3C8A0;
 
-  /* Secondary Colors */
+  /* Secondary Colors - Light Mode */
   --color-secondary-mint: #B9DAD1;
   --color-secondary-blue: #B9C2DA;
   --color-secondary-purple: #C19EF5;
   --color-secondary-lime: #E1EAA9;
 
-  /* Functional Colors */
+  /* Functional Colors - Light Mode */
   --color-bg-main: #F3C8A0;
   --color-bg-board: #B9DAD1;
   --color-bg-card: #E1EAA9;
@@ -26,6 +27,36 @@
   --color-text-primary: #5A2C28;
   --color-text-button-hover: #F3C8A0;
   --color-border: #5A2C28;
+}
+
+/* Dark Mode Colors */
+:root[data-theme='dark'] {
+  /* Primary Colors - Dark Mode */
+  --color-primary: #1a3a52;
+  --color-primary-dark: #0f1f2e;
+  --color-primary-light: #2d5a7b;
+
+  /* Secondary Colors - Dark Mode */
+  --color-secondary-mint: #4a7c7c;
+  --color-secondary-blue: #5a6fa5;
+  --color-secondary-purple: #7d5fa8;
+  --color-secondary-lime: #6b8e23;
+
+  /* Functional Colors - Dark Mode */
+  --color-bg-main: #1a2f47;
+  --color-bg-board: #2d5a7b;
+  --color-bg-card: #3d4e63;
+  --color-bg-input: #2d4a6f;
+  --color-bg-input-focus: #3d5a8f;
+  --color-bg-button: #5a7da5;
+  --color-bg-button-hover: #7a9dc5;
+
+  --color-text-primary: #e8f0f8;
+  --color-text-button-hover: #ffffff;
+  --color-border: #4a7c9c;
+}
+
+:root {
 
   /* ========================================
      TYPOGRAPHY SIZES