Changed Color Palette to something more pleasing

frontend/src/components/ConfirmDialog.jsx

@@ -35,7 +35,7 @@ export default function ConfirmDialog({ open, title, message, onConfirm, onCance
             onClick={onConfirm}
             className="px-4 py-2 text-sm rounded-md transition-colors"
             style={{
-              backgroundColor: "var(--danger)",
+              backgroundColor: "var(--danger-btn)",
               color: "#fff",
             }}
           >

frontend/src/components/SearchBar.jsx

@@ -38,7 +38,7 @@ export default function SearchBar({ onSearch, placeholder = "Search..." }) {
         type="submit"
         className="px-4 py-2 text-sm rounded-md transition-colors"
         style={{
-          backgroundColor: "var(--btn-primary)",
+          backgroundColor: "var(--btn-neutral)",
           color: "var(--text-heading)",
         }}
       >

frontend/src/devices/DeviceDetail.jsx

@@ -142,7 +142,7 @@ export default function DeviceDetail() {
             <button
               onClick={() => setShowDelete(true)}
               className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--danger)", color: "#fff" }}
+              style={{ backgroundColor: "var(--danger-btn)", color: "#fff" }}
             >
               Delete
             </button>

frontend/src/index.css

@@ -2,40 +2,44 @@
 
 /* BellSystems Dark Theme - Custom Properties */
 :root {
-  --bg-primary: #2f3e46;
+  --bg-primary: #111827;
-  --bg-secondary: #354f52;
+  --bg-secondary: #1f2937;
-  --bg-card: #354f52;
+  --bg-card: #1f2937;
-  --bg-card-hover: #3d5a5e;
+  --bg-card-hover: #2a3544;
-  --bg-input: #2f3e46;
+  --bg-input: #111827;
-  --bg-sidebar: #2f3e46;
+  --bg-sidebar: #111827;
-  --bg-header: #354f52;
+  --bg-header: #1f2937;
 
-  --border-primary: #52796f;
+  --border-primary: #374151;
-  --border-secondary: #4a6b63;
+  --border-secondary: #2d3748;
-  --border-input: #52796f;
+  --border-input: #374151;
 
-  --text-primary: #cad2c5;
+  --text-primary: #e3e5ea;
-  --text-secondary: #a3b8a0;
+  --text-secondary: #9ca3af;
-  --text-muted: #84a98c;
+  --text-muted: #9ca3af;
-  --text-heading: #e0e7dc;
+  --text-heading: #e3e5ea;
 
-  --accent: #84a98c;
+  --accent: #74b816;
-  --accent-hover: #9abea2;
+  --accent-hover: #82c91e;
 
-  --btn-primary: #52796f;
+  --btn-primary: #74b816;
-  --btn-primary-hover: #5d8a7f;
+  --btn-primary-hover: #82c91e;
+  --btn-neutral: #778ca8;
+  --btn-neutral-hover: #8a9dba;
 
-  --danger: #e57373;
+  --danger: #f34b4b;
-  --danger-hover: #ef5350;
+  --danger-hover: #e53e3e;
-  --danger-bg: #4a2c2c;
+  --danger-btn: #f76707;
-  --danger-text: #ffcdd2;
+  --danger-btn-hover: #e55d06;
+  --danger-bg: #3b1a1a;
+  --danger-text: #f34b4b;
 
-  --success: #81c784;
+  --success: #74b816;
-  --success-bg: #2c4a2e;
+  --success-bg: #1a2e0a;
-  --success-text: #c8e6c9;
+  --success-text: #a3d977;
 
-  --badge-blue-bg: #2e4a52;
+  --badge-blue-bg: #1e3a5f;
-  --badge-blue-text: #80cbc4;
+  --badge-blue-text: #63b3ed;
 }
 
 /* Ensure all interactive elements show pointer cursor */
@@ -97,7 +101,7 @@ input:focus,
 textarea:focus,
 select:focus {
   border-color: var(--accent) !important;
-  box-shadow: 0 0 0 2px rgba(132, 169, 140, 0.3) !important;
+  box-shadow: 0 0 0 2px rgba(116, 184, 22, 0.3) !important;
 }
 
 /* Checkbox dark styling */

frontend/src/melodies/MelodyDetail.jsx

@@ -143,7 +143,7 @@ export default function MelodyDetail() {
             <button
               onClick={() => setShowDelete(true)}
               className="px-4 py-2 text-sm rounded-md transition-colors"
-              style={{ backgroundColor: "var(--danger)", color: "#fff" }}
+              style={{ backgroundColor: "var(--danger-btn)", color: "#fff" }}
             >
               Delete
             </button>

frontend/src/melodies/MelodySettings.jsx

@@ -212,7 +212,7 @@ export default function MelodySettings() {
                   onClick={() => removeColor(color)}
                   disabled={saving}
                   className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-                  style={{ backgroundColor: "var(--danger)", color: "#fff" }}
+                  style={{ backgroundColor: "var(--danger-btn)", color: "#fff" }}
                 >
                   ×
                 </button>