From e9fbb2b427faaacffabdc904fc33bc4a51ff76fb Mon Sep 17 00:00:00 2001
From: dilgenfritz <drewilgenfritz@gmail.com>
Date: Mon, 24 Nov 2025 13:27:02 -0600
Subject: [PATCH] fix(quick-play): replace hardcoded colors with CSS variables

- Replace all cyan (#00d4ff) with var(--color-primary)
- Replace all purple (#8B5CF6) with var(--color-secondary)
- Replace gold (#ffd700) with var(--color-accent-gold)
- Add --color-accent-gold and semantic color aliases to color-variables.css
- Convert 40+ CSS classes to use theme-aware variables
- Fixes theme switching for setup screens, buttons, controls, sliders, modals
- Maintains exclusions: grays, whites, blacks, consequence colors, status colors
---
 quick-play.html                | 234 ++++++++++++++++-----------------
 src/styles/color-variables.css |   7 +
 2 files changed, 124 insertions(+), 117 deletions(-)

diff --git a/quick-play.html b/quick-play.html
index 620c9f2..cd5ecce 100644
--- a/quick-play.html
+++ b/quick-play.html
@@ -2337,7 +2337,7 @@
                     console.log('🎬 Set webcam overlay type to TASK');
                 } else if (taskTitleText) {
                     overlayTaskType.textContent = 'SESSION';
-                    overlayTaskType.style.color = '#ffd700';
+                    overlayTaskType.style.color = 'var(--color-accent-gold)';
                     console.log('🎬 Set webcam overlay type to SESSION');
                 } else {
                     overlayTaskType.textContent = 'TRAINING';
@@ -2397,7 +2397,7 @@
                     webcamTaskType.style.color = 'var(--color-primary)';
                 } else if (title) {
                     webcamTaskType.textContent = 'SESSION';
-                    webcamTaskType.style.color = '#ffd700';
+                    webcamTaskType.style.color = 'var(--color-accent-gold)';
                 } else {
                     webcamTaskType.textContent = 'TRAINING';
                     webcamTaskType.style.color = '#00ff00';
@@ -5731,12 +5731,12 @@
                     
                     setupOverlay.innerHTML = `
                         <div style="text-align: center; max-width: 600px; padding: 40px;">
-                            <h2 style="color: #ff6b35; margin-bottom: 20px;">📺 No Videos Available</h2>
+                            <h2 style="color: var(--color-warning); margin-bottom: 20px;">📺 No Videos Available</h2>
                             <p style="font-size: 1.1em; margin-bottom: 20px;">
                                 To use the overlay video player, you need to set up video directories first.
                             </p>
                             <div style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 10px; margin: 20px 0;">
-                                <h3 style="color: #3a86ff; margin-bottom: 15px;">Setup Instructions:</h3>
+                                <h3 style="color: var(--color-primary); margin-bottom: 15px;">Setup Instructions:</h3>
                                 <ol style="text-align: left; font-size: 1em; line-height: 1.6;">
                                     <li>Go to the main menu (index.html)</li>
                                     <li>Click on "Media Library" tab</li>
@@ -5747,11 +5747,11 @@
                             </div>
                             <div style="margin-top: 30px;">
                                 <button onclick="this.parentElement.parentElement.remove()" 
-                                        style="padding: 12px 24px; background: #ff6b35; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1em; margin-right: 10px;">
+                                        style="padding: 12px 24px; background: var(--color-warning); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1em; margin-right: 10px;">
                                     ✅ Got It
                                 </button>
                                 <button onclick="window.open('index.html', '_blank')" 
-                                        style="padding: 12px 24px; background: #3a86ff; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1em;">
+                                        style="padding: 12px 24px; background: var(--color-primary); color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 1em;">
                                     📂 Go to Media Library
                                 </button>
                             </div>
@@ -6666,9 +6666,9 @@
             // Update statistics display
             messageStats.innerHTML = `
                 <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
-                    <span>Total Messages: <strong style="color: #00d4ff;">${totalMessages}</strong></span>
-                    <span>Enabled: <strong style="color: #00ff64;">${enabledMessages}</strong></span>
-                    <span>Disabled: <strong style="color: #ff6b35;">${disabledMessages}</strong></span>
+                    <span>Total Messages: <strong style="color: var(--color-primary);">${totalMessages}</strong></span>
+                    <span>Enabled: <strong style="color: var(--color-success);">${enabledMessages}</strong></span>
+                    <span>Disabled: <strong style="color: var(--color-warning);">${disabledMessages}</strong></span>
                 </div>
                 <div style="font-size: 12px; color: #888888;">
                     Categories: ${Object.keys(categories).map(cat => `${cat} (${categories[cat]})`).join(', ')}
@@ -7812,7 +7812,7 @@
         }
         
         .quick-play-mode {
-            background: linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #0f0f23 100%);
+            background: var(--color-background-gradient);
             min-height: 100vh;
             font-family: 'Electrolize', sans-serif;
         }
@@ -7844,7 +7844,7 @@
         }
 
         .recording-timestamp {
-            color: #ffd700;
+            color: var(--color-accent-gold);
             font-family: 'Courier New', monospace;
         }
 
@@ -8163,14 +8163,14 @@
         }
 
         .collapsible-header:hover {
-            background: rgba(0, 212, 255, 0.15);
-            border-color: rgba(0, 212, 255, 0.5);
+            background: var(--color-primary-transparent);
+            border-color: var(--color-primary);
         }
 
         .collapse-icon {
             font-size: 12px;
             transition: transform 0.3s ease;
-            color: #00d4ff;
+            color: var(--color-primary);
         }
 
         .collapsible-header.active .collapse-icon {
@@ -8181,20 +8181,20 @@
             margin-top: 15px;
             padding: 15px;
             background: rgba(0, 0, 0, 0.3);
-            border: 1px solid rgba(0, 212, 255, 0.2);
+            border: 1px solid var(--color-primary-border);
             border-radius: 8px;
         }
 
         .setting-group {
             margin-bottom: 30px;
             padding: 20px;
-            background: rgba(0, 212, 255, 0.05);
-            border: 1px solid rgba(0, 212, 255, 0.2);
+            background: var(--color-primary-transparent);
+            border: 1px solid var(--color-primary-border);
             border-radius: 10px;
         }
 
         .setting-group h3 {
-            color: #00d4ff;
+            color: var(--color-primary);
             font-size: 18px;
             margin: 0 0 15px 0;
             display: flex;
@@ -8210,7 +8210,7 @@
 
         .time-preset, .difficulty-preset {
             background: rgba(0, 0, 0, 0.6);
-            border: 2px solid rgba(0, 212, 255, 0.3);
+            border: 2px solid var(--color-primary-border);
             border-radius: 10px;
             padding: 15px;
             cursor: pointer;
@@ -8220,18 +8220,18 @@
         }
 
         .time-preset:hover, .difficulty-preset:hover {
-            border-color: #00d4ff;
-            background: rgba(0, 212, 255, 0.1);
+            border-color: var(--color-primary);
+            background: var(--color-primary-transparent);
         }
 
         .time-preset.active, .difficulty-preset.active {
-            border-color: #00d4ff;
-            background: rgba(0, 212, 255, 0.2);
-            box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
+            border-color: var(--color-primary);
+            background: var(--color-primary-hover);
+            box-shadow: 0 0 20px var(--color-primary-transparent);
         }
 
         .preset-value, .difficulty-name {
-            color: #00d4ff;
+            color: var(--color-primary);
             font-weight: bold;
             font-size: 16px;
             margin-bottom: 5px;
@@ -8307,8 +8307,8 @@
 
         .setting-row select {
             background: rgba(0, 0, 0, 0.8);
-            border: 1px solid rgba(0, 212, 255, 0.3);
-            color: #00d4ff;
+            border: 1px solid var(--color-primary-border);
+            color: var(--color-primary);
             padding: 5px 10px;
             border-radius: 5px;
         }
@@ -8323,7 +8323,7 @@
         }
 
         .tag-category h4 {
-            color: #00d4ff;
+            color: var(--color-primary);
             font-size: 14px;
             margin-bottom: 10px;
             font-weight: bold;
@@ -8342,18 +8342,18 @@
             cursor: pointer;
             padding: 8px 12px;
             background: rgba(0, 0, 0, 0.4);
-            border: 1px solid rgba(0, 212, 255, 0.2);
+            border: 1px solid var(--color-primary-border);
             border-radius: 5px;
             transition: all 0.2s ease;
         }
 
         .tag-option:hover {
-            background: rgba(0, 212, 255, 0.1);
-            border-color: rgba(0, 212, 255, 0.4);
+            background: var(--color-primary-transparent);
+            border-color: var(--color-primary-hover);
         }
 
         .tag-option input[type="checkbox"] {
-            accent-color: #00d4ff;
+            accent-color: var(--color-primary);
             margin: 0;
         }
 
@@ -8364,7 +8364,7 @@
         }
 
         .tag-option input[type="checkbox"]:checked + .tag-name {
-            color: #00d4ff;
+            color: var(--color-primary);
             font-weight: bold;
         }
 
@@ -8373,7 +8373,7 @@
             margin-top: 15px;
             padding: 10px;
             background: rgba(0, 0, 0, 0.6);
-            border: 1px solid rgba(0, 212, 255, 0.3);
+            border: 1px solid var(--color-primary-border);
             border-radius: 5px;
             display: flex;
             align-items: center;
@@ -8388,19 +8388,19 @@
         }
 
         .task-duration {
-            color: #00d4ff;
+            color: var(--color-primary);
             font-weight: bold;
             font-size: 14px;
         }
 
         .task-timer {
-            color: #00d4ff;
+            color: var(--color-primary);
             font-weight: bold;
             font-size: 16px;
-            background: rgba(0, 212, 255, 0.1);
+            background: var(--color-primary-transparent);
             padding: 2px 8px;
             border-radius: 3px;
-            border: 1px solid rgba(0, 212, 255, 0.3);
+            border: 1px solid var(--color-primary-border);
             min-width: 45px;
             text-align: center;
         }
@@ -8430,7 +8430,7 @@
             border-radius: 5px;
             background: rgba(0, 0, 0, 0.8);
             outline: none;
-            border: 1px solid rgba(0, 212, 255, 0.3);
+            border: 1px solid var(--color-primary-border);
         }
 
         .slider::-webkit-slider-thumb {
@@ -8438,24 +8438,24 @@
             width: 20px;
             height: 20px;
             border-radius: 50%;
-            background: #00d4ff;
+            background: var(--color-primary);
             cursor: pointer;
-            box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+            box-shadow: var(--shadow-glow-primary);
         }
 
         .slider::-moz-range-thumb {
             width: 20px;
             height: 20px;
             border-radius: 50%;
-            background: #00d4ff;
+            background: var(--color-primary);
             cursor: pointer;
             border: none;
-            box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+            box-shadow: var(--shadow-glow-primary);
         }
 
         .slider-value {
             min-width: 45px;
-            color: #00d4ff;
+            color: var(--color-primary);
             font-weight: bold;
             text-align: center;
         }
@@ -8482,7 +8482,7 @@
 
         .results-container {
             background: rgba(0, 0, 0, 0.8);
-            border: 2px solid #00d4ff;
+            border: 2px solid var(--color-primary);
             border-radius: 15px;
             padding: 30px;
             margin: 20px 0;
@@ -8490,11 +8490,11 @@
         }
 
         .results-header h2 {
-            color: #00d4ff;
+            color: var(--color-primary);
             font-family: 'Audiowide', sans-serif;
             font-size: 32px;
             margin: 0 0 10px 0;
-            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+            text-shadow: var(--shadow-glow-primary);
         }
 
         .results-stats {
@@ -8523,7 +8523,7 @@
         }
 
         .stat-value {
-            color: #00d4ff;
+            color: var(--color-primary);
             font-size: 24px;
             font-weight: bold;
         }
@@ -8539,7 +8539,7 @@
         .time-preset.custom input {
             background: transparent;
             border: none;
-            color: #00d4ff;
+            color: var(--color-primary);
             text-align: center;
             width: 60px;
             font-size: 12px;
@@ -8739,7 +8739,7 @@
             appearance: none;
             width: 16px;
             height: 16px;
-            background: #8B5CF6;
+            background: var(--color-secondary);
             border-radius: 50%;
             cursor: pointer;
         }
@@ -8747,7 +8747,7 @@
         .volume-slider::-moz-range-thumb {
             width: 16px;
             height: 16px;
-            background: #8B5CF6;
+            background: var(--color-secondary);
             border-radius: 50%;
             cursor: pointer;
             border: none;
@@ -8772,7 +8772,7 @@
         }
 
         .playlist-select:focus {
-            border-color: #8B5CF6;
+            border-color: var(--color-secondary);
         }
 
         .video-info {
@@ -8806,7 +8806,7 @@
 
         .progress-fill {
             height: 100%;
-            background: #8B5CF6;
+            background: var(--color-secondary);
             border-radius: 2px;
             width: 0%;
             transition: width 0.1s ease;
@@ -8826,7 +8826,7 @@
             background: rgba(0, 0, 0, 0.4);
             border-radius: 15px;
             padding: 15px;
-            border: 1px solid rgba(0, 212, 255, 0.3);
+            border: 1px solid var(--color-primary-border);
             min-height: 0; /* Allow flex to shrink */
             overflow: visible; /* Allow natural sizing */
             height: auto; /* Auto height based on content */
@@ -8839,11 +8839,11 @@
         }
 
         .task-text-container h3 {
-            color: #00d4ff;
+            color: var(--color-primary);
             font-family: 'Audiowide', sans-serif;
             font-size: 22px;
             margin: 0 0 8px 0;
-            text-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
+            text-shadow: var(--shadow-glow-primary);
             text-align: center;
             line-height: 1.2;
         }
@@ -9215,7 +9215,7 @@
             width: 12px;
             height: 12px;
             border-radius: 50%;
-            background: #00d4ff;
+            background: var(--color-primary);
             cursor: pointer;
             border: none;
         }
@@ -9224,7 +9224,7 @@
             width: 12px;
             height: 12px;
             border-radius: 50%;
-            background: #00d4ff;
+            background: var(--color-primary);
             cursor: pointer;
             border: none;
         }
@@ -9241,13 +9241,13 @@
         .task-display-container {
             background: rgba(0, 0, 0, 0.7) !important;
             backdrop-filter: blur(5px);
-            border: 2px solid rgba(0, 212, 255, 0.5) !important;
+            border: 2px solid var(--color-primary-border) !important;
         }
 
         .control-sidebar {
             background: rgba(0, 0, 0, 0.8) !important;
             backdrop-filter: blur(5px);
-            border: 1px solid rgba(0, 212, 255, 0.5) !important;
+            border: 1px solid var(--color-primary-border) !important;
         }
 
         /* Video mode selection styles */
@@ -9260,8 +9260,8 @@
         .video-options {
             margin-left: 20px;
             padding: 15px;
-            background: rgba(0, 212, 255, 0.05);
-            border: 1px solid rgba(0, 212, 255, 0.2);
+            background: var(--color-primary-transparent);
+            border: 1px solid var(--color-primary-border);
             border-radius: 8px;
         }
 
@@ -9319,7 +9319,7 @@
 
         .task-management-container {
             background: rgba(0, 0, 0, 0.8);
-            border: 2px solid #00d4ff;
+            border: 2px solid var(--color-primary);
             border-radius: 15px;
             padding: 30px;
         }
@@ -9330,7 +9330,7 @@
         }
 
         .task-management-header h2 {
-            color: #00d4ff;
+            color: var(--color-primary);
             font-family: 'Audiowide', sans-serif;
             margin-bottom: 10px;
         }
@@ -9339,14 +9339,14 @@
             display: flex;
             gap: 15px;
             margin-bottom: 30px;
-            border-bottom: 2px solid rgba(0, 212, 255, 0.3);
+            border-bottom: 2px solid var(--color-primary-border);
             padding-bottom: 15px;
         }
 
         .task-tab-btn {
             padding: 12px 20px;
             background: rgba(0, 0, 0, 0.6);
-            border: 2px solid rgba(0, 212, 255, 0.3);
+            border: 2px solid var(--color-primary-border);
             border-radius: 8px;
             color: #aaa;
             cursor: pointer;
@@ -9355,14 +9355,14 @@
         }
 
         .task-tab-btn.active {
-            background: rgba(0, 212, 255, 0.2);
-            border-color: #00d4ff;
-            color: #00d4ff;
+            background: var(--color-primary-transparent);
+            border-color: var(--color-primary);
+            color: var(--color-primary);
         }
 
         .task-tab-btn:hover {
-            background: rgba(0, 212, 255, 0.1);
-            border-color: #00d4ff;
+            background: var(--color-primary-transparent);
+            border-color: var(--color-primary);
         }
 
         .task-section {
@@ -9382,7 +9382,7 @@
         }
 
         .add-task-section h3 {
-            color: #00d4ff;
+            color: var(--color-primary);
             margin-bottom: 15px;
         }
 
@@ -9449,18 +9449,18 @@
 
         .tag-suggestion {
             padding: 4px 8px;
-            background: rgba(0, 212, 255, 0.2);
-            border: 1px solid rgba(0, 212, 255, 0.4);
+            background: var(--color-primary-transparent);
+            border: 1px solid var(--color-primary-hover);
             border-radius: 12px;
-            color: #00d4ff;
+            color: var(--color-primary);
             font-size: 12px;
             cursor: pointer;
             transition: all 0.3s ease;
         }
 
         .tag-suggestion:hover {
-            background: rgba(0, 212, 255, 0.3);
-            border-color: #00d4ff;
+            background: var(--color-primary-transparent);
+            border-color: var(--color-primary);
         }
 
         .form-actions {
@@ -9476,7 +9476,7 @@
         }
 
         .existing-tasks-section h3 {
-            color: #00d4ff;
+            color: var(--color-primary);
             margin-bottom: 15px;
         }
 
@@ -9522,8 +9522,8 @@
         }
 
         .task-item:hover {
-            background: rgba(0, 212, 255, 0.1);
-            border-color: #00d4ff;
+            background: var(--color-primary-transparent);
+            border-color: var(--color-primary);
         }
 
         .task-content {
@@ -9544,9 +9544,9 @@
 
         .task-tag {
             padding: 2px 6px;
-            background: rgba(0, 212, 255, 0.3);
+            background: var(--color-primary-transparent);
             border-radius: 10px;
-            color: #00d4ff;
+            color: var(--color-primary);
             font-size: 11px;
         }
 
@@ -9605,7 +9605,7 @@
         }
 
         input:checked + .toggle-slider {
-            background-color: #00d4ff;
+            background-color: var(--color-primary);
         }
 
         input:checked + .toggle-slider:before {
@@ -9643,9 +9643,9 @@
         .tag-dropdown {
             width: 100%;
             background: rgba(0, 20, 40, 0.8);
-            border: 2px solid rgba(0, 212, 255, 0.3);
+            border: 2px solid var(--color-primary-border);
             border-radius: 8px;
-            color: #00d4ff;
+            color: var(--color-primary);
             padding: 8px;
             font-family: 'Orbitron', monospace;
             font-size: 14px;
@@ -9655,12 +9655,12 @@
         .tag-dropdown option {
             padding: 4px 8px;
             background: rgba(0, 20, 40, 0.9);
-            color: #00d4ff;
-            border-bottom: 1px solid rgba(0, 212, 255, 0.1);
+            color: var(--color-primary);
+            border-bottom: 1px solid var(--color-primary-transparent);
         }
 
         .tag-dropdown option:checked {
-            background: rgba(0, 212, 255, 0.3);
+            background: var(--color-primary-transparent);
             color: #ffffff;
         }
 
@@ -9692,9 +9692,9 @@
         #new-tag-input {
             width: 100%;
             background: rgba(0, 20, 40, 0.8);
-            border: 2px solid rgba(0, 212, 255, 0.3);
+            border: 2px solid var(--color-primary-border);
             border-radius: 8px;
-            color: #00d4ff;
+            color: var(--color-primary);
             padding: 12px;
             font-family: 'Orbitron', monospace;
             font-size: 14px;
@@ -9703,12 +9703,12 @@
         }
 
         #new-tag-input:focus {
-            border-color: rgba(0, 212, 255, 0.8);
-            box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+            border-color: var(--color-primary-hover);
+            box-shadow: var(--shadow-glow-primary);
         }
 
         #new-tag-input::placeholder {
-            color: rgba(0, 212, 255, 0.5);
+            color: var(--color-primary-transparent);
         }
 
         .tags-list {
@@ -9727,12 +9727,12 @@
             display: flex;
             align-items: center;
             gap: 8px;
-            background: rgba(0, 212, 255, 0.2);
-            color: #00d4ff;
+            background: var(--color-primary-transparent);
+            color: var(--color-primary);
             padding: 6px 12px;
             border-radius: 6px;
             font-size: 14px;
-            border: 1px solid rgba(0, 212, 255, 0.3);
+            border: 1px solid var(--color-primary-border);
         }
 
         .tag-delete-btn {
@@ -9781,11 +9781,11 @@
 
         .custom-modal {
             background: linear-gradient(135deg, rgba(0, 20, 40, 0.95), rgba(0, 40, 80, 0.95));
-            border: 2px solid rgba(0, 212, 255, 0.6);
+            border: 2px solid var(--color-primary-hover);
             border-radius: 12px;
             min-width: 400px;
             max-width: 500px;
-            box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
+            box-shadow: var(--shadow-glow-primary);
             font-family: 'Orbitron', monospace;
             animation: modalSlideIn 0.3s ease-out;
         }
@@ -9810,10 +9810,10 @@
 
         .custom-modal-header h3 {
             margin: 0;
-            color: #00d4ff;
+            color: var(--color-primary);
             font-size: 18px;
             font-weight: bold;
-            text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+            text-shadow: var(--shadow-glow-primary);
         }
 
         .custom-modal-body {
@@ -9925,8 +9925,8 @@
             background: rgba(0, 0, 0, 0.6);
             border-radius: 12px;
             padding: 30px;
-            border: 1px solid #00d4ff;
-            box-shadow: 0 8px 32px rgba(0, 212, 255, 0.2);
+            border: 1px solid var(--color-primary);
+            box-shadow: var(--shadow-glow-primary);
         }
 
         .message-management-header {
@@ -9974,9 +9974,9 @@
 
         .message-tab-btn.active,
         .message-tab-btn:hover {
-            background: rgba(0, 212, 255, 0.3);
-            color: #00d4ff;
-            border-color: #00d4ff;
+            background: var(--color-primary-transparent);
+            color: var(--color-primary);
+            border-color: var(--color-primary);
         }
 
         .message-section {
@@ -9992,7 +9992,7 @@
         }
 
         .message-section h3 {
-            color: #00d4ff;
+            color: var(--color-primary);
             margin-bottom: 20px;
             font-size: 20px;
         }
@@ -10050,7 +10050,7 @@
         }
 
         .message-control-row .range-display {
-            color: #00d4ff;
+            color: var(--color-primary);
             font-weight: bold;
             min-width: 60px;
             text-align: center;
@@ -10084,9 +10084,9 @@
         }
 
         .message-btn {
-            background: rgba(0, 212, 255, 0.2);
-            color: #00d4ff;
-            border: 1px solid #00d4ff;
+            background: var(--color-primary-transparent);
+            color: var(--color-primary);
+            border: 1px solid var(--color-primary);
             padding: 8px 16px;
             border-radius: 6px;
             cursor: pointer;
@@ -10095,7 +10095,7 @@
         }
 
         .message-btn:hover {
-            background: rgba(0, 212, 255, 0.4);
+            background: var(--color-primary-transparent);
         }
 
         .message-btn.primary {
@@ -10138,8 +10138,8 @@
         }
 
         .message-item:hover {
-            background: rgba(0, 212, 255, 0.1);
-            border-color: rgba(0, 212, 255, 0.3);
+            background: var(--color-primary-transparent);
+            border-color: var(--color-primary-border);
         }
 
         .message-item.disabled {
@@ -10184,8 +10184,8 @@
         }
 
         .message-category.encouraging {
-            background: rgba(0, 212, 255, 0.3);
-            color: #00d4ff;
+            background: var(--color-primary-transparent);
+            color: var(--color-primary);
         }
 
         .message-category.achievement {
@@ -10227,8 +10227,8 @@
         }
 
         .message-btn-edit:hover {
-            background: rgba(0, 212, 255, 0.3);
-            border-color: #00d4ff;
+            background: var(--color-primary-transparent);
+            border-color: var(--color-primary);
         }
 
         .message-btn-delete:hover {
diff --git a/src/styles/color-variables.css b/src/styles/color-variables.css
index 81d0922..14f45fe 100644
--- a/src/styles/color-variables.css
+++ b/src/styles/color-variables.css
@@ -19,6 +19,13 @@
     --color-accent-red-dark: #c0392b;            /* Darker red */
     --color-accent-green: #00ff88;               /* Success green */
     --color-accent-blue: #3498db;                /* Info blue */
+    --color-accent-gold: #ffd700;                /* Gold accent */
+    
+    /* Semantic aliases for common uses */
+    --color-warning: #f39c12;                    /* Orange-gold warning color */
+    --color-success: var(--color-accent-green);  /* Success state */
+    --color-error: var(--color-accent-red);      /* Error state */
+    --color-info: var(--color-accent-blue);      /* Info state */
     
     /* ===== BACKGROUND COLORS ===== */
     --bg-primary: #0a0a0a;                       /* Nearly black */