feat: replace rich cerulean color variables with a new color palette for improved theming

frontend/src/index.css

@@ -1,74 +1,63 @@
 /* Existing CSS rules */
 :root {
-    --rich-cerulean-50: #eaf4fb;
-    --rich-cerulean-100: #d5eaf6;
-    --rich-cerulean-200: #aad5ee;
-    --rich-cerulean-300: #80c0e5;
-    --rich-cerulean-400: #56abdc;
-    --rich-cerulean-500: #2b96d4;
-    --rich-cerulean-600: #2378a9;
-    --rich-cerulean-700: #1a5a7f;
-    --rich-cerulean-800: #113c55;
-    --rich-cerulean-900: #091e2a;
-    --rich-cerulean-950: #06151e;
+    --color1: #edf0f8;
+    --color2: #dae1f1;
+    --color3: #b6c3e2;
+    --color4: #91a5d4;
+    --color5: #6c87c6;
+    --color6: #4769b8;
+    --color7: #395493;
+    --color8: #2b3f6e;
+    --color9: #1d2a49;
+    --color10: #0e1525;
+    --color11: #0a0f1a;
 
-    --sand-dune-50: #f7f5ed;
-    --sand-dune-100: #f0ebdb;
-    --sand-dune-200: #e1d6b7;
-    --sand-dune-300: #d2c293;
-    --sand-dune-400: #c3ae6f;
-    --sand-dune-500: #b49a4b;
-    --sand-dune-600: #907b3c;
-    --sand-dune-700: #6c5c2d;
-    --sand-dune-800: #483d1e;
-    --sand-dune-900: #241f0f;
-    --sand-dune-950: #19160b;
+    --color12: #e8ebfc;
+    --color13: #d1d7fa;
+    --color14: #a3aff5;
+    --color15: #7588f0;
+    --color16: #4760eb;
+    --color17: #1938e6;
+    --color18: #142db8;
+    --color19: #0f228a;
+    --color20: #0a165c;
+    --color21: #050b2e;
+    --color22: #040820;
+    --color23: #02081c;
 
-    --alice-blue-50: #ecf3f8;
-    --alice-blue-100: #dae7f1;
-    --alice-blue-200: #b4cfe4;
-    --alice-blue-300: #8fb7d6;
-    --alice-blue-400: #699fc9;
-    --alice-blue-500: #4487bb;
-    --alice-blue-600: #366c96;
-    --alice-blue-700: #295170;
-    --alice-blue-800: #1b364b;
-    --alice-blue-900: #0e1b25;
-    --alice-blue-950: #09131a;
+    --color24: #fff4e5;
+    --color25: #ffe9cc;
+    --color26: #ffd399;
+    --color27: #ffbd66;
+    --color28: #ffa733;
+    --color29: #ff9100;
+    --color30: #cc7400;
+    --color31: #995700;
+    --color32: #663a00;
+    --color33: #331d00;
+    --color34: #241400;
 
-    --ink-black-50: #eef2f6;
-    --ink-black-100: #dee6ed;
-    --ink-black-200: #bdccdb;
-    --ink-black-300: #9cb2c9;
-    --ink-black-400: #7a99b8;
-    --ink-black-500: #597fa6;
-    --ink-black-600: #476685;
-    --ink-black-700: #364c63;
-    --ink-black-800: #243342;
-    --ink-black-900: #121921;
-    --ink-black-950: #0c1217;
-
-    --taupe-50: #f4f2f0;
-    --taupe-100: #e9e4e2;
-    --taupe-200: #d3cac5;
-    --taupe-300: #bdafa8;
-    --taupe-400: #a7958b;
-    --taupe-500: #917a6e;
-    --taupe-600: #746258;
-    --taupe-700: #574942;
-    --taupe-800: #3a312c;
-    --taupe-900: #1d1816;
-    --taupe-950: #14110f;
+    --color35: #eef2f7;
+    --color36: #dce5ef;
+    --color37: #bacade;
+    --color38: #97b0ce;
+    --color39: #7495be;
+    --color40: #527bad;
+    --color41: #41628b;
+    --color42: #314a68;
+    --color43: #213145;
+    --color44: #101923;
+    --color45: #0b1118;
 
     /* New CSS Variables */
-    --bg-color: var(--rich-cerulean-950);
+    --bg-color: var(--color45);
     --panel-bg: rgba(30, 41, 59, 0.7);
-    --text-main: var(--alice-blue-200);
-    --text-muted: var(--sand-dune-600);
-    --accent-primary: var(--taupe-500);
-    --accent-secondary: var(--rich-cerulean-300);
-    --success: var(--sand-dune-200);
-    --danger: var(--ink-black-400);
+    --text-main: var(--color24);
+    --text-muted: var(--color36);
+    --accent-primary: var(--color41);
+    --accent-secondary: var(--color38);
+    --success: var(--color39);
+    --danger: var(--color30);
     --border-color: rgba(255, 255, 255, 0.1);
     --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
     --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -112,13 +101,13 @@ button {
     border: none;
     outline: none;
     transition: all 0.3s ease;
-    background-color: var(--color-smart-blue-500); /* Default background color */
+    background-color: var(--color5); /* Default background color */
     color: var(--text-main);
     padding: 10px 20px;
     border-radius: 4px;
 
     &:hover {
-        background-color: var(--color-smart-blue-600); /* Hover state background color */
+        background-color: var(--color6); /* Hover state background color */
     }
 }
 
@@ -128,13 +117,13 @@ input {
     background-color: var(--bg-color);
     color: var(--text-main);
     padding: 8px 12px;
-    border: 1px solid var(--color-smart-blue-300);
+    border: 1px solid var(--color3);
 
     &:focus {
-        border-color: var(--color-smart-blue-400); /* Focus state border color */
+        border-color: var(--color4); /* Focus state border color */
     }
 }
 
 h1, h2, h3 {
-    color: var(--color-smart-blue-500);
+    color: var(--color5);
 }