diff --git a/ui/suite/css/chat-agent-mode.css b/ui/suite/css/chat-agent-mode.css
index 808205a..7faba1b 100644
--- a/ui/suite/css/chat-agent-mode.css
+++ b/ui/suite/css/chat-agent-mode.css
@@ -25,18 +25,18 @@
     cursor: pointer;
     transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     background: transparent;
-    color: var(--text-secondary, #888);
+    color: var(--text-secondary, var(--text-muted));
     letter-spacing: 0.3px;
 }
 
 .chat-mode-btn.active {
-    background: #84d669;
-    color: #fff;
+    background: var(--accent);
+    color: var(--bg);
     box-shadow: 0 2px 8px rgba(132, 214, 105, 0.3);
 }
 
 .chat-mode-btn:not(.active):hover {
-    color: var(--text, #fff);
+    color: var(--text, var(--bg));
     background: var(--hover, rgba(255, 255, 255, 0.05));
 }
 
@@ -66,7 +66,7 @@
     border: 1px solid var(--border, #2a2a2a);
     border-radius: 24px;
     background: var(--surface, #1a1a24);
-    color: var(--text, #fff);
+    color: var(--text, var(--bg));
     font-family: 'Fira Code', monospace;
     font-size: 12px;
     font-weight: 500;
@@ -76,7 +76,7 @@
 }
 
 .quick-action-chip:hover {
-    border-color: #84d669;
+    border-color: var(--accent);
     background: rgba(132, 214, 105, 0.08);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(132, 214, 105, 0.15);
@@ -109,7 +109,7 @@
     grid-row: 1 / -1;
     grid-column: 1;
     background: #f8f8f8;
-    border-right: 1px solid #f0f1f2;
+    border-right: 1px solid var(--border);
     flex-direction: column;
     z-index: 50;
 }
@@ -127,23 +127,23 @@
     cursor: pointer;
     transition: all 0.15s ease;
     position: relative;
-    border-bottom: 1px solid #f0f1f2;
+    border-bottom: 1px solid var(--border);
     background: transparent;
     border-left: none;
     border-right: none;
     border-top: none;
-    color: #666;
+    color: var(--text-muted);
 }
 
 .agent-sidebar-item:hover {
-    background: #fff;
-    color: #3b3b3b;
+    background: var(--bg);
+    color: var(--text);
 }
 
 .agent-sidebar-item.active {
-    background: #fff;
-    border-left: 3px solid #84d669;
-    color: #3b3b3b;
+    background: var(--bg);
+    border-left: 3px solid var(--accent);
+    color: var(--text);
 }
 
 .agent-sidebar-badge {
@@ -154,8 +154,8 @@
     height: 16px;
     padding: 0 4px;
     border-radius: 8px;
-    background: #84d669;
-    color: #fff;
+    background: var(--accent);
+    color: var(--bg);
     font-size: 9px;
     font-weight: 700;
     display: flex;
@@ -172,7 +172,7 @@
 .agent-mode footer {
     grid-column: 2 / -1;
     padding: 8px 16px;
-    border-top: 1px solid #f0f1f2;
+    border-top: 1px solid var(--border);
 }
 
 /* ============================================
@@ -181,7 +181,7 @@
 
 .thought-process {
     margin: 12px 0;
-    border: 1px solid var(--border, #e0e0e0);
+    border: 1px solid var(--border, var(--border));
     border-radius: 8px;
     overflow: hidden;
     background: var(--surface, #f8f9fa);
@@ -196,8 +196,8 @@
     font-family: 'Fira Code', monospace;
     font-size: 12px;
     font-weight: 600;
-    color: var(--text, #3b3b3b);
-    background: var(--surface, #f0f1f2);
+    color: var(--text, var(--text));
+    background: var(--surface, var(--border));
     transition: background 0.15s;
     border: none;
     width: 100%;
@@ -222,8 +222,8 @@
     padding: 12px 14px;
     font-size: 13px;
     line-height: 1.6;
-    color: var(--text-secondary, #666);
-    border-top: 1px solid var(--border, #e0e0e0);
+    color: var(--text-secondary, var(--text-muted));
+    border-top: 1px solid var(--border, var(--border));
 }
 
 .thought-process.expanded .thought-process-body {
@@ -238,9 +238,9 @@
     display: none;
     grid-column: 3;
     grid-row: 1;
-    border-left: 1px solid #f0f1f2;
+    border-left: 1px solid var(--border);
     flex-direction: column;
-    background: #fff;
+    background: var(--bg);
 }
 
 .agent-mode .agent-browser-panel {
@@ -253,27 +253,27 @@
     gap: 8px;
     padding: 8px 12px;
     background: #f8f8f8;
-    border-bottom: 1px solid #f0f1f2;
+    border-bottom: 1px solid var(--border);
     font-family: 'Fira Code', monospace;
     font-size: 12px;
     font-weight: 600;
-    color: #3b3b3b;
+    color: var(--text);
 }
 
 .browser-url-bar {
     flex: 1;
     padding: 4px 10px;
-    background: #fff;
-    border: 1px solid #e0e0e0;
+    background: var(--bg);
+    border: 1px solid var(--border);
     border-radius: 4px;
     font-family: 'Fira Code', monospace;
     font-size: 11px;
-    color: #666;
+    color: var(--text-muted);
 }
 
 .browser-panel-content {
     flex: 1;
-    background: #fff;
+    background: var(--bg);
 }
 
 .browser-panel-content iframe {
@@ -300,7 +300,7 @@
     display: none;
     grid-column: 2;
     grid-row: 2;
-    border-top: 1px solid #f0f1f2;
+    border-top: 1px solid var(--border);
     flex-direction: column;
     max-height: 200px;
     min-height: 120px;
@@ -320,7 +320,7 @@
     font-family: 'Fira Code', monospace;
     font-size: 11px;
     font-weight: 600;
-    color: #84d669;
+    color: var(--accent);
 }
 
 .terminal-panel-content {
@@ -355,8 +355,8 @@
     display: none;
     grid-column: 3;
     grid-row: 2;
-    border-top: 1px solid #f0f1f2;
-    border-left: 1px solid #f0f1f2;
+    border-top: 1px solid var(--border);
+    border-left: 1px solid var(--border);
     padding: 12px 16px;
     background: #f8f8f8;
     flex-direction: column;
@@ -374,14 +374,14 @@
     font-family: 'Fira Code', monospace;
     font-size: 13px;
     font-weight: 600;
-    color: #3b3b3b;
+    color: var(--text);
 }
 
 .agent-info-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background: #84d669;
+    background: var(--accent);
 }
 
 .agent-level-badge {
@@ -396,24 +396,24 @@
 }
 
 .badge-evolved {
-    background: #84d669;
-    color: #fff;
+    background: var(--accent);
+    color: var(--bg);
 }
 
 .badge-bred {
     background: #f59e0b;
-    color: #fff;
+    color: var(--bg);
 }
 
 .badge-wild {
     background: #ef4444;
-    color: #fff;
+    color: var(--bg);
 }
 
 .agent-info-model {
     font-family: 'Fira Code', monospace;
     font-size: 11px;
-    color: #888;
+    color: var(--text-muted);
 }
 
 .agent-info-toggles {
@@ -428,7 +428,7 @@
     gap: 4px;
     font-family: 'Fira Code', monospace;
     font-size: 11px;
-    color: #666;
+    color: var(--text-muted);
 }
 
 .agent-toggle-switch {
@@ -444,7 +444,7 @@
 }
 
 .agent-toggle-switch.on {
-    background: #84d669;
+    background: var(--accent);
 }
 
 .agent-toggle-switch::after {
@@ -455,7 +455,7 @@
     width: 12px;
     height: 12px;
     border-radius: 50%;
-    background: #fff;
+    background: var(--bg);
     transition: transform 0.2s;
 }
 
@@ -475,7 +475,7 @@
     justify-content: space-between;
     padding: 8px 16px;
     background: #f8f8f8;
-    border-top: 1px solid #f0f1f2;
+    border-top: 1px solid var(--border);
 }
 
 .agent-mode .agent-step-bar {
@@ -488,16 +488,16 @@
     gap: 12px;
     font-family: 'Fira Code', monospace;
     font-size: 13px;
-    color: #3b3b3b;
+    color: var(--text);
 }
 
 .step-nav-btn {
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    border: 1px solid #e0e0e0;
-    background: #fff;
-    color: #666;
+    border: 1px solid var(--border);
+    background: var(--bg);
+    color: var(--text-muted);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -508,8 +508,8 @@
 }
 
 .step-nav-btn:hover {
-    border-color: #84d669;
-    color: #84d669;
+    border-color: var(--accent);
+    color: var(--accent);
 }
 
 .step-action-btns {
@@ -522,8 +522,8 @@
     height: 36px;
     border-radius: 50%;
     border: none;
-    background: #84d669;
-    color: #fff;
+    background: var(--accent);
+    color: var(--bg);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -544,7 +544,7 @@
 
 .agent-todo-list {
     margin: 12px 0;
-    border: 1px solid var(--border, #e0e0e0);
+    border: 1px solid var(--border, var(--border));
     border-radius: 8px;
     overflow: hidden;
 }
@@ -554,16 +554,16 @@
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
-    background: var(--surface, #f0f1f2);
+    background: var(--surface, var(--border));
     font-family: 'Fira Code', monospace;
     font-size: 12px;
     font-weight: 600;
-    color: var(--text, #3b3b3b);
+    color: var(--text, var(--text));
 }
 
 .agent-todo-count {
-    background: #84d669;
-    color: #fff;
+    background: var(--accent);
+    color: var(--bg);
     padding: 1px 6px;
     border-radius: 10px;
     font-size: 10px;
@@ -574,9 +574,9 @@
     align-items: center;
     gap: 10px;
     padding: 8px 14px;
-    border-top: 1px solid var(--border, #e0e0e0);
+    border-top: 1px solid var(--border, var(--border));
     font-size: 13px;
-    color: var(--text, #3b3b3b);
+    color: var(--text, var(--text));
     transition: opacity 0.2s;
 }
 
@@ -597,8 +597,8 @@
 }
 
 .agent-todo-item.done .agent-todo-check {
-    background: #84d669;
-    border-color: #84d669;
-    color: #fff;
+    background: var(--accent);
+    border-color: var(--accent);
+    color: var(--bg);
     font-size: 10px;
 }
diff --git a/ui/suite/js/window-manager.js b/ui/suite/js/window-manager.js
index 99b5dff..8f6c39e 100644
--- a/ui/suite/js/window-manager.js
+++ b/ui/suite/js/window-manager.js
@@ -39,14 +39,14 @@ if (typeof window.WindowManager === 'undefined') {
             const top = 100 + offset;
             const left = 150 + offset;
 
-            windowEl.className = 'absolute w-[700px] h-[500px]  rounded-lg shadow-2xl flex flex-col border border-gray-200 overflow-hidden window-element';
+            windowEl.className = 'absolute w-[700px] h-[500px]  rounded-lg shadow-2xl flex flex-col border  overflow-hidden window-element';
             windowEl.style.top = `${top}px`;
             windowEl.style.left = `${left}px`;
             windowEl.style.zIndex = this.zIndexCounter++;
 
             windowEl.innerHTML = `
                 <!-- Header (Draggable) -->
-                <div class="window-header h-10 bg-white/95 backdrop-blur flex items-center justify-between px-4 border-b border-gray-200 select-none cursor-move">
+                <div class="window-header h-10  backdrop-blur flex items-center justify-between px-4 border-b  select-none cursor-move">
                     <div class="font-mono text-xs font-bold text-brand-600 tracking-wide">${title}</div>
                     <div class="flex space-x-3 text-gray-400">
                         <button class="btn-minimize hover:text-gray-600" onclick="window.WindowManager.toggleMinimize('${id}')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line></svg></button>
@@ -70,7 +70,7 @@ if (typeof window.WindowManager === 'undefined') {
             if (this.taskbarApps) {
                 const taskbarIcon = document.createElement('div');
                 taskbarIcon.id = `taskbar-item-${id}`;
-                taskbarIcon.className = 'h-10 w-12 flex items-center justify-center cursor-pointer bg-brand-50 rounded border-b-2 border-brand-500 transition-all taskbar-icon';
+                taskbarIcon.className = 'h-10 w-12 flex items-center justify-center cursor-pointer  rounded border-b-2  transition-all taskbar-icon';
                 taskbarIcon.onclick = () => this.toggleMinimize(id);
                 
                 let iconHtml = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>';
@@ -113,13 +113,13 @@ if (typeof window.WindowManager === 'undefined') {
             if (this.taskbarApps) {
                 const icons = this.taskbarApps.querySelectorAll('.taskbar-icon');
                 icons.forEach(icon => {
-                    icon.classList.remove('border-brand-500');
+                    icon.classList.remove('');
                     icon.classList.add('border-transparent');
                 });
                 const activeIcon = document.getElementById(`taskbar-item-${id}`);
                 if (activeIcon) {
                     activeIcon.classList.remove('border-transparent');
-                    activeIcon.classList.add('border-brand-500');
+                    activeIcon.classList.add('');
                 }
             }
         }
diff --git a/ui/suite/partials/vibe.html b/ui/suite/partials/vibe.html
index 8061d1f..8ee6d7e 100644
--- a/ui/suite/partials/vibe.html
+++ b/ui/suite/partials/vibe.html
@@ -19,10 +19,10 @@
             <div class="as-logo-section"
                 style="padding: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;">
                 <h2
-                    style="margin:0; font-size: 15px; color: var(--text, #3b3b3b); font-weight: 800; display: flex; align-items: center; gap: 8px;">
-                    <span style="font-size: 18px; color: var(--accent, #84d669);">🌱</span> mantis farm
+                    style="margin:0; font-size: 15px; color: var(--text); font-weight: 800; display: flex; align-items: center; gap: 8px;">
+                    <span style="font-size: 18px; color: var(--accent);">🌱</span> mantis farm
                 </h2>
-                <div style="display:flex; gap: 12px; color: var(--text-muted, #888); font-size: 14px;">
+                <div style="display:flex; gap: 12px; color: var(--text-muted); font-size: 14px;">
                     <span style="cursor:pointer;" title="Home">⌂</span>
                     <span style="cursor:pointer;" title="Overview">◱</span>
                 </div>
@@ -36,7 +36,7 @@
 
                 <div class="as-agent-list" id="asAgentList">
                     <!-- Mantis #1 EVOLVED -->
-                    <div class="as-agent-card" data-agent-id="1" style="border-left: 3px solid var(--accent, #84d669);">
+                    <div class="as-agent-card" data-agent-id="1" style="border-left: 3px solid var(--accent);">
                         <div class="as-agent-header">
                             <span class="as-status-dot green"></span>
                             <span class="as-agent-name">Mantis #1</span>
@@ -100,7 +100,7 @@
                 <div class="as-workspace-list" id="asWorkspaceList">
                     <div class="as-workspace-item">
                         <button class="as-workspace-toggle" type="button"
-                            style="background: var(--bg, #fff); border-left: 3px solid var(--accent, #84d669);">
+                            style="background: var(--bg); border-left: 3px solid var(--accent);">
                             <span class="as-workspace-arrow">▼</span>
                             <span>E-Commerce App Development</span>
                         </button>
@@ -139,14 +139,14 @@
             style="background: var(--bg, #fdfdfd); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; position:relative;">
 
             <div
-                style="padding: 16px 24px; font-size: 11px; color: var(--text-muted, #888); font-weight: 600; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.8); backdrop-filter: blur(4px);">
-                // DASHBOARD <span style="color: var(--text-secondary, #ccc); margin:0 6px;">&gt;</span> // E-COMMERCE APP DEVELOPMENT
+                style="padding: 16px 24px; font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.8); backdrop-filter: blur(4px);">
+                // DASHBOARD <span style="color: var(--text-secondary); margin:0 6px;">&gt;</span> // E-COMMERCE APP DEVELOPMENT
                 <div style="float: right;">
                     <button
-                        style="border: 1px solid var(--border, #e0e0e0); background: var(--bg, #fff); border-radius: 4px; padding: 2px 8px; cursor:pointer;">-</button>
-                    <span style="font-size: 11px; margin: 0 8px; color: var(--text, #333);">100%</span>
+                        style="border: 1px solid var(--border); background: var(--bg); border-radius: 4px; padding: 2px 8px; cursor:pointer;">-</button>
+                    <span style="font-size: 11px; margin: 0 8px; color: var(--text);">100%</span>
                     <button
-                        style="border: 1px solid var(--border, #e0e0e0); background: var(--bg, #fff); border-radius: 4px; padding: 2px 8px; cursor:pointer;">+</button>
+                        style="border: 1px solid var(--border); background: var(--bg); border-radius: 4px; padding: 2px 8px; cursor:pointer;">+</button>
                 </div>
             </div>
 
@@ -160,26 +160,26 @@
                 style="flex:1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 60px; text-align: center;">
                 <div style="font-size: 56px; animation: float 3s ease-in-out infinite;">🌱</div>
                 <h3
-                    style="margin: 0; font-size: 22px; font-weight: 800; color: var(--text, #3b3b3b); font-family: 'Fira Code', monospace;">
+                    style="margin: 0; font-size: 22px; font-weight: 800; color: var(--text); font-family: 'Fira Code', monospace;">
                     Vibe — App Builder</h3>
-                <p style="margin: 0; font-size: 14px; color: var(--text-muted, #888); max-width: 440px; line-height: 1.6;">
+                <p style="margin: 0; font-size: 14px; color: var(--text-muted); max-width: 440px; line-height: 1.6;">
                     Describe what you want to build in the chat. Mantis #1 will analyze your request, generate task
                     nodes on this canvas, and build the entire application for you.
                 </p>
                 <div style="display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px;">
                     <button class="vibe-quick-btn" type="button"
                         onclick="document.getElementById('vibeChatInput').value='Create an e-commerce app for selling handmade crafts with shopping cart and payments'; document.getElementById('vibeChatInput').focus();"
-                        style="padding: 8px 16px; border: 1px solid var(--border, #e0e0e0); border-radius: 20px; background: var(--bg, #fff); font-size: 12px; cursor: pointer; color: var(--text-muted, #666); transition: all 0.15s; font-family: 'Fira Code', monospace;">
+                        style="padding: 8px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); font-size: 12px; cursor: pointer; color: var(--text-muted); transition: all 0.15s; font-family: 'Fira Code', monospace;">
                         🛍️ E-Commerce App
                     </button>
                     <button class="vibe-quick-btn" type="button"
                         onclick="document.getElementById('vibeChatInput').value='Build a CRM system with contacts, leads, and deal pipeline tracking'; document.getElementById('vibeChatInput').focus();"
-                        style="padding: 8px 16px; border: 1px solid var(--border, #e0e0e0); border-radius: 20px; background: var(--bg, #fff); font-size: 12px; cursor: pointer; color: var(--text-muted, #666); transition: all 0.15s; font-family: 'Fira Code', monospace;">
+                        style="padding: 8px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); font-size: 12px; cursor: pointer; color: var(--text-muted); transition: all 0.15s; font-family: 'Fira Code', monospace;">
                         📇 CRM System
                     </button>
                     <button class="vibe-quick-btn" type="button"
                         onclick="document.getElementById('vibeChatInput').value='Create a project management dashboard with tasks, Kanban board, and team assignments'; document.getElementById('vibeChatInput').focus();"
-                        style="padding: 8px 16px; border: 1px solid var(--border, #e0e0e0); border-radius: 20px; background: var(--bg, #fff); font-size: 12px; cursor: pointer; color: var(--text-muted, #666); transition: all 0.15s; font-family: 'Fira Code', monospace;">
+                        style="padding: 8px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); font-size: 12px; cursor: pointer; color: var(--text-muted); transition: all 0.15s; font-family: 'Fira Code', monospace;">
                         📊 Project Manager
                     </button>
                 </div>
@@ -187,23 +187,23 @@
 
             <!-- Vibe Chat Overlay (LIVE) -->
             <div id="vibeChatOverlay"
-                style="position: absolute; bottom: 24px; right: 24px; width: 380px; background: var(--surface); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); color: var(--bg, #fff); z-index: 100;">
+                style="position: absolute; bottom: 24px; right: 24px; width: 380px; background: var(--surface); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); color: var(--bg); z-index: 100;">
                 <div
                     style="padding: 12px 16px; background: var(--surface-hover); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
                     <div style="display: flex; align-items: center; gap: 8px;">
                         <span class="as-status-dot green" id="vibeChatStatusDot"
-                            style="box-shadow: 0 0 8px var(--accent, #84d669);"></span>
+                            style="box-shadow: 0 0 8px var(--accent);"></span>
                         <span style="font-size: 12px; font-weight: 600;">Mantis #1</span>
                     </div>
                     <span id="vibeChatStatusBadge"
-                        style="font-size: 10px; color: var(--text-muted, #888); background: #333; padding: 2px 6px; border-radius: 4px;">CONNECTING…</span>
+                        style="font-size: 10px; color: var(--text-muted); background: #333; padding: 2px 6px; border-radius: 4px;">CONNECTING…</span>
                 </div>
 
                 <div id="vibeChatMessages"
                     style="padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 12px; line-height: 1.5; min-height: 220px; max-height: 350px; overflow-y: auto; font-family: 'Segoe UI', system-ui, sans-serif;">
                     <!-- Welcome hint -->
                     <div
-                        style="align-self: center; background: rgba(132,214,105,0.12); color: var(--accent, #84d669); padding: 8px 14px; border-radius: 8px; font-size: 11px; text-align: center;">
+                        style="align-self: center; background: rgba(132,214,105,0.12); color: var(--accent); padding: 8px 14px; border-radius: 8px; font-size: 11px; text-align: center;">
                         💡 TIP: Describe your project. The more detail, the better the plan.
                     </div>
                 </div>
@@ -211,11 +211,11 @@
                 <div style="padding: 12px; border-top: 1px solid var(--border); background: var(--surface);">
                     <form id="vibeChatForm" autocomplete="off"
                         style="display: flex; align-items: center; gap: 8px; background: var(--surface-hover); padding: 8px 12px; border-radius: 20px; border: 1px solid #333;">
-                        <span style="color: var(--text-muted, #888); cursor: pointer; transform: rotate(-45deg);">📎</span>
+                        <span style="color: var(--text-muted); cursor: pointer; transform: rotate(-45deg);">📎</span>
                         <input type="text" id="vibeChatInput" placeholder="Describe your project…"
-                            style="flex: 1; background: transparent; border: none; color: var(--bg, #fff); font-size: 13px; outline: none; font-family: 'Segoe UI', system-ui, sans-serif;" />
+                            style="flex: 1; background: transparent; border: none; color: var(--bg); font-size: 13px; outline: none; font-family: 'Segoe UI', system-ui, sans-serif;" />
                         <button type="submit" id="vibeChatSend"
-                            style="background: var(--accent, #84d669); color: var(--surface); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; font-weight: bold; border: none;">↑</button>
+                            style="background: var(--accent); color: var(--surface); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; font-weight: bold; border: none;">↑</button>
                     </form>
                 </div>
             </div>
@@ -262,10 +262,10 @@
             if (!box) return;
             var div = document.createElement("div");
             if (role === "user") {
-                div.style.cssText = "align-self:flex-end;background:var(--accent, #84d669);color:var(--surface);font-weight:500;padding:10px 14px;border-radius:12px 12px 0 12px;max-width:85%;word-wrap:break-word;";
+                div.style.cssText = "align-self:flex-end;background:var(--accent);color:var(--surface);font-weight:500;padding:10px 14px;border-radius:12px 12px 0 12px;max-width:85%;word-wrap:break-word;";
                 div.textContent = text;
             } else if (role === "system") {
-                div.style.cssText = "align-self:center;background:rgba(132,214,105,0.12);color: var(--accent, #84d669);padding:6px 12px;border-radius:8px;font-size:11px;text-align:center;";
+                div.style.cssText = "align-self:center;background:rgba(132,214,105,0.12);color: var(--accent);padding:6px 12px;border-radius:8px;font-size:11px;text-align:center;";
                 div.innerHTML = text;
             } else {
                 div.style.cssText = "align-self:flex-start;background: var(--border);color:#ececec;padding:10px 14px;border-radius:12px 12px 12px 0;max-width:85%;word-wrap:break-word;";
@@ -322,14 +322,14 @@
             var dot = document.getElementById("vibeChatStatusDot");
             var badge = document.getElementById("vibeChatStatusBadge");
             if (status === "connected") {
-                if (dot) { dot.className = "as-status-dot green"; dot.style.boxShadow = "0 0 8px var(--accent, #84d669)"; }
-                if (badge) { badge.textContent = "EVOLVED"; badge.style.background = "var(--accent, #84d669)"; badge.style.color = "var(--bg, #fff)"; }
+                if (dot) { dot.className = "as-status-dot green"; dot.style.boxShadow = "0 0 8px var(--accent)"; }
+                if (badge) { badge.textContent = "EVOLVED"; badge.style.background = "var(--accent)"; badge.style.color = "var(--bg)"; }
             } else if (status === "connecting") {
                 if (dot) { dot.className = "as-status-dot yellow"; dot.style.boxShadow = "0 0 8px #f59e0b"; }
-                if (badge) { badge.textContent = "CONNECTING…"; badge.style.background = "#333"; badge.style.color = "var(--text-muted, #888)"; }
+                if (badge) { badge.textContent = "CONNECTING…"; badge.style.background = "#333"; badge.style.color = "var(--text-muted)"; }
             } else {
                 if (dot) { dot.className = "as-status-dot red"; dot.style.boxShadow = "0 0 8px #ef4444"; }
-                if (badge) { badge.textContent = "OFFLINE"; badge.style.background = "#333"; badge.style.color = "var(--text-muted, #888)"; }
+                if (badge) { badge.textContent = "OFFLINE"; badge.style.background = "#333"; badge.style.color = "var(--text-muted)"; }
             }
         }
 
@@ -347,7 +347,7 @@
                     card.appendChild(barWrapper);
                 }
             } else if (status === "done") {
-                card.style.borderLeftColor = "var(--accent, #84d669)";
+                card.style.borderLeftColor = "var(--accent)";
                 bar = card.querySelector(".as-bar-fill");
                 if (bar) bar.style.width = "100%";
                 setTimeout(function () {
@@ -375,41 +375,41 @@
             var isFirst = stepsContainer.children.length === 0;
             var nodeId = "vibe-node-" + nodeIdCounter;
 
-            var statusBg = status === "Done" ? "var(--accent, #84d669)" : (status === "Planning" ? "var(--success-light, #eef8eb)" : "var(--warning-light, var(--bg, #fff)3cd)");
-            var statusColor = status === "Done" ? "var(--bg, #fff)" : (status === "Planning" ? "var(--accent, #84d669)" : "var(--warning, #856404)");
+            var statusBg = status === "Done" ? "var(--accent)" : (status === "Planning" ? "var(--success-light, #eef8eb)" : "var(--warning-light, var(--bg)3cd)");
+            var statusColor = status === "Done" ? "var(--bg)" : (status === "Planning" ? "var(--accent)" : "var(--warning, #856404)");
 
             var subTasksHtml = "";
             if (fileList.length > 0) {
                 subTasksHtml = '<div id="' + nodeId + '-files" style="display:none;padding:8px 16px;border-top:1px solid var(--border);font-size:10px;color:var(--text-muted, #555);">';
                 for (var fi = 0; fi < fileList.length; fi++) {
-                    subTasksHtml += '<div style="padding:2px 0;display:flex;align-items:center;gap:4px;"><span style="color: var(--accent, #84d669);">📄</span> ' + esc(fileList[fi]) + '</div>';
+                    subTasksHtml += '<div style="padding:2px 0;display:flex;align-items:center;gap:4px;"><span style="color: var(--accent);">📄</span> ' + esc(fileList[fi]) + '</div>';
                 }
                 subTasksHtml += '</div>';
             }
 
             var node = document.createElement("div");
             node.className = "vibe-task-node";
-            node.style.cssText = "background: var(--bg, #fff);border:" + (isFirst ? "2px solid var(--accent, #84d669)" : "1px solid var(--border)") + ";border-radius:8px;width:280px;box-shadow:0 " + (isFirst ? "4" : "2") + "px 12px rgba(" + (isFirst ? "132,214,105,0.15" : "0,0,0,0.05") + ");position:relative;flex-shrink:0;animation:nodeIn 0.4s ease;";
+            node.style.cssText = "background: var(--bg);border:" + (isFirst ? "2px solid var(--accent)" : "1px solid var(--border)") + ";border-radius:8px;width:280px;box-shadow:0 " + (isFirst ? "4" : "2") + "px 12px rgba(" + (isFirst ? "132,214,105,0.15" : "0,0,0,0.05") + ");position:relative;flex-shrink:0;animation:nodeIn 0.4s ease;";
 
             node.innerHTML =
                 '<div style="padding:12px 16px;border-bottom: 1px solid var(--border);">' +
-                '<div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:10px;color: var(--text-muted, #888);">' +
+                '<div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:10px;color: var(--text-muted);">' +
                 '<span>' + fileCount + ' files</span><span>' + time + '</span><span>' + tokens + '</span>' +
                 '</div>' +
-                '<h4 style="margin:0 0 8px 0;font-size:14px;color: var(--text, #3b3b3b);font-weight:700;">' + esc(title) + '</h4>' +
-                '<p style="margin:0;font-size:11px;color: var(--text-muted, #666);line-height:1.4;">' + esc(description) + '</p>' +
+                '<h4 style="margin:0 0 8px 0;font-size:14px;color: var(--text);font-weight:700;">' + esc(title) + '</h4>' +
+                '<p style="margin:0;font-size:11px;color: var(--text-muted);line-height:1.4;">' + esc(description) + '</p>' +
                 '</div>' +
                 '<div style="padding:10px 16px;background: var(--surface);border-bottom: 1px solid var(--border);font-size:11px;">' +
                 '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">' +
-                '<span style="color: var(--text-muted, #888);">Status</span>' +
+                '<span style="color: var(--text-muted);">Status</span>' +
                 '<span style="background:' + statusBg + ';color:' + statusColor + ';padding:2px 8px;border-radius:12px;font-weight:600;">' + esc(status) + '</span>' +
                 '</div>' +
                 '<div style="display:flex;justify-content:space-between;align-items:center;">' +
-                '<span style="color: var(--text-muted, #888);">Mantis Manager</span>' +
+                '<span style="color: var(--text-muted);">Mantis Manager</span>' +
                 '<span style="display:flex;align-items:center;gap:4px;"><span class="as-status-dot green"></span> Mantis #1</span>' +
                 '</div>' +
                 '</div>' +
-                '<div style="padding:8px 16px;font-size:10px;font-weight:700;color: var(--text-muted, #888);">' +
+                '<div style="padding:8px 16px;font-size:10px;font-weight:700;color: var(--text-muted);">' +
                 '<div data-toggle="' + nodeId + '-files" style="padding:4px 0;cursor:pointer;user-select:none;" onclick="(function(el){var t=document.getElementById(el.getAttribute(\'data-toggle\'));if(t){t.style.display=t.style.display===\'none\'?\'\':\'none\';var a=el.querySelector(\'span\');if(a)a.textContent=t.style.display===\'none\'?\'▶\':\'▼\';}})(this)">// SUB-TASKS <span style="float:right;">▶</span></div>' +
                 '<div style="padding:4px 0;cursor:pointer;">// LOGS <span style="float:right;">▶</span></div>' +
                 '</div>' +
@@ -417,11 +417,11 @@
 
             if (isFirst || stepsContainer.children.length > 0) {
                 var line = document.createElement("div");
-                line.style.cssText = "position:absolute;right:-60px;top:50%;width:60px;height:2px;background:var(--accent, #84d669);z-index:10;";
+                line.style.cssText = "position:absolute;right:-60px;top:50%;width:60px;height:2px;background:var(--accent);z-index:10;";
                 node.appendChild(line);
                 if (!isFirst) {
                     var dot = document.createElement("div");
-                    dot.style.cssText = "position:absolute;left:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:var(--accent, #84d669);z-index:20;";
+                    dot.style.cssText = "position:absolute;left:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:var(--accent);z-index:20;";
                     node.appendChild(dot);
                 }
             }
@@ -444,7 +444,7 @@
             var breadcrumb = document.querySelector(".vibe-canvas div:first-child");
             if (breadcrumb) {
                 currentProject = intent.substring(0, 40).replace(/[^a-zA-Z0-9 ]/g, "");
-                breadcrumb.innerHTML = '// DASHBOARD <span style="color: var(--text-secondary, #ccc);margin:0 6px;">&gt;</span> // ' + esc(currentProject.toUpperCase()) + ' <div style="float:right;"><button style="border: 1px solid var(--border, #e0e0e0);background: var(--bg, #fff);border-radius:4px;padding:2px 8px;cursor:pointer;">-</button><span style="font-size:11px;margin:0 8px;color: var(--text, #333);">100%</span><button style="border: 1px solid var(--border, #e0e0e0);background: var(--bg, #fff);border-radius:4px;padding:2px 8px;cursor:pointer;">+</button></div>';
+                breadcrumb.innerHTML = '// DASHBOARD <span style="color: var(--text-secondary);margin:0 6px;">&gt;</span> // ' + esc(currentProject.toUpperCase()) + ' <div style="float:right;"><button style="border: 1px solid var(--border);background: var(--bg);border-radius:4px;padding:2px 8px;cursor:pointer;">-</button><span style="font-size:11px;margin:0 8px;color: var(--text);">100%</span><button style="border: 1px solid var(--border);background: var(--bg);border-radius:4px;padding:2px 8px;cursor:pointer;">+</button></div>';
             }
 
             fetch("/api/autotask/classify", {
@@ -482,7 +482,7 @@
                         vibeAddMsg("bot", r.message || "Done! Your project is ready.");
 
                         if (r.app_url) {
-                            vibeAddMsg("system", '✅ App available at <a href="' + r.app_url + '" target="_blank" style="color: var(--accent, #84d669);text-decoration:underline;">' + esc(r.app_url) + '</a>');
+                            vibeAddMsg("system", '✅ App available at <a href="' + r.app_url + '" target="_blank" style="color: var(--accent);text-decoration:underline;">' + esc(r.app_url) + '</a>');
 
                             var preview = document.getElementById("vibePreview");
                             var urlBar = document.getElementById("vibePreviewUrl");
@@ -725,7 +725,7 @@
                     card.appendChild(barWrapper);
                 }
             } else if (status === "EVOLVED" || status === "DONE") {
-                card.style.borderLeft = "3px solid var(--accent, #84d669)";
+                card.style.borderLeft = "3px solid var(--accent)";
                 if (dot) { dot.className = "as-status-dot green"; }
                 if (badge) { badge.textContent = "EVOLVED"; badge.className = "as-badge badge-evolved"; }
                 var agBar = card.querySelector(".as-bar-fill");
@@ -749,7 +749,7 @@
                 if (!detailEl) {
                     detailEl = document.createElement("span");
                     detailEl.className = "as-agent-detail";
-                    detailEl.style.cssText = "font-size:10px;color: var(--text-muted, #666);display:block;padding:0 12px 4px;";
+                    detailEl.style.cssText = "font-size:10px;color: var(--text-muted);display:block;padding:0 12px 4px;";
                     var body = card.querySelector(".as-agent-body");
                     if (body) body.after(detailEl);
                 }
@@ -866,8 +866,8 @@
     }
 
     .vibe-quick-btn:hover {
-        border-color: var(--accent, #84d669) !important;
-        color: var(--accent, #84d669) !important;
+        border-color: var(--accent) !important;
+        color: var(--accent) !important;
         background: rgba(132, 214, 105, 0.06) !important;
         transform: translateY(-2px);
     }
diff --git a/ui/suite/tasks/task-window.css b/ui/suite/tasks/task-window.css
index 56f4cf7..2043684 100644
--- a/ui/suite/tasks/task-window.css
+++ b/ui/suite/tasks/task-window.css
@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: var(--bg, #fff);
+    background: var(--bg);
     font-family: 'Fira Code', monospace;
 }
 
@@ -14,8 +14,8 @@
 
 .tw-tabs-header {
     display: flex;
-    background: var(--surface, #f8f8f8);
-    border-bottom: 1px solid var(--border, #f0f1f2);
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
     min-height: 34px;
     overflow-x: auto;
 }
@@ -25,12 +25,12 @@
     min-width: 140px;
     padding: 0 18px;
     border: none;
-    border-right: 1px solid var(--border, #f0f1f2);
+    border-right: 1px solid var(--border);
     background: transparent;
     font-family: 'Fira Code', monospace;
     font-size: 12px;
     font-weight: 600;
-    color: var(--text, #3b3b3b);
+    color: var(--text);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -40,12 +40,12 @@
 }
 
 .tw-tab:hover {
-    background: var(--bg, #fff);
+    background: var(--bg);
 }
 
 .tw-tab.active {
-    background: var(--accent, #84d669);
-    color: var(--bg, #fff);
+    background: var(--accent);
+    color: var(--bg);
 }
 
 .tw-tab-prefix {
@@ -69,20 +69,20 @@
 
 .tw-pipeline-tabs {
     display: flex;
-    background: var(--surface, #f8f8f8);
-    border-bottom: 1px solid var(--border, #f0f1f2);
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
 }
 
 .tw-pipeline-tab {
     flex: 1;
     height: 32px;
     border: none;
-    border-right: 1px solid var(--border, #f0f1f2);
+    border-right: 1px solid var(--border);
     background: transparent;
     font-family: 'Fira Code', monospace;
     font-size: 11px;
     font-weight: 500;
-    color: var(--text-muted, #888);
+    color: var(--text-muted);
     cursor: pointer;
     transition: all 0.15s;
 }
@@ -92,13 +92,13 @@
 }
 
 .tw-pipeline-tab:hover {
-    background: var(--bg, #fff);
-    color: var(--text, #3b3b3b);
+    background: var(--bg);
+    color: var(--text);
 }
 
 .tw-pipeline-tab.active {
-    background: var(--accent, #84d669);
-    color: var(--bg, #fff);
+    background: var(--accent);
+    color: var(--bg);
 }
 
 /* ============================================
@@ -109,7 +109,7 @@
     display: flex;
     gap: 8px;
     padding: 12px 16px;
-    border-bottom: 1px solid var(--border, #f0f1f2);
+    border-bottom: 1px solid var(--border);
 }
 
 .tw-filter-chip {
@@ -117,26 +117,26 @@
     align-items: center;
     gap: 4px;
     padding: 5px 12px;
-    border: 1px solid var(--border, #e0e0e0);
+    border: 1px solid var(--border);
     border-radius: 16px;
-    background: var(--bg, #fff);
+    background: var(--bg);
     font-family: 'Fira Code', monospace;
     font-size: 11px;
     font-weight: 500;
-    color: var(--text-muted, #666);
+    color: var(--text-muted);
     cursor: pointer;
     transition: all 0.15s;
 }
 
 .tw-filter-chip:hover {
-    border-color: var(--accent, #84d669);
-    color: var(--text, #3b3b3b);
+    border-color: var(--accent);
+    color: var(--text);
 }
 
 .tw-filter-chip.active {
-    background: var(--accent, #84d669);
-    color: var(--bg, #fff);
-    border-color: var(--accent, #84d669);
+    background: var(--accent);
+    color: var(--bg);
+    border-color: var(--accent);
 }
 
 .tw-filter-icon {
@@ -151,37 +151,37 @@
     display: flex;
     gap: 8px;
     padding: 12px 16px;
-    border-bottom: 1px solid var(--border, #f0f1f2);
+    border-bottom: 1px solid var(--border);
 }
 
 .tw-intent-input {
     flex: 1;
     padding: 8px 14px;
-    border: 1px solid var(--border, #e0e0e0);
+    border: 1px solid var(--border);
     border-radius: 6px;
     font-family: 'Fira Code', monospace;
     font-size: 13px;
-    color: var(--text, #3b3b3b);
+    color: var(--text);
     outline: none;
     transition: border-color 0.15s;
-    background: var(--bg, #fff);
+    background: var(--bg);
 }
 
 .tw-intent-input:focus {
-    border-color: var(--accent, #84d669);
+    border-color: var(--accent);
     box-shadow: 0 0 0 3px var(--accent-light, rgba(132, 214, 105, 0.15));
 }
 
 .tw-intent-input::placeholder {
-    color: var(--text-muted, #bbb);
+    color: var(--text-muted);
 }
 
 .tw-intent-run {
     padding: 8px 20px;
     border: none;
     border-radius: 6px;
-    background: var(--accent, #84d669);
-    color: var(--bg, #fff);
+    background: var(--accent);
+    color: var(--bg);
     font-family: 'Fira Code', monospace;
     font-size: 12px;
     font-weight: 700;
@@ -215,14 +215,14 @@
 .tw-task-list {
     width: 280px;
     min-width: 200px;
-    border-right: 1px solid var(--border, #f0f1f2);
+    border-right: 1px solid var(--border);
     overflow-y: auto;
 }
 
 .tw-task-list-empty {
     padding: 24px 16px;
     text-align: center;
-    color: var(--text-muted, #bbb);
+    color: var(--text-muted);
     font-size: 13px;
 }
 
@@ -239,7 +239,7 @@
     justify-content: center;
     height: 100%;
     text-align: center;
-    color: var(--text-muted, #888);
+    color: var(--text-muted);
     gap: 8px;
 }
 
@@ -250,7 +250,7 @@
 
 .tw-hint {
     font-size: 12px;
-    color: var(--text-muted, #bbb);
+    color: var(--text-muted);
 }
 
 /* ============================================
@@ -262,18 +262,18 @@
     align-items: center;
     gap: 10px;
     padding: 10px 16px;
-    border-bottom: 1px solid var(--border, #f0f1f2);
+    border-bottom: 1px solid var(--border);
     cursor: pointer;
     transition: background 0.15s;
 }
 
 .tw-task-item:hover {
-    background: var(--surface, #f8f8f8);
+    background: var(--surface);
 }
 
 .tw-task-item.active {
     background: var(--accent-light, rgba(132, 214, 105, 0.08));
-    border-left: 3px solid var(--accent, #84d669);
+    border-left: 3px solid var(--accent);
 }
 
 .tw-task-status-dot {
@@ -284,7 +284,7 @@
 }
 
 .tw-task-status-dot.running {
-    background: var(--accent, #84d669);
+    background: var(--accent);
 }
 
 .tw-task-status-dot.pending {
@@ -300,7 +300,7 @@
 }
 
 .tw-task-status-dot.paused {
-    background: var(--text-muted, #888);
+    background: var(--text-muted);
 }
 
 .tw-task-item-info {
@@ -311,7 +311,7 @@
 .tw-task-item-name {
     font-size: 12px;
     font-weight: 600;
-    color: var(--text, #3b3b3b);
+    color: var(--text);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -319,7 +319,7 @@
 
 .tw-task-item-type {
     font-size: 10px;
-    color: var(--text-muted, #888);
+    color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
@@ -338,18 +338,18 @@
     gap: 16px;
     margin-bottom: 24px;
     padding-bottom: 16px;
-    border-bottom: 1px solid var(--border, #f0f1f2);
+    border-bottom: 1px solid var(--border);
 }
 
 .tw-agent-avatar {
     width: 48px;
     height: 48px;
     border-radius: 50%;
-    background: var(--accent, #84d669);
+    background: var(--accent);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--bg, #fff);
+    color: var(--bg);
     font-size: 20px;
     font-weight: 700;
 }
@@ -361,13 +361,13 @@
 .tw-agent-title {
     font-size: 16px;
     font-weight: 700;
-    color: var(--text, #3b3b3b);
+    color: var(--text);
     margin: 0 0 4px 0;
 }
 
 .tw-agent-subtitle {
     font-size: 12px;
-    color: var(--text-muted, #888);
+    color: var(--text-muted);
 }
 
 .tw-section {
@@ -377,7 +377,7 @@
 .tw-section-title {
     font-size: 11px;
     font-weight: 700;
-    color: var(--text-muted, #888);
+    color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 10px;
@@ -391,20 +391,20 @@
 
 .tw-stat-card {
     padding: 12px;
-    background: var(--surface, #f8f8f8);
+    background: var(--surface);
     border-radius: 8px;
-    border: 1px solid #f0f1f2;
+    border: 1px solid var(--border);
 }
 
 .tw-stat-value {
     font-size: 18px;
     font-weight: 700;
-    color: var(--text, #3b3b3b);
+    color: var(--text);
 }
 
 .tw-stat-label {
     font-size: 10px;
-    color: var(--text-muted, #888);
+    color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.3px;
     margin-top: 2px;