@quanta-intellect/vessel-browser 0.1.61 → 0.1.63

package/out/renderer/assets/{index-CBe7EN_l.css → index-4OgPv5GF.css}

@@ -65,13 +65,13 @@
     padding: 0 8px;
     border-radius: 999px;
     border: none;
-    background: rgba(255, 255, 255, 0.04);
+    background: var(--surface-hover);
     cursor: pointer;
     transition: background var(--duration-fast) var(--ease-in-out);
 }
 
 .mcp-status-indicator:hover {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--surface-active);
 }
 
 .mcp-dot {
@@ -89,18 +89,18 @@
 }
 
 .mcp-ready .mcp-dot {
-    background: #4ade80;
-    box-shadow: 0 0 4px rgba(74, 222, 128, 0.4);
+    background: var(--status-info);
+    box-shadow: 0 0 4px color-mix(in srgb, var(--status-info) 40%, transparent);
 }
 
 .mcp-error .mcp-dot {
-    background: #f87171;
-    box-shadow: 0 0 4px rgba(248, 113, 113, 0.4);
+    background: var(--status-error);
+    box-shadow: 0 0 4px color-mix(in srgb, var(--status-error) 40%, transparent);
 }
 
 .mcp-starting .mcp-dot {
-    background: #fbbf24;
-    box-shadow: 0 0 4px rgba(251, 191, 36, 0.4);
+    background: var(--status-warning);
+    box-shadow: 0 0 4px color-mix(in srgb, var(--status-warning) 40%, transparent);
     animation: mcp-pulse 1.5s ease-in-out infinite;
 }
 
@@ -111,7 +111,7 @@
 
 .window-btn-close:hover {
     background: var(--error);
-    color: white;
+    color: var(--bg-primary);
 }
 
 
@@ -196,7 +196,7 @@
 }
 
 .tab-item:hover {
-    background: rgba(255, 255, 255, 0.04);
+    background: var(--surface-hover);
     color: var(--text-secondary);
 }
 
@@ -220,7 +220,7 @@
 }
 
 .tab-item.model-active {
-    background: rgba(196, 160, 90, 0.08);
+    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
 }
 
 .tab-item.model-active:not(.active) {
@@ -234,7 +234,7 @@
 .tab-item.model-active.active::before {
     opacity: 1;
     background: var(--accent-primary);
-    box-shadow: 0 0 8px rgba(196, 160, 90, 0.4);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary) 40%, transparent);
 }
 
 .tab-favicon {
@@ -265,8 +265,8 @@
     height: 7px;
     flex-shrink: 0;
     border-radius: 999px;
-    background: #22c55e;
-    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
+    background: var(--status-info);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-info) 45%, transparent);
     animation: tab-agent-pulse 1.4s ease-out infinite;
 }
 
@@ -298,7 +298,7 @@
 }
 
 .tab-close:hover {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--surface-active);
     color: var(--text-primary);
 }
 
@@ -320,15 +320,15 @@
 
 @keyframes tab-agent-pulse {
     0% {
-        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.42);
+        box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-info) 42%, transparent);
     }
 
     70% {
-        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
+        box-shadow: 0 0 0 6px transparent;
     }
 
     100% {
-        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+        box-shadow: 0 0 0 0 transparent;
     }
 }
 
@@ -415,7 +415,7 @@
 
 .nav-btn.active {
     color: var(--accent-primary);
-    background: rgba(196, 160, 90, 0.12);
+    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
 }
 
 .nav-btn.ai-btn {
@@ -423,7 +423,7 @@
 }
 
 .nav-btn.ai-btn:hover {
-    background: rgba(196, 160, 90, 0.12);
+    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
 }
 
 .url-shell {
@@ -443,9 +443,9 @@
 }
 
 .url-shell:focus-within {
-    border-color: rgba(196, 160, 90, 0.5);
-    box-shadow: 0 0 0 2px rgba(196, 160, 90, 0.1);
-    background: rgba(42, 42, 46, 0.6);
+    border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 10%, transparent);
+    background: color-mix(in srgb, var(--bg-tertiary) 60%, transparent);
 }
 
 .url-form {
@@ -485,7 +485,7 @@
     padding: 0 10px;
     min-width: 0;
     max-width: min(280px, 26vw);
-    border-left: 1px solid rgba(255, 255, 255, 0.05);
+    border-left: 1px solid var(--border-glass);
     border-radius: 0;
     background: transparent;
     color: var(--text-muted);
@@ -508,8 +508,8 @@
 
 /* Active — green: agent is actively using tools */
 .agent-status-badge.active {
-    border-left-color: rgba(34, 197, 94, 0.18);
-    background: rgba(34, 197, 94, 0.05);
+    border-left-color: color-mix(in srgb, var(--status-info) 18%, transparent);
+    background: color-mix(in srgb, var(--status-info) 5%, transparent);
     color: var(--text-primary);
 }
 
@@ -518,7 +518,7 @@
         90deg,
         var(--text-primary) 0%,
         var(--text-primary) 40%,
-        #22c55e 50%,
+        var(--status-info) 50%,
         var(--text-primary) 60%,
         var(--text-primary) 100%
     );
@@ -536,21 +536,21 @@
 
 /* Recent — amber/yellow: MCP connected or recently active */
 .agent-status-badge.recent {
-    border-left-color: rgba(234, 179, 8, 0.14);
-    background: rgba(234, 179, 8, 0.03);
+    border-left-color: color-mix(in srgb, var(--status-warning) 14%, transparent);
+    background: color-mix(in srgb, var(--status-warning) 3%, transparent);
     color: var(--text-secondary);
 }
 
 /* Idle — gray: no connection */
 .agent-status-badge.idle {
-    border-left-color: rgba(113, 113, 122, 0.1);
+    border-left-color: color-mix(in srgb, var(--text-muted) 10%, transparent);
 }
 
 .agent-status-dot {
     width: 6px;
     height: 6px;
     border-radius: 999px;
-    background: rgba(113, 113, 122, 0.5);
+    background: color-mix(in srgb, var(--text-muted) 50%, transparent);
     flex-shrink: 0;
     transition:
         background var(--duration-slow) var(--ease-in-out),
@@ -559,14 +559,14 @@
 
 /* Green pulsing dot for active */
 .agent-status-badge.active .agent-status-dot {
-    background: #22c55e;
-    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.32);
+    background: var(--status-info);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-info) 32%, transparent);
     animation: agent-status-pulse-green 1.8s ease-out infinite;
 }
 
 /* Steady amber dot for recent/connected */
 .agent-status-badge.recent .agent-status-dot {
-    background: #eab308;
+    background: var(--status-warning);
 }
 
 .toolbar-actions {
@@ -599,7 +599,7 @@
     padding: 0 3px;
     border-radius: 999px;
     background: var(--accent-warm);
-    color: #1a1a1e;
+    color: var(--bg-primary);
     font-size: 9px;
     font-weight: 700;
     line-height: 14px;
@@ -627,16 +627,16 @@
 
 .bookmark-toast {
     padding: 12px 14px;
-    border: 1px solid rgba(196, 160, 90, 0.22);
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
     border-radius: var(--radius-lg);
     background: linear-gradient(
         180deg,
-        rgba(50, 50, 54, 0.97),
-        rgba(34, 34, 38, 0.97)
+        var(--glass-gradient-start),
+        var(--glass-gradient-end)
     );
     box-shadow:
-        0 4px 12px rgba(0, 0, 0, 0.2),
-        0 16px 40px rgba(0, 0, 0, 0.16);
+        0 4px 12px var(--shadow-color),
+        0 16px 40px var(--shadow-color);
     backdrop-filter: blur(16px);
     animation: toast-enter var(--duration-enter) var(--ease-out-expo) both;
 }
@@ -684,7 +684,7 @@
 
 
 .highlight-toast {
-    border-color: rgba(240, 198, 54, 0.25);
+    border-color: color-mix(in srgb, var(--accent-primary) 25%, transparent);
 }
 
 /* ═══════════════════════════════════════
@@ -705,16 +705,16 @@
 
 .download-toast {
     padding: 10px 14px;
-    border: 1px solid rgba(138, 173, 107, 0.22);
+    border: 1px solid color-mix(in srgb, var(--accent-secondary) 22%, transparent);
     border-radius: var(--radius-lg);
     background: linear-gradient(
         180deg,
-        rgba(50, 50, 54, 0.97),
-        rgba(34, 34, 38, 0.97)
+        var(--glass-gradient-start),
+        var(--glass-gradient-end)
     );
     box-shadow:
-        0 4px 12px rgba(0, 0, 0, 0.2),
-        0 16px 40px rgba(0, 0, 0, 0.16);
+        0 4px 12px var(--shadow-color),
+        0 16px 40px var(--shadow-color);
     backdrop-filter: blur(16px);
     animation: toast-enter var(--duration-enter) var(--ease-out-expo) both;
 }
@@ -748,7 +748,7 @@
 }
 
 .download-toast-failed {
-    color: #ff8e8e;
+    color: var(--status-error);
     font-size: 13px;
     font-weight: 700;
     flex-shrink: 0;
@@ -758,7 +758,7 @@
     margin-top: 8px;
     height: 3px;
     border-radius: 2px;
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--surface-hover);
     overflow: hidden;
 }
 
@@ -791,16 +791,16 @@
     width: min(320px, calc(100vw - 28px));
     z-index: 40;
     padding: 14px;
-    border: 1px solid rgba(196, 160, 90, 0.18);
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
     border-radius: var(--radius-lg);
     background: linear-gradient(
         180deg,
-        rgba(50, 50, 54, 0.97),
-        rgba(34, 34, 38, 0.97)
+        var(--glass-gradient-start),
+        var(--glass-gradient-end)
     );
     box-shadow:
-        0 4px 12px rgba(0, 0, 0, 0.2),
-        0 16px 40px rgba(0, 0, 0, 0.16);
+        0 4px 12px var(--shadow-color),
+        0 16px 40px var(--shadow-color);
     backdrop-filter: blur(16px);
     animation: toast-enter var(--duration-enter) var(--ease-out-expo) both;
 }
@@ -834,7 +834,7 @@
 .flow-progress-bar-track {
     height: 3px;
     border-radius: 2px;
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--surface-hover);
     overflow: hidden;
     margin-bottom: 10px;
 }
@@ -884,7 +884,7 @@
 .flow-step-active .flow-step-dot {
     background: var(--accent-primary);
     opacity: 1;
-    box-shadow: 0 0 6px rgba(196, 160, 90, 0.4);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--accent-primary) 40%, transparent);
 }
 
 .flow-step-active .flow-step-label {
@@ -900,16 +900,16 @@
 .flow-step-done .flow-step-label {
     color: var(--text-muted);
     text-decoration: line-through;
-    text-decoration-color: rgba(255, 255, 255, 0.15);
+    text-decoration-color: color-mix(in srgb, var(--text-muted) 15%, transparent);
 }
 
 .flow-step-failed .flow-step-dot {
-    background: #ff6b5b;
+    background: var(--status-error);
     opacity: 1;
 }
 
 .flow-step-failed .flow-step-label {
-    color: #ff8e8e;
+    color: var(--status-error);
 }
 
 .flow-step-skipped .flow-step-dot {
@@ -945,16 +945,16 @@
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
-    border: 1px solid rgba(196, 160, 90, 0.14);
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 14%, transparent);
     border-radius: var(--radius-lg);
     background: linear-gradient(
         180deg,
-        rgba(50, 50, 54, 0.94),
-        rgba(34, 34, 38, 0.94)
+        var(--glass-gradient-start),
+        var(--glass-gradient-end)
     );
     box-shadow:
-        0 2px 8px rgba(0, 0, 0, 0.15),
-        0 8px 24px rgba(0, 0, 0, 0.12);
+        0 2px 8px var(--shadow-color),
+        0 8px 24px var(--shadow-color);
     backdrop-filter: blur(16px);
     animation: toast-enter var(--duration-enter) var(--ease-out-expo) both;
     max-width: min(420px, calc(100vw - 28px));
@@ -965,7 +965,7 @@
     height: 6px;
     border-radius: 50%;
     background: var(--accent-primary);
-    box-shadow: 0 0 6px rgba(196, 160, 90, 0.5);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--accent-primary) 50%, transparent);
     animation: agent-transcript-live-pulse 2s ease-in-out infinite;
     flex-shrink: 0;
 }
@@ -987,16 +987,16 @@
     max-height: min(280px, calc(100vh - 120px));
     display: flex;
     flex-direction: column;
-    border: 1px solid rgba(196, 160, 90, 0.14);
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 14%, transparent);
     border-radius: var(--radius-lg);
     background: linear-gradient(
         180deg,
-        rgba(34, 34, 38, 0.92),
-        rgba(26, 26, 30, 0.96)
+        var(--glass-gradient-start),
+        var(--glass-gradient-end)
     );
     box-shadow:
-        0 4px 16px rgba(0, 0, 0, 0.15),
-        0 20px 50px rgba(0, 0, 0, 0.2);
+        0 4px 16px var(--shadow-color),
+        0 20px 50px var(--shadow-color-strong);
     backdrop-filter: blur(20px);
     overflow: hidden;
     z-index: 40;
@@ -1024,7 +1024,7 @@
     justify-content: space-between;
     gap: 10px;
     padding: 10px 14px;
-    border-bottom: 1px solid rgba(196, 160, 90, 0.08);
+    border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 8%, transparent);
 }
 
 .agent-transcript-title-row {
@@ -1054,8 +1054,8 @@
     width: 7px;
     height: 7px;
     border-radius: 999px;
-    background: #22c55e;
-    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.28);
+    background: var(--status-info);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-info) 28%, transparent);
     animation: agent-status-pulse-green 1.8s ease-out infinite;
 }
 
@@ -1079,7 +1079,7 @@
 }
 
 .agent-transcript-icon:hover {
-    background: rgba(255, 255, 255, 0.06);
+    background: var(--surface-hover);
     color: var(--text-primary);
 }
 
@@ -1093,47 +1093,47 @@
 }
 
 .agent-transcript-list.scroll-fade::before {
-    background: linear-gradient(to bottom, rgba(30, 30, 34, 0.95), transparent);
+    background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-secondary) 95%, transparent), transparent);
 }
 
 .agent-transcript-list.scroll-fade::after {
-    background: linear-gradient(to top, rgba(24, 24, 28, 0.95), transparent);
+    background: linear-gradient(to top, color-mix(in srgb, var(--bg-primary) 95%, transparent), transparent);
 }
 
 .agent-transcript-entry {
     padding: 10px 12px;
     border-radius: var(--radius-md);
-    border: 1px solid rgba(255, 255, 255, 0.04);
-    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--border-glass);
+    background: var(--surface-glass);
     transition: border-color var(--duration-normal) var(--ease-in-out);
 }
 
 .agent-transcript-entry.thinking {
-    border-color: rgba(196, 160, 90, 0.14);
-    background: rgba(196, 160, 90, 0.03);
+    border-color: color-mix(in srgb, var(--accent-primary) 14%, transparent);
+    background: color-mix(in srgb, var(--accent-primary) 3%, transparent);
 }
 
 .agent-transcript-entry.message {
-    border-color: rgba(107, 138, 173, 0.14);
-    background: rgba(107, 138, 173, 0.03);
+    border-color: color-mix(in srgb, var(--accent-secondary) 14%, transparent);
+    background: color-mix(in srgb, var(--accent-secondary) 3%, transparent);
 }
 
 .agent-transcript-entry.status {
-    border-color: rgba(196, 149, 106, 0.16);
-    background: rgba(196, 149, 106, 0.03);
+    border-color: color-mix(in srgb, var(--accent-warm) 16%, transparent);
+    background: color-mix(in srgb, var(--accent-warm) 3%, transparent);
 }
 
 .agent-transcript-entry.streaming {
-    box-shadow: inset 0 0 0 1px rgba(196, 160, 90, 0.06);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 6%, transparent);
     animation: entry-stream-glow 2s ease-in-out infinite;
 }
 
 @keyframes entry-stream-glow {
     0%, 100% {
-        border-color: rgba(196, 160, 90, 0.14);
+        border-color: color-mix(in srgb, var(--accent-primary) 14%, transparent);
     }
     50% {
-        border-color: rgba(196, 160, 90, 0.28);
+        border-color: color-mix(in srgb, var(--accent-primary) 28%, transparent);
     }
 }
 
@@ -1169,29 +1169,29 @@
 
 @keyframes agent-status-pulse {
     0% {
-        box-shadow: 0 0 0 0 rgba(196, 160, 90, 0.32);
+        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary) 32%, transparent);
     }
 
     70% {
-        box-shadow: 0 0 0 5px rgba(196, 160, 90, 0);
+        box-shadow: 0 0 0 5px transparent;
     }
 
     100% {
-        box-shadow: 0 0 0 0 rgba(196, 160, 90, 0);
+        box-shadow: 0 0 0 0 transparent;
     }
 }
 
 @keyframes agent-status-pulse-green {
     0% {
-        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.36);
+        box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-info) 36%, transparent);
     }
 
     70% {
-        box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
+        box-shadow: 0 0 0 5px transparent;
     }
 
     100% {
-        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+        box-shadow: 0 0 0 0 transparent;
     }
 }
 
@@ -1209,16 +1209,16 @@
     max-height: min(320px, calc(100vh - 120px));
     display: flex;
     flex-direction: column;
-    border: 1px solid rgba(245, 158, 11, 0.2);
+    border: 1px solid color-mix(in srgb, var(--accent-warm) 20%, transparent);
     border-radius: var(--radius-lg);
     background: linear-gradient(
         180deg,
-        rgba(50, 50, 54, 0.97),
-        rgba(34, 34, 38, 0.97)
+        var(--glass-gradient-start),
+        var(--glass-gradient-end)
     );
     box-shadow:
-        0 4px 12px rgba(0, 0, 0, 0.2),
-        0 16px 40px rgba(0, 0, 0, 0.16);
+        0 4px 12px var(--shadow-color),
+        0 16px 40px var(--shadow-color);
     backdrop-filter: blur(16px);
     overflow-y: auto;
     z-index: 50;
@@ -1241,7 +1241,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 10px 14px;
-    border-bottom: 1px solid rgba(245, 158, 11, 0.1);
+    border-bottom: 1px solid color-mix(in srgb, var(--accent-warm) 10%, transparent);
     color: var(--text-secondary);
     font-size: 11.5px;
     font-weight: 600;
@@ -1278,7 +1278,7 @@
 }
 
 .page-diff-popup-close:hover {
-    background: rgba(255, 255, 255, 0.06);
+    background: var(--surface-hover);
     color: var(--text-primary);
 }
 
@@ -1287,8 +1287,8 @@
     flex-direction: column;
     gap: 6px;
     padding: 10px 14px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    background: rgba(255, 255, 255, 0.02);
+    border-bottom: 1px solid var(--border-glass);
+    background: var(--surface-glass);
 }
 
 .page-diff-burst-history-label {
@@ -1324,7 +1324,7 @@
     align-items: stretch;
     gap: 8px;
     padding: 12px 14px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+    border-bottom: 1px solid var(--border-glass);
 }
 
 .page-diff-item:last-child {
@@ -1341,7 +1341,7 @@
     align-self: flex-start;
     padding: 2px 6px;
     border-radius: var(--radius-sm);
-    background: rgba(255, 255, 255, 0.05);
+    background: var(--surface-hover);
     color: var(--text-muted);
     font-size: 10px;
     font-weight: 600;
@@ -1367,7 +1367,7 @@
     gap: 3px;
     padding: 8px 10px;
     border-radius: var(--radius-md);
-    background: rgba(255, 255, 255, 0.04);
+    background: var(--surface-glass);
 }
 
 .page-diff-snippet-label,
@@ -1404,19 +1404,19 @@
 }
 
 .page-diff-added .page-diff-section {
-    background: rgba(34, 197, 94, 0.1);
-    color: #4ade80;
+    background: var(--status-success-bg);
+    color: var(--status-success);
 }
 
 .page-diff-removed .page-diff-section {
-    background: rgba(239, 68, 68, 0.1);
-    color: #f87171;
+    background: var(--status-error-bg);
+    color: var(--status-error);
 }
 
 .page-diff-changed .page-diff-section,
 .page-diff-modified .page-diff-section {
-    background: rgba(245, 158, 11, 0.1);
-    color: #fbbf24;
+    background: var(--status-warning-bg);
+    color: var(--status-warning);
 }
 /* ═══════════════════════════════════════
    Command bar overlay — cinematic entrance
@@ -1425,7 +1425,7 @@
 .command-bar-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.55);
+    background: var(--overlay-bg);
     display: flex;
     align-items: flex-start;
     justify-content: center;
@@ -1448,9 +1448,9 @@
     border-radius: 14px;
     overflow: hidden;
     box-shadow:
-        0 4px 24px rgba(0, 0, 0, 0.25),
-        0 24px 64px rgba(0, 0, 0, 0.35),
-        inset 0 1px 0 rgba(255, 255, 255, 0.04);
+        0 4px 24px var(--shadow-color),
+        0 24px 64px var(--shadow-color-strong),
+        inset 0 1px 0 var(--inset-highlight);
     animation: command-bar-enter 350ms var(--ease-out-expo) both;
 }
 
@@ -1548,8 +1548,8 @@
 .command-bar-recent-item {
     padding: 3px 10px;
     border-radius: 999px;
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: var(--surface-hover);
+    border: 1px solid var(--border-glass);
     color: var(--text-secondary);
     font-size: 11.5px;
     max-width: 200px;
@@ -1563,8 +1563,8 @@
 }
 
 .command-bar-recent-item:hover {
-    background: rgba(196, 160, 90, 0.1);
-    border-color: rgba(196, 160, 90, 0.2);
+    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
+    border-color: color-mix(in srgb, var(--accent-primary) 20%, transparent);
     color: var(--text-primary);
 }
 
@@ -1579,8 +1579,8 @@
 }
 
 .command-bar-hints kbd {
-    background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: var(--kbd-bg);
+    border: 1px solid var(--kbd-border);
     padding: 1px 6px;
     border-radius: var(--radius-sm);
     font-family: var(--font-ui);
@@ -1608,7 +1608,7 @@
     font-size: 12px;
     font-weight: 500;
     background: var(--accent-primary);
-    color: white;
+    color: var(--button-primary-fg);
     border: none;
     cursor: pointer;
     transition: background var(--duration-fast) var(--ease-in-out),
@@ -1616,7 +1616,7 @@
 }
 
 .command-bar-no-provider-btn:hover {
-    background: #d4b06a;
+    background: var(--button-primary-hover-bg);
 }
 
 .command-bar-no-provider-btn:active {
@@ -1625,8 +1625,8 @@
 
 .command-bar-no-provider-btn kbd {
     margin-left: 6px;
-    background: rgba(255, 255, 255, 0.15);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: color-mix(in srgb, var(--bg-primary) 15%, transparent);
+    border: 1px solid color-mix(in srgb, var(--bg-primary) 10%, transparent);
     padding: 1px 5px;
     border-radius: 3px;
     font-family: var(--font-ui);
@@ -1698,7 +1698,7 @@
 
 .sidebar-resize-handle:hover,
 .sidebar-resize-handle.dragging {
-    background: rgba(196, 160, 90, 0.08);
+    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
 }
 
 .sidebar-header {
@@ -1822,7 +1822,7 @@
 
 .sidebar-tab:hover {
     color: var(--text-secondary);
-    background: rgba(255, 255, 255, 0.02);
+    background: var(--surface-glass);
 }
 
 .sidebar-tab.active {
@@ -1847,7 +1847,7 @@
     padding: 0 4px;
     border-radius: 999px;
     background: var(--accent-warm);
-    color: #1a1a1e;
+    color: var(--bg-primary);
     font-size: 9px;
     font-weight: 700;
     line-height: 16px;
@@ -1942,8 +1942,8 @@
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    background: rgba(132, 209, 154, 0.12);
-    color: #84d19a;
+    background: var(--status-success-bg);
+    color: var(--status-success);
 }
 
 .bookmark-save-card,
@@ -1953,8 +1953,8 @@
     gap: 8px;
     padding: 10px;
     border-radius: var(--radius-md);
-    background: rgba(0, 0, 0, 0.14);
-    border: 1px solid rgba(255, 255, 255, 0.04);
+    background: var(--surface-elevated);
+    border: 1px solid var(--border-glass);
 }
 
 .bookmark-save-shell {
@@ -1968,8 +1968,8 @@
     min-height: 42px;
     padding: 10px 14px;
     border-radius: var(--radius-md);
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--surface-glass);
+    border: 1px solid var(--border-glass);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1979,7 +1979,7 @@
 }
 
 .bookmark-save-toggle:hover {
-    background: rgba(255, 255, 255, 0.06);
+    background: var(--surface-hover);
 }
 
 .bookmark-save-toggle-copy {
@@ -2025,7 +2025,7 @@
     width: 100%;
     min-width: 0;
     background: var(--bg-secondary);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--border-glass);
     border-radius: var(--radius-md);
     color: var(--text-primary);
     font-size: 12px;
@@ -2051,8 +2051,8 @@
 .bookmark-input:focus,
 .bookmark-note-input:focus {
     outline: none;
-    border-color: rgba(224, 200, 120, 0.45);
-    box-shadow: 0 0 0 2px rgba(224, 200, 120, 0.08);
+    border-color: var(--border-focus);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 8%, transparent);
 }
 
 .bookmark-primary-button,
@@ -2073,12 +2073,12 @@
 }
 
 .bookmark-primary-button {
-    background: #e0c878;
-    color: #2a2008;
+    background: var(--accent-primary);
+    color: var(--button-primary-fg);
 }
 
 .bookmark-primary-button:hover:not(:disabled) {
-    background: #ebd898;
+    background: var(--button-primary-hover-bg);
 }
 
 .bookmark-primary-button:active:not(:disabled) {
@@ -2087,21 +2087,21 @@
 
 .bookmark-secondary-button,
 .bookmark-ghost-button {
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--border-glass);
 }
 
 .bookmark-secondary-button {
-    background: rgba(255, 255, 255, 0.06);
+    background: var(--surface-hover);
     color: var(--text-primary);
 }
 
 .bookmark-secondary-button:hover:not(:disabled),
 .bookmark-ghost-button:hover:not(:disabled) {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--surface-active);
 }
 
 .bookmark-ghost-button {
-    background: rgba(255, 255, 255, 0.02);
+    background: var(--surface-glass);
     color: var(--text-secondary);
 }
 
@@ -2112,11 +2112,11 @@
 }
 
 .bookmark-ghost-button.danger {
-    color: #ff8e8e;
+    color: var(--status-error);
 }
 
 .bookmark-ghost-button.danger:hover {
-    background: rgba(255, 142, 142, 0.08);
+    background: color-mix(in srgb, var(--status-error) 8%, transparent);
 }
 
 .bookmark-folder-create,
@@ -2126,8 +2126,8 @@
 
 .bookmark-folder-delete-confirm {
     padding: 8px 12px;
-    background: rgba(255, 142, 142, 0.04);
-    border: 1px solid rgba(255, 142, 142, 0.12);
+    background: color-mix(in srgb, var(--status-error) 4%, transparent);
+    border: 1px solid color-mix(in srgb, var(--status-error) 12%, transparent);
     border-radius: var(--radius-md);
     margin-top: 4px;
 }
@@ -2169,7 +2169,7 @@
 
 .bookmark-folder-header.clickable:hover {
     color: var(--text-primary);
-    background: rgba(255, 255, 255, 0.02);
+    background: var(--surface-glass);
 }
 
 .bookmark-folder-overview {
@@ -2187,7 +2187,7 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    color: #e0c878;
+    color: var(--accent-primary);
     font-size: 12px;
     line-height: 1;
     transform-origin: center;
@@ -2228,8 +2228,8 @@
     gap: 6px;
     padding: 10px;
     border-radius: var(--radius-md);
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.04);
+    background: var(--surface-glass);
+    border: 1px solid var(--border-glass);
     transition:
         background var(--duration-normal) var(--ease-out-expo),
         border-color var(--duration-normal) var(--ease-out-expo),
@@ -2238,9 +2238,9 @@
 }
 
 .bookmark-item:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(224, 200, 120, 0.15);
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(224, 200, 120, 0.06);
+    background: var(--surface-hover);
+    border-color: color-mix(in srgb, var(--accent-primary) 15%, transparent);
+    box-shadow: 0 2px 12px var(--shadow-color), 0 0 0 1px color-mix(in srgb, var(--accent-primary) 6%, transparent);
     transform: translateY(-1px);
 }
 
@@ -2262,19 +2262,19 @@
     width: 8px;
     height: 8px;
     border-radius: 999px;
-    background: rgba(224, 200, 120, 0.25);
+    background: color-mix(in srgb, var(--accent-primary) 25%, transparent);
     transition:
         background var(--duration-normal) var(--ease-out-expo),
         box-shadow var(--duration-normal) var(--ease-out-expo);
 }
 
 .bookmark-item:hover .bookmark-item-link::before {
-    background: rgba(224, 200, 120, 0.5);
-    box-shadow: 0 0 6px rgba(224, 200, 120, 0.2);
+    background: color-mix(in srgb, var(--accent-primary) 50%, transparent);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--accent-primary) 20%, transparent);
 }
 
 .bookmark-item-link:hover .bookmark-item-title {
-    color: #ebd898;
+    color: var(--accent-warm);
 }
 
 .bookmark-item-url {
@@ -2306,8 +2306,8 @@
     min-height: 42px;
     padding: 10px 14px;
     border-radius: var(--radius-md);
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--surface-glass);
+    border: 1px solid var(--border-glass);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -2317,7 +2317,7 @@
 }
 
 .agent-panel-toggle:hover {
-    background: rgba(255, 255, 255, 0.06);
+    background: var(--surface-hover);
 }
 
 .agent-panel-toggle-copy {
@@ -2404,34 +2404,34 @@
 }
 
 .agent-status-pill {
-    background: rgba(132, 209, 154, 0.12);
-    color: #84d19a;
+    background: var(--status-success-bg);
+    color: var(--status-success);
 }
 
 .agent-status-pill.paused {
-    background: rgba(255, 161, 103, 0.12);
-    color: #ffb074;
+    background: var(--status-warning-bg);
+    color: var(--status-warning);
 }
 
 .agent-action-status.running {
-    background: rgba(224, 200, 120, 0.12);
-    color: #e0c878;
+    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+    color: var(--accent-primary);
 }
 
 .agent-action-status.completed {
-    background: rgba(132, 209, 154, 0.12);
-    color: #84d19a;
+    background: var(--status-success-bg);
+    color: var(--status-success);
 }
 
 .agent-action-status.failed,
 .agent-action-status.rejected {
-    background: rgba(255, 142, 142, 0.12);
-    color: #ff8e8e;
+    background: var(--status-error-bg);
+    color: var(--status-error);
 }
 
 .agent-action-status.waiting-approval {
-    background: rgba(255, 193, 102, 0.12);
-    color: #ffc166;
+    background: color-mix(in srgb, var(--accent-warm) 12%, transparent);
+    color: var(--accent-warm);
     animation: approval-pulse 2s ease-in-out infinite;
 }
 
@@ -2446,7 +2446,7 @@
     min-width: 0;
     height: 32px;
     background: var(--bg-secondary);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--border-glass);
     border-radius: var(--radius-md);
     color: var(--text-primary);
     font-size: 12px;
@@ -2470,7 +2470,7 @@
     width: 100%;
     height: 32px;
     padding: 0 10px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--border-glass);
     border-radius: var(--radius-md);
     background: var(--bg-secondary);
     color: var(--text-primary);
@@ -2492,7 +2492,7 @@
 .dropdown-select-trigger:focus-visible {
     outline: none;
     border-color: var(--accent-primary);
-    box-shadow: 0 0 0 2px rgba(196, 160, 90, 0.1);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 10%, transparent);
 }
 
 .dropdown-select-value {
@@ -2524,10 +2524,10 @@
     padding: 4px;
     border-radius: var(--radius-md);
     background: var(--bg-elevated);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
     box-shadow:
-        0 4px 16px rgba(0, 0, 0, 0.2),
-        0 12px 40px rgba(0, 0, 0, 0.16);
+        0 4px 16px var(--shadow-color),
+        0 12px 40px var(--shadow-color);
     animation: dropdown-enter 200ms var(--ease-out-expo) both;
 }
 
@@ -2573,18 +2573,18 @@
 
 .dropdown-select-option:hover,
 .dropdown-select-option.selected {
-    background: rgba(224, 200, 120, 0.1);
+    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
 }
 
 .dropdown-select-option.selected {
-    background: rgba(224, 200, 120, 0.14);
+    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
 }
 
 .agent-select:focus,
 .agent-input:focus {
     outline: none;
     border-color: var(--accent-primary);
-    box-shadow: 0 0 0 2px rgba(196, 160, 90, 0.1);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 10%, transparent);
 }
 
 .agent-control-button,
@@ -2602,14 +2602,14 @@
 }
 
 .agent-control-button {
-    background: rgba(255, 255, 255, 0.04);
+    background: var(--surface-hover);
     color: var(--text-secondary);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-glass);
 }
 
 .agent-control-button:hover,
 .agent-section-toggle:hover {
-    background: rgba(255, 255, 255, 0.07);
+    background: var(--surface-active);
 }
 
 .agent-control-button:active,
@@ -2619,18 +2619,18 @@
 }
 
 .agent-section-toggle {
-    background: rgba(255, 255, 255, 0.02);
+    background: var(--surface-glass);
     color: var(--text-secondary);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-glass);
 }
 
 .agent-primary-button {
     background: var(--accent-primary);
-    color: white;
+    color: var(--button-primary-fg);
 }
 
 .agent-primary-button:hover {
-    background: #d4b06a;
+    background: var(--button-primary-hover-bg);
 }
 
 .agent-card {
@@ -2639,39 +2639,39 @@
     gap: 6px;
     padding: 10px 12px;
     border-radius: var(--radius-md);
-    background: rgba(0, 0, 0, 0.14);
-    border: 1px solid rgba(255, 255, 255, 0.04);
+    background: var(--surface-elevated);
+    border: 1px solid var(--border-glass);
     transition: border-color var(--duration-fast) var(--ease-in-out);
 }
 
 .agent-card:hover {
-    border-color: rgba(255, 255, 255, 0.07);
+    border-color: var(--surface-active);
 }
 
 /* Approval card — escalating urgency */
 .agent-card-approval {
     position: relative;
     overflow: hidden;
-    border-color: rgba(255, 193, 102, 0.2);
-    background: rgba(255, 193, 102, 0.04);
+    border-color: color-mix(in srgb, var(--accent-warm) 20%, transparent);
+    background: color-mix(in srgb, var(--accent-warm) 4%, transparent);
     animation: approval-escalate 12s ease-in-out forwards;
 }
 
 @keyframes approval-escalate {
     0% {
-        border-color: rgba(255, 193, 102, 0.2);
-        background: rgba(255, 193, 102, 0.04);
+        border-color: color-mix(in srgb, var(--accent-warm) 20%, transparent);
+        background: color-mix(in srgb, var(--accent-warm) 4%, transparent);
         box-shadow: none;
     }
     40% {
-        border-color: rgba(255, 193, 102, 0.35);
-        background: rgba(255, 193, 102, 0.06);
+        border-color: color-mix(in srgb, var(--accent-warm) 35%, transparent);
+        background: color-mix(in srgb, var(--accent-warm) 6%, transparent);
         box-shadow: none;
     }
     100% {
-        border-color: rgba(255, 161, 103, 0.45);
-        background: rgba(255, 161, 103, 0.08);
-        box-shadow: 0 0 16px rgba(255, 161, 103, 0.08);
+        border-color: color-mix(in srgb, var(--accent-warm) 45%, transparent);
+        background: color-mix(in srgb, var(--accent-warm) 8%, transparent);
+        box-shadow: 0 0 16px color-mix(in srgb, var(--accent-warm) 8%, transparent);
     }
 }
 
@@ -2697,11 +2697,11 @@
 }
 
 .agent-card-copy.success {
-    color: #84d19a;
+    color: var(--status-success);
 }
 
 .agent-card-copy.error {
-    color: #ff8e8e;
+    color: var(--status-error);
 }
 
 
@@ -2740,10 +2740,10 @@
 }
 
 .message-assistant {
-    background: rgba(196, 160, 90, 0.08);
+    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
     color: var(--text-primary);
     align-self: flex-start;
-    border: 1px solid rgba(196, 160, 90, 0.1);
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 10%, transparent);
     border-bottom-left-radius: var(--radius-sm);
 }
 
@@ -2806,29 +2806,29 @@
 }
 
 .markdown-content a {
-    color: #e0c878;
+    color: var(--accent-primary);
     text-decoration: none;
     transition: color var(--duration-fast) var(--ease-in-out);
 }
 
 .markdown-content a:hover {
-    color: #ebd898;
+    color: var(--accent-warm);
     text-decoration: underline;
 }
 
 .markdown-content code {
     font-family: var(--font-mono);
     font-size: 12px;
-    background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.04);
+    background: var(--code-bg);
+    border: 1px solid var(--border-glass);
     border-radius: 5px;
     padding: 1px 5px;
 }
 
 .markdown-content pre {
     overflow-x: auto;
-    background: rgba(0, 0, 0, 0.22);
-    border: 1px solid rgba(255, 255, 255, 0.04);
+    background: var(--code-block-bg);
+    border: 1px solid var(--border-glass);
     border-radius: var(--radius-md);
     padding: 12px 14px;
 }
@@ -2844,14 +2844,14 @@
 }
 
 .markdown-content blockquote {
-    border-left: 2px solid rgba(196, 160, 90, 0.4);
+    border-left: 2px solid color-mix(in srgb, var(--accent-primary) 40%, transparent);
     padding-left: 12px;
     color: var(--text-secondary);
 }
 
 .markdown-content hr {
     border: none;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-top: 1px solid var(--border-glass);
     margin: 14px 0;
 }
 
@@ -2864,7 +2864,7 @@
 }
 
 .markdown-content thead {
-    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
+    border-bottom: 2px solid var(--border-visible);
 }
 
 .markdown-content th {
@@ -2876,12 +2876,12 @@
 
 .markdown-content td {
     padding: 5px 10px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--border-glass);
     color: var(--text-secondary);
 }
 
 .markdown-content tbody tr:hover {
-    background: rgba(255, 255, 255, 0.03);
+    background: var(--surface-glass);
 }
 
 
@@ -2895,8 +2895,8 @@
     gap: 6px;
     padding: 3px 10px 3px 7px;
     margin: 3px 0;
-    background: rgba(255, 255, 255, 0.04);
-    border-left: 2px solid rgba(196, 160, 90, 0.4);
+    background: var(--surface-hover);
+    border-left: 2px solid color-mix(in srgb, var(--accent-primary) 40%, transparent);
     border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
     font-size: 11.5px;
     line-height: 1.5;
@@ -2906,7 +2906,7 @@
 }
 
 .tool-chip:hover {
-    background: rgba(255, 255, 255, 0.07);
+    background: var(--surface-active);
 }
 
 .tool-chip-icon {
@@ -2914,7 +2914,7 @@
     width: 16px;
     text-align: center;
     font-size: 12px;
-    color: rgba(196, 160, 90, 0.7);
+    color: color-mix(in srgb, var(--accent-primary) 70%, transparent);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
@@ -2950,8 +2950,8 @@
     gap: 10px;
     margin: 8px 14px;
     padding: 10px 12px;
-    background: rgba(224, 180, 80, 0.08);
-    border: 1px solid rgba(224, 180, 80, 0.2);
+    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
     border-radius: var(--radius-md);
     animation: approval-appear 0.25s var(--ease-out-back);
 }
@@ -2963,7 +2963,7 @@
 
 .chat-approval-icon {
     flex-shrink: 0;
-    color: #e0b450;
+    color: var(--accent-primary);
     margin-top: 1px;
 }
 
@@ -3009,21 +3009,21 @@
 }
 
 .chat-approval-approve {
-    background: rgba(224, 180, 80, 0.18);
-    color: #e0c070;
+    background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
+    color: var(--accent-primary);
 }
 
 .chat-approval-approve:hover {
-    background: rgba(224, 180, 80, 0.28);
+    background: color-mix(in srgb, var(--accent-primary) 28%, transparent);
 }
 
 .chat-approval-reject {
-    background: rgba(255, 255, 255, 0.06);
+    background: var(--surface-hover);
     color: var(--text-muted);
 }
 
 .chat-approval-reject:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--surface-active);
     color: var(--text-secondary);
 }
 
@@ -3043,8 +3043,8 @@
     width: 30px;
     height: 30px;
     border-radius: 999px;
-    background: rgba(196, 160, 90, 0.12);
-    border: 1px solid rgba(196, 160, 90, 0.2);
+    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -3099,7 +3099,7 @@
     height: 7px;
     border-radius: 999px;
     background: var(--accent-primary);
-    box-shadow: 0 0 0 rgba(196, 160, 90, 0.45);
+    box-shadow: 0 0 0 color-mix(in srgb, var(--accent-primary) 45%, transparent);
     animation: streaming-pulse 1.4s ease-out infinite;
 }
 
@@ -3119,15 +3119,15 @@
 @keyframes streaming-pulse {
     0% {
         transform: scale(0.85);
-        box-shadow: 0 0 0 0 rgba(196, 160, 90, 0.42);
+        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary) 42%, transparent);
     }
     70% {
         transform: scale(1.05);
-        box-shadow: 0 0 0 8px rgba(196, 160, 90, 0);
+        box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-primary) 0%, transparent);
     }
     100% {
         transform: scale(0.85);
-        box-shadow: 0 0 0 0 rgba(196, 160, 90, 0);
+        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-primary) 0%, transparent);
     }
 }
 
@@ -3247,9 +3247,9 @@
     padding: 3px 10px;
     font-size: 11px;
     font-weight: 500;
-    color: rgba(196, 160, 90, 0.85);
-    background: rgba(196, 160, 90, 0.08);
-    border: 1px solid rgba(196, 160, 90, 0.2);
+    color: color-mix(in srgb, var(--accent-primary) 85%, transparent);
+    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
     border-radius: var(--radius-md);
     cursor: pointer;
     transition: background var(--duration-fast) var(--ease-in-out),
@@ -3258,8 +3258,8 @@
 }
 
 .highlight-nav-label:hover {
-    background: rgba(196, 160, 90, 0.14);
-    border-color: rgba(196, 160, 90, 0.35);
+    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
+    border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent);
 }
 
 .hl-context-menu {
@@ -3270,7 +3270,7 @@
     background: var(--bg-secondary);
     border: 1px solid var(--border-visible);
     border-radius: var(--radius-md);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 4px 16px var(--shadow-color-strong);
 }
 
 .hl-context-item {
@@ -3287,13 +3287,13 @@
 }
 
 .hl-context-item:hover {
-    background: rgba(255, 255, 255, 0.06);
+    background: var(--surface-hover);
     color: var(--text-primary);
 }
 
 .hl-context-danger:hover {
-    color: #e06060;
-    background: rgba(224, 96, 96, 0.08);
+    color: var(--status-error);
+    background: color-mix(in srgb, var(--status-error) 8%, transparent);
 }
 
 .sidebar-input-area {
@@ -3347,7 +3347,7 @@
     padding: 6px 8px;
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-sm);
-    background: rgba(255, 255, 255, 0.02);
+    background: var(--surface-glass);
 }
 
 .chat-queue-text {
@@ -3374,7 +3374,7 @@
 .sidebar-input:focus {
     border-color: var(--accent-primary);
     outline: none;
-    box-shadow: 0 0 0 2px rgba(196, 160, 90, 0.1);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 10%, transparent);
 }
 
 .sidebar-input::placeholder {
@@ -3396,11 +3396,11 @@
 
 .sidebar-send {
     background: var(--accent-primary);
-    color: white;
+    color: var(--button-primary-fg);
 }
 
 .sidebar-send:hover:not(:disabled) {
-    background: #d4b06a;
+    background: var(--button-primary-hover-bg);
 }
 
 .sidebar-send:active:not(:disabled) {
@@ -3459,8 +3459,8 @@
     width: 8px;
     height: 8px;
     border-radius: 999px;
-    background: rgba(255, 255, 255, 0.15);
-    border: 1.5px solid rgba(255, 255, 255, 0.2);
+    background: color-mix(in srgb, var(--text-primary) 15%, transparent);
+    border: 1.5px solid color-mix(in srgb, var(--text-primary) 20%, transparent);
     flex-shrink: 0;
     transition: all var(--duration-normal) var(--ease-out-expo);
 }
@@ -3469,8 +3469,8 @@
     width: 10px;
     height: 10px;
     background: var(--accent-primary);
-    border-color: rgba(196, 160, 90, 0.5);
-    box-shadow: 0 0 8px rgba(196, 160, 90, 0.3);
+    border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--accent-primary) 30%, transparent);
 }
 
 .checkpoint-timeline-line {
@@ -3479,8 +3479,8 @@
     min-height: 16px;
     background: linear-gradient(
         180deg,
-        rgba(255, 255, 255, 0.12),
-        rgba(255, 255, 255, 0.04)
+        color-mix(in srgb, var(--text-primary) 12%, transparent),
+        color-mix(in srgb, var(--text-primary) 4%, transparent)
     );
     margin: 4px 0;
 }
@@ -3601,9 +3601,9 @@
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: var(--color-accent, #c4a05a);
-    background: rgba(196, 160, 90, 0.12);
-    border: 1px solid rgba(196, 160, 90, 0.25);
+    color: var(--accent-primary);
+    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
     border-radius: 4px;
     padding: 1px 5px;
     vertical-align: middle;
@@ -3626,16 +3626,16 @@
     font-size: 10.5px;
     font-weight: 600;
     color: var(--accent-primary);
-    background: rgba(196, 160, 90, 0.08);
-    border: 1px solid rgba(196, 160, 90, 0.2);
+    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
     transition:
         background var(--duration-fast) var(--ease-in-out),
         border-color var(--duration-fast) var(--ease-in-out);
 }
 
 .kit-install-btn:hover {
-    background: rgba(196, 160, 90, 0.14);
-    border-color: rgba(196, 160, 90, 0.3);
+    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
+    border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
 }
 
 .kit-install-error {
@@ -3645,17 +3645,17 @@
     gap: 8px;
     padding: 7px 10px;
     border-radius: var(--radius-sm);
-    background: rgba(220, 80, 80, 0.08);
-    border: 1px solid rgba(220, 80, 80, 0.2);
+    background: color-mix(in srgb, var(--status-error) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--status-error) 20%, transparent);
     font-size: 11px;
-    color: #e07070;
+    color: var(--status-error);
     line-height: 1.4;
 }
 
 .kit-install-error-dismiss {
     flex-shrink: 0;
     font-size: 14px;
-    color: #e07070;
+    color: var(--status-error);
     opacity: 0.7;
     line-height: 1;
     padding: 0 2px;
@@ -3680,8 +3680,8 @@
     gap: 11px;
     padding: 11px 12px;
     border-radius: var(--radius-md);
-    background: rgba(0, 0, 0, 0.14);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--surface-elevated);
+    border: 1px solid var(--border-glass);
     text-align: left;
     width: 100%;
     cursor: pointer;
@@ -3691,12 +3691,12 @@
 }
 
 .kit-card:hover {
-    background: rgba(255, 255, 255, 0.04);
-    border-color: rgba(196, 160, 90, 0.18);
+    background: var(--surface-hover);
+    border-color: color-mix(in srgb, var(--accent-primary) 18%, transparent);
 }
 
 .kit-card:active {
-    background: rgba(196, 160, 90, 0.06);
+    background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
 }
 
 .kit-card-icon {
@@ -3707,8 +3707,8 @@
     width: 32px;
     height: 32px;
     border-radius: var(--radius-sm);
-    background: rgba(196, 160, 90, 0.08);
-    border: 1px solid rgba(196, 160, 90, 0.14);
+    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 14%, transparent);
     color: var(--accent-primary);
 }
 
@@ -3773,9 +3773,9 @@
 }
 
 .kit-remove-btn:hover {
-    background: rgba(220, 80, 80, 0.1);
-    border-color: rgba(220, 80, 80, 0.2);
-    color: #e07070;
+    background: color-mix(in srgb, var(--status-error) 10%, transparent);
+    border-color: color-mix(in srgb, var(--status-error) 20%, transparent);
+    color: var(--status-error);
 }
 
 /* ── Form view ── */
@@ -3796,8 +3796,8 @@
     font-size: 11px;
     font-weight: 500;
     color: var(--text-muted);
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: var(--surface-hover);
+    border: 1px solid var(--border-glass);
     flex-shrink: 0;
     transition:
         background var(--duration-fast) var(--ease-in-out),
@@ -3805,7 +3805,7 @@
 }
 
 .kit-back-btn:hover {
-    background: rgba(255, 255, 255, 0.07);
+    background: var(--surface-active);
     color: var(--text-secondary);
 }
 
@@ -3859,8 +3859,8 @@
 .kit-form-input,
 .kit-form-textarea {
     width: 100%;
-    background: rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    background: var(--surface-elevated);
+    border: 1px solid var(--border-glass);
     border-radius: var(--radius-sm);
     color: var(--text-primary);
     font-size: 12px;
@@ -3874,8 +3874,8 @@
 
 .kit-form-input:focus,
 .kit-form-textarea:focus {
-    border-color: rgba(196, 160, 90, 0.4);
-    box-shadow: 0 0 0 2px rgba(196, 160, 90, 0.08);
+    border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 8%, transparent);
     outline: none;
 }
 
@@ -3906,8 +3906,8 @@
 .kit-run-spinner {
     width: 10px;
     height: 10px;
-    border: 1.5px solid rgba(0, 0, 0, 0.2);
-    border-top-color: rgba(0, 0, 0, 0.7);
+    border: 1.5px solid color-mix(in srgb, var(--bg-primary) 20%, transparent);
+    border-top-color: color-mix(in srgb, var(--bg-primary) 70%, transparent);
     border-radius: 50%;
     animation: kit-spin 0.6s linear infinite;
     display: inline-block;
@@ -3932,8 +3932,8 @@
     width: 48px;
     height: 48px;
     border-radius: 50%;
-    background: rgba(196, 160, 90, 0.07);
-    border: 1px solid rgba(196, 160, 90, 0.15);
+    background: color-mix(in srgb, var(--accent-primary) 7%, transparent);
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 15%, transparent);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -3967,9 +3967,9 @@
     padding: 16px 14px;
     border-radius: var(--radius-lg);
     background:
-        radial-gradient(circle at top right, rgba(196, 160, 90, 0.12), transparent 44%),
-        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
-    border: 1px solid rgba(196, 160, 90, 0.18);
+        radial-gradient(circle at top right, color-mix(in srgb, var(--accent-primary) 12%, transparent), transparent 44%),
+        linear-gradient(180deg, var(--surface-hover), var(--surface-glass));
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
 }
 
 .premium-chat-banner-body {
@@ -3985,8 +3985,8 @@
     padding: 12px 12px 11px;
     border-radius: var(--radius-md);
     background:
-        linear-gradient(180deg, rgba(196, 160, 90, 0.08), rgba(196, 160, 90, 0.03));
-    border: 1px solid rgba(196, 160, 90, 0.18);
+        linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 8%, transparent), color-mix(in srgb, var(--accent-primary) 3%, transparent));
+    border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
 }
 
 .premium-inline-offer.compact {
@@ -4061,16 +4061,16 @@
     gap: 8px;
     padding: 9px 10px;
     border-radius: var(--radius-md);
-    background: rgba(255, 255, 255, 0.025);
+    background: var(--surface-glass);
     border: 1px solid var(--border-subtle);
 }
 
 .kit-activity-running {
-    border-color: rgba(196, 160, 90, 0.26);
+    border-color: color-mix(in srgb, var(--accent-primary) 26%, transparent);
 }
 
 .kit-activity-failed {
-    border-color: rgba(202, 92, 92, 0.28);
+    border-color: color-mix(in srgb, var(--status-error) 28%, transparent);
 }
 
 .kit-activity-header {
@@ -4104,20 +4104,20 @@
     font-size: 10px;
     font-weight: 600;
     color: var(--text-secondary);
-    background: rgba(255, 255, 255, 0.03);
+    background: var(--surface-glass);
     border: 1px solid var(--border-subtle);
 }
 
 .kit-activity-running .kit-activity-badge {
     color: var(--accent-primary);
-    border-color: rgba(196, 160, 90, 0.24);
-    background: rgba(196, 160, 90, 0.08);
+    border-color: color-mix(in srgb, var(--accent-primary) 24%, transparent);
+    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
 }
 
 .kit-activity-failed .kit-activity-badge {
-    color: #d98b8b;
-    border-color: rgba(202, 92, 92, 0.28);
-    background: rgba(202, 92, 92, 0.09);
+    color: var(--status-error);
+    border-color: color-mix(in srgb, var(--status-error) 28%, transparent);
+    background: color-mix(in srgb, var(--status-error) 9%, transparent);
 }
 
 .kit-activity-output {
@@ -4202,7 +4202,7 @@
 
     &:hover {
         color: var(--text-primary);
-        background: var(--bg-hover);
+        background: var(--surface-hover);
     }
 }
 
@@ -4213,10 +4213,10 @@
     top: calc(100% + 2px);
     left: 0;
     z-index: 1000;
-    background: var(--bg-surface, #1e1e24);
+    background: var(--bg-secondary);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-md, 6px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
+    box-shadow: 0 4px 16px var(--shadow-color-strong);
     padding: 4px;
     min-width: 152px;
     display: flex;
@@ -4237,12 +4237,12 @@
     transition: background var(--duration-fast) ease;
 
     &:hover {
-        background: var(--bg-hover);
+        background: var(--surface-hover);
     }
 }
 
 .sched-ctx-danger {
-    color: var(--color-error, #e05252);
+    color: var(--status-error);
 }
 
 .sched-ctx-divider {
@@ -4257,17 +4257,17 @@
     position: fixed;
     inset: 0;
     z-index: 999;
-    background: rgba(0, 0, 0, 0.4);
+    background: var(--overlay-bg);
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .sched-edit-panel {
-    background: var(--bg-surface, #1e1e24);
+    background: var(--bg-secondary);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-md, 8px);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 8px 32px var(--shadow-color-strong);
     padding: 16px;
     width: 280px;
     display: flex;
@@ -4391,7 +4391,7 @@
 
 .kit-schedule-error {
     font-size: 11px;
-    color: var(--status-error, #e06c75);
+    color: var(--status-error);
     margin: 0;
 }
 
@@ -4443,8 +4443,8 @@
 }
 
 .history-clear-btn:hover {
-    color: #ff8e8e;
-    border-color: rgba(255, 108, 91, 0.3);
+    color: var(--status-error);
+    border-color: color-mix(in srgb, var(--status-error) 30%, transparent);
 }
 
 .history-list {
@@ -4568,12 +4568,12 @@
 }
 
 .devtools-tab-badge.error {
-  background: rgba(192, 112, 112, 0.2);
+  background: color-mix(in srgb, var(--status-error) 20%, transparent);
   color: var(--error);
 }
 
 .devtools-tab-badge.count {
-  background: rgba(196, 160, 90, 0.15);
+  background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
   color: var(--accent-primary);
 }
 
@@ -4635,12 +4635,12 @@
 }
 
 .console-entry.level-error {
-  background: rgba(192, 112, 112, 0.06);
+  background: color-mix(in srgb, var(--status-error) 6%, transparent);
   border-left: 2px solid var(--error);
 }
 
 .console-entry.level-warning {
-  background: rgba(196, 160, 90, 0.06);
+  background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
   border-left: 2px solid var(--accent-primary);
 }
 
@@ -4726,7 +4726,7 @@
 }
 
 .network-entry.error {
-  background: rgba(192, 112, 112, 0.06);
+  background: color-mix(in srgb, var(--status-error) 6%, transparent);
 }
 
 .network-method {
@@ -4838,7 +4838,7 @@
 
 .devtools-close-btn.active {
   color: var(--accent-primary);
-  background: rgba(196, 160, 90, 0.12);
+  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
 }
 
 .devtools-export-dropdown {
@@ -4849,7 +4849,7 @@
   background: var(--bg-elevated);
   border: 1px solid var(--border-visible);
   border-radius: var(--radius-md);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 8px 24px var(--shadow-color-strong);
   padding: 10px;
   z-index: 100;
   display: flex;
@@ -4919,8 +4919,8 @@
 
 .export-date-btn.active {
   color: var(--accent-primary);
-  background: rgba(196, 160, 90, 0.12);
-  border-color: rgba(196, 160, 90, 0.3);
+  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
+  border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
 }
 
 .export-date-inputs {
@@ -4953,11 +4953,10 @@
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-sm);
   outline: none;
-  color-scheme: dark;
 }
 
 .export-date-input:focus {
-  border-color: rgba(196, 160, 90, 0.4);
+  border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
 }
 
 .export-submit {
@@ -4966,7 +4965,7 @@
   font-size: 12px;
   font-weight: 600;
   font-family: var(--font-ui);
-  color: var(--bg-primary);
+  color: var(--button-primary-fg);
   background: var(--accent-primary);
   border: none;
   border-radius: var(--radius-sm);
@@ -5009,6 +5008,8 @@
   background: var(--border-visible);
 }
 :root {
+  color-scheme: dark;
+
   /* Base palette — warm dark, not pure black */
   --bg-primary: #1a1a1e;
   --bg-secondary: #222226;
@@ -5056,9 +5057,51 @@
   --font-ui: 'Inter', -apple-system, system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
   --font-reader: Charter, Georgia, serif;
+
+  /* ═══════════════════════════════════════
+     Semantic surfaces, shadows & overlays
+     ═══════════════════════════════════════ */
+  --overlay-bg: rgba(0, 0, 0, 0.55);
+  --shadow-color: rgba(0, 0, 0, 0.2);
+  --shadow-color-strong: rgba(0, 0, 0, 0.3);
+  --inset-highlight: rgba(255, 255, 255, 0.04);
+
+  --glass-gradient-start: rgba(50, 50, 54, 0.97);
+  --glass-gradient-end: rgba(34, 34, 38, 0.97);
+
+  --surface-hover: rgba(255, 255, 255, 0.04);
+  --surface-active: rgba(255, 255, 255, 0.07);
+  --surface-elevated: rgba(0, 0, 0, 0.14);
+  --surface-glass: rgba(255, 255, 255, 0.02);
+
+  --status-success: #84d19a;
+  --status-success-bg: rgba(132, 209, 154, 0.12);
+  --status-error: #ff8e8e;
+  --status-error-bg: rgba(255, 142, 142, 0.12);
+  --status-warning: #ffb074;
+  --status-warning-bg: rgba(255, 161, 103, 0.12);
+  --status-info: #22c55e;
+  --status-info-bg: rgba(34, 197, 94, 0.12);
+
+  --kbd-bg: rgba(255, 255, 255, 0.06);
+  --kbd-border: rgba(255, 255, 255, 0.08);
+  --kbd-shadow: rgba(0, 0, 0, 0.15);
+  --code-bg: rgba(255, 255, 255, 0.06);
+  --code-block-bg: rgba(0, 0, 0, 0.22);
+
+  --scrollbar-thumb: rgba(255, 255, 255, 0.08);
+  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.14);
+
+  --border-glass: rgba(255, 255, 255, 0.04);
+  --border-focus: rgba(196, 160, 90, 0.45);
+
+  --button-primary-fg: #1a1a1e;
+  --button-primary-hover-bg: #d4b06a;
 }
 
 [data-theme="light"] {
+  color-scheme: light;
+
   --bg-primary: #f8f7f5;
   --bg-secondary: #efeeec;
   --bg-tertiary: #e5e4e2;
@@ -5078,6 +5121,44 @@
   --loading-bar: #8a6d2f;
   --error: #b04040;
   --success: #408040;
+
+  /* Semantic surfaces, shadows & overlays */
+  --overlay-bg: rgba(0, 0, 0, 0.25);
+  --shadow-color: rgba(0, 0, 0, 0.12);
+  --shadow-color-strong: rgba(0, 0, 0, 0.18);
+  --inset-highlight: rgba(255, 255, 255, 0.4);
+
+  --glass-gradient-start: rgba(219, 217, 215, 0.97);
+  --glass-gradient-end: rgba(239, 238, 236, 0.97);
+
+  --surface-hover: rgba(0, 0, 0, 0.04);
+  --surface-active: rgba(0, 0, 0, 0.07);
+  --surface-elevated: rgba(0, 0, 0, 0.06);
+  --surface-glass: rgba(0, 0, 0, 0.02);
+
+  --status-success: #5a9a5a;
+  --status-success-bg: rgba(90, 154, 90, 0.10);
+  --status-error: #d05050;
+  --status-error-bg: rgba(208, 80, 80, 0.10);
+  --status-warning: #c07040;
+  --status-warning-bg: rgba(192, 112, 64, 0.10);
+  --status-info: #3a9a3a;
+  --status-info-bg: rgba(58, 154, 58, 0.10);
+
+  --kbd-bg: rgba(0, 0, 0, 0.05);
+  --kbd-border: rgba(0, 0, 0, 0.08);
+  --kbd-shadow: rgba(0, 0, 0, 0.1);
+  --code-bg: rgba(0, 0, 0, 0.05);
+  --code-block-bg: rgba(0, 0, 0, 0.06);
+
+  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
+  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
+
+  --border-glass: rgba(0, 0, 0, 0.06);
+  --border-focus: rgba(138, 109, 47, 0.45);
+
+  --button-primary-fg: #f8f7f5;
+  --button-primary-hover-bg: #7c622a;
 }
 
 *,
@@ -5116,12 +5197,12 @@ body,
 }
 
 ::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--scrollbar-thumb);
     border-radius: 999px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.14);
+    background: var(--scrollbar-thumb-hover);
 }
 
 input,
@@ -5141,7 +5222,7 @@ textarea {
 input:focus,
 textarea:focus {
     border-color: var(--accent-primary);
-    box-shadow: 0 0 0 2px rgba(196, 160, 90, 0.12);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 12%, transparent);
 }
 
 button {
@@ -5243,12 +5324,12 @@ button:active:not(:disabled) {
     border-radius: var(--radius-lg);
     background: linear-gradient(
         180deg,
-        rgba(50, 50, 54, 0.97),
-        rgba(34, 34, 38, 0.97)
+        var(--glass-gradient-start),
+        var(--glass-gradient-end)
     );
     box-shadow:
-        0 4px 12px rgba(0, 0, 0, 0.2),
-        0 16px 40px rgba(0, 0, 0, 0.16);
+        0 4px 12px var(--shadow-color),
+        0 16px 40px var(--shadow-color);
     backdrop-filter: blur(16px);
     animation: toast-enter var(--duration-enter) var(--ease-out-expo) both;
 }
@@ -5382,7 +5463,7 @@ button:active:not(:disabled) {
     pointer-events: none;
     opacity: 0;
     z-index: 9999;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 4px 16px var(--shadow-color-strong);
     transition:
         opacity var(--duration-normal) var(--ease-in-out),
         transform var(--duration-normal) var(--ease-out-expo);