3 files changed, 21 insertions, 56 deletions

diff --git a/src/frontend/app/components/ErrorDisplay.css b/src/frontend/app/components/ErrorDisplay.css
index 096182a..4799949 100644
--- a/src/frontend/app/components/ErrorDisplay.css
+++ b/src/frontend/app/components/ErrorDisplay.css
@@ -14,7 +14,7 @@
 .error-icon {
   width: 48px;
   height: 48px;
-  color: #e74c3c;
+  color: var(--error-icon-color);
   margin: 0 auto 1rem;
   display: block;
 }
@@ -22,12 +22,12 @@
 .error-title {
   font-size: 1.5rem;
   font-weight: 600;
-  color: #2c3e50;
+  color: var(--error-title-color);
   margin: 0 0 0.5rem;
 }
 
 .error-message {
-  color: #7f8c8d;
+  color: var(--error-message-color);
   margin: 0 0 1.5rem;
   line-height: 1.5;
 }
@@ -36,7 +36,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  background: #3498db;
+  background: var(--button-background-color);
   color: white;
   border: none;
   padding: 0.75rem 1.5rem;
@@ -48,7 +48,7 @@
 }
 
 .error-retry-button:hover {
-  background: #2980b9;
+  background: var(--button-hover-background-color);
 }
 
 .error-retry-button:active {
diff --git a/src/frontend/app/components/ServiceAlerts.css b/src/frontend/app/components/ServiceAlerts.css
index 484b45b..7c271f9 100644
--- a/src/frontend/app/components/ServiceAlerts.css
+++ b/src/frontend/app/components/ServiceAlerts.css
@@ -13,42 +13,21 @@
 }
 
 .service-alert.info {
-  background-color: #e3f2fd;
-  border-color: #2196f3;
-  color: #0d47a1;
+  background-color: var(--alert-info-bg);
+  border-color: var(--alert-info-border);
+  color: var(--alert-info-text);
 }
 
 .service-alert.warning {
-  background-color: #fff3e0;
-  border-color: #ff9800;
-  color: #e65100;
+  background-color: var(--alert-warning-bg);
+  border-color: var(--alert-warning-border);
+  color: var(--alert-warning-text);
 }
 
 .service-alert.error {
-  background-color: #ffebee;
-  border-color: #f44336;
-  color: #b71c1c;
-}
-
-/* Dark mode adjustments */
-@media (prefers-color-scheme: dark) {
-  .service-alert.info {
-    background-color: #0d47a1;
-    border-color: #2196f3;
-    color: #e3f2fd;
-  }
-
-  .service-alert.warning {
-    background-color: #e65100;
-    border-color: #ff9800;
-    color: #fff3e0;
-  }
-
-  .service-alert.error {
-    background-color: #b71c1c;
-    border-color: #f44336;
-    color: #ffebee;
-  }
+  background-color: var(--alert-error-bg);
+  border-color: var(--alert-error-border);
+  color: var(--alert-error-text);
 }
 
 .alert-icon {
diff --git a/src/frontend/app/components/StopAlert.css b/src/frontend/app/components/StopAlert.css
index 8bcc4b0..ac24f8c 100644
--- a/src/frontend/app/components/StopAlert.css
+++ b/src/frontend/app/components/StopAlert.css
@@ -1,24 +1,4 @@
-/* Alert color variables */
-:root {
-  --alert-info-bg: rgba(59, 130, 246, 0.1);
-  --alert-info-border: rgba(59, 130, 246, 0.5);
-  --alert-info-text: #1e40af;
-
-  --alert-error-bg: rgba(239, 68, 68, 0.1);
-  --alert-error-border: rgba(239, 68, 68, 0.5);
-  --alert-error-text: #991b1b;
-}
-
-/* Dark mode overrides use data-mode */
-[data-mode="dark"] {
-  --alert-info-bg: rgba(59, 130, 246, 0.15);
-  --alert-info-border: rgba(59, 130, 246, 0.4);
-  --alert-info-text: #93c5fd;
-
-  --alert-error-bg: rgba(239, 68, 68, 0.15);
-  --alert-error-border: rgba(239, 68, 68, 0.4);
-  --alert-error-text: #fca5a5;
-}
+/* Alert styles use variables from root.css */
 
 .stop-alert {
   display: flex;
@@ -36,6 +16,12 @@
   color: var(--alert-info-text);
 }
 
+.stop-alert-warning {
+  background-color: var(--alert-warning-bg);
+  border-color: var(--alert-warning-border);
+  color: var(--alert-warning-text);
+}
+
 .stop-alert-error {
   background-color: var(--alert-error-bg);
   border-color: var(--alert-error-border);