refactor: replace hardcoded colors with CSS variables for consistent theming

Author: ralyodio

public/css/chat.css

@@ -12,11 +12,11 @@
 }
 
 .connected {
-  color: var(--success-color, #4caf50);
+  color: var(--success-color);
 }
 
 .disconnected {
-  color: var(--error-color, #f44336);
+  color: var(--error-color);
 }
 
 .chat-controls {
@@ -27,29 +27,30 @@
 
 .action-button {
   padding: 8px 16px;
-  background-color: var(--primary-color, #2196f3);
-  color: white;
+  background-color: var(--primary-color);
+  color: var(--text-on-primary);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--border-radius-md);
   cursor: pointer;
-  font-weight: 500;
-  transition: background-color 0.2s;
+  font-weight: var(--font-weight-medium);
+  transition: background-color var(--transition-fast);
 }
 
 .action-button:hover {
-  background-color: var(--primary-dark-color, #1976d2);
+  background-color: var(--primary-dark);
 }
 
 .action-button:disabled {
-  background-color: var(--disabled-color, #cccccc);
+  background-color: var(--surface-variant);
+  color: var(--text-disabled);
   cursor: not-allowed;
 }
 
 .key-exchange-container {
   margin-bottom: 30px;
   padding: 15px;
-  background-color: var(--surface-color, #f5f5f5);
-  border-radius: 8px;
+  background-color: var(--surface-color);
+  border-radius: var(--border-radius-lg);
 }
 
 .key-info {
@@ -65,7 +66,8 @@
 }
 
 .key-field label {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  color: var(--text-secondary);
 }
 
 .key-display-container,
@@ -78,33 +80,37 @@ textarea {
   flex: 1;
   min-height: 60px;
   padding: 8px;
-  border: 1px solid var(--border-color, #ddd);
-  border-radius: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-md);
   font-family: monospace;
   resize: vertical;
+  background-color: var(--input-background);
+  color: var(--text-primary);
 }
 
 textarea:disabled {
-  background-color: var(--disabled-bg-color, #f0f0f0);
-  color: var(--disabled-text-color, #888);
+  background-color: var(--surface-variant);
+  color: var(--text-disabled);
 }
 
 .copy-button {
   align-self: flex-start;
   padding: 4px 8px;
-  background-color: var(--secondary-color, #757575);
-  color: white;
+  background-color: var(--secondary-color);
+  color: var(--text-on-secondary);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--border-radius-sm);
   cursor: pointer;
+  transition: background-color var(--transition-fast);
 }
 
 .copy-button:hover {
-  background-color: var(--secondary-dark-color, #616161);
+  background-color: var(--secondary-dark);
 }
 
 .copy-button:disabled {
-  background-color: var(--disabled-color, #cccccc);
+  background-color: var(--surface-variant);
+  color: var(--text-disabled);
   cursor: not-allowed;
 }
 
@@ -115,11 +121,11 @@ textarea:disabled {
 .messages-container {
   height: 300px;
   padding: 10px;
-  border: 1px solid var(--border-color, #ddd);
-  border-radius: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-md);
   overflow-y: auto;
   margin-bottom: 15px;
-  background-color: var(--surface-color, #f5f5f5);
+  background-color: var(--surface-color);
 }
 
 .message {
@@ -131,19 +137,22 @@ textarea:disabled {
 }
 
 .message-sent {
-  background-color: var(--primary-light-color, #bbdefb);
+  background-color: var(--primary-light);
+  color: var(--text-primary);
   margin-left: auto;
   border-bottom-right-radius: 0;
 }
 
 .message-received {
-  background-color: var(--secondary-light-color, #e0e0e0);
+  background-color: var(--secondary-light);
+  color: var(--text-primary);
   margin-right: auto;
   border-bottom-left-radius: 0;
 }
 
 .message-system {
-  background-color: var(--info-light-color, #fff8e1);
+  background-color: var(--surface-variant);
+  color: var(--text-secondary);
   margin: 10px auto;
   font-style: italic;
   text-align: center;
@@ -160,9 +169,10 @@ textarea:disabled {
 }
 
 .encryption-info {
-  background-color: var(--info-bg-color, #e3f2fd);
+  background-color: var(--surface-variant);
   padding: 15px;
-  border-radius: 8px;
+  border-radius: var(--border-radius-lg);
+  border-left: 4px solid var(--info-color);
 }
 
 .encryption-info h3 {