switch to dark mode

public/style.css

@@ -1,16 +1,16 @@
 :root {
   --primary-color: #065fd4;
-  --primary-hover: #0356c3;
-  --secondary-color: #f8f8f8;
-  --text-color: #0f0f0f;
-  --text-secondary: #606060;
-  --border-color: #e0e0e0;
+  --primary-hover: #3e8eff;
+  --secondary-color: #2c2c2c;
+  --text-color: #f8f8f8;
+  --text-secondary: #a0a0a0;
+  --border-color: #333333;
   --gold: #ffd700;
   --silver: #c0c0c0;
   --bronze: #cd7f32;
-  --background: #f9f9f9;
-  --card-bg: #ffffff;
-  --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  --background: #121212;
+  --card-bg: #1e1e1e;
+  --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   --animation-speed: 0.3s;
 }
 
@@ -292,12 +292,14 @@ h1 {
 }
 
 .add-input {
-  width: 100%;
-  padding: 10px 12px;
-  padding-right: 36px; /* Space for validation indicator */
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  font-size: 14px;
+    width: 100%;
+    padding: 10px 12px;
+    padding-right: 36px; /* Space for validation indicator */
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 14px;
+    background-color: var(--card-bg);
+    color: white;
 }
 
 .add-input:focus {
@@ -346,10 +348,10 @@ h1 {
 .dropdown-results {
   max-height: 200px;
   overflow-y: auto;
-  background-color: white;
+  background-color: var(--card-bg);
   border: 1px solid var(--border-color);
   border-radius: 4px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
 .dropdown-item {
@@ -390,10 +392,10 @@ h1 {
   display: flex;
   align-items: center;
   padding: 10px 12px;
-  background-color: white;
+  background-color: var(--card-bg);
   border: 1px solid var(--border-color);
   border-radius: 4px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
 .spinner {