diff --git a/ui/suite/js/window-manager.js b/ui/suite/js/window-manager.js
index ddeb360..99b5dff 100644
--- a/ui/suite/js/window-manager.js
+++ b/ui/suite/js/window-manager.js
@@ -39,7 +39,7 @@ if (typeof window.WindowManager === 'undefined') {
             const top = 100 + offset;
             const left = 150 + offset;
 
-            windowEl.className = 'absolute w-[700px] h-[500px] bg-white 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 border-gray-200 overflow-hidden window-element';
             windowEl.style.top = `${top}px`;
             windowEl.style.left = `${left}px`;
             windowEl.style.zIndex = this.zIndexCounter++;
diff --git a/ui/suite/partials/desktop-inner.html b/ui/suite/partials/desktop-inner.html
index 939fa50..4cf9a8c 100644
--- a/ui/suite/partials/desktop-inner.html
+++ b/ui/suite/partials/desktop-inner.html
@@ -32,8 +32,8 @@
     .sidebar {
         width: 51px;
         height: 100%;
-        background: var(--surface, #f8f8f8);
-        border-right: 1px solid var(--border, #f0f1f2);
+        background: var(--surface);
+        border-right: 1px solid var(--border);
         display: flex;
         flex-direction: column;
         z-index: 100;
@@ -42,7 +42,7 @@
     .sidebar-item {
         width: 51px;
         height: 50px;
-        border-bottom: 1px solid var(--border, #f0f1f2);
+        border-bottom: 1px solid var(--border);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -57,7 +57,7 @@
 
     .sidebar-item.active {
         background: var(--surface-hover, #ffffff);
-        border-left: 3px solid var(--accent, #84d669);
+        border-left: 3px solid var(--accent);
     }
 
     .sidebar-icon {
@@ -83,8 +83,8 @@
     .tabs-container {
         display: flex;
         flex-direction: column;
-        background: var(--surface, #f8f8f8);
-        border-bottom: 1px solid var(--border, #f0f1f2);
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
         z-index: 100;
     }
 
@@ -97,7 +97,7 @@
         height: 34px;
         min-width: 169px;
         flex: 1;
-        border-right: 1px solid var(--border, #f0f1f2);
+        border-right: 1px solid var(--border);
         display: flex;
         align-items: center;
         padding: 0 18px;
@@ -110,12 +110,12 @@
     }
 
     .main-tab.active {
-        background: var(--accent, #84d669);
-        border-color: var(--accent, #84d669);
+        background: var(--accent);
+        border-color: var(--accent);
     }
 
     .main-tab.active .main-tab-content {
-        color: var(--bg, white);
+        color: var(--bg);
     }
 
     .main-tab-content {
@@ -125,7 +125,7 @@
         font-family: 'Fira Code', monospace;
         font-size: 14px;
         font-weight: 500;
-        color: var(--text, #3b3b3b);
+        color: var(--text);
     }
 
     /* Workspace (Where windows float) */
@@ -161,7 +161,7 @@
     /* Interactive Desktop Icons triggering HTMX */
     .desktop-icon {
         background: var(--bg);
-        border: 1px solid var(--border, #f0f1f2);
+        border: 1px solid var(--border);
         border-radius: 8px;
         height: 67px;
         padding: 10px;
@@ -178,7 +178,7 @@
     .desktop-icon:hover {
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         transform: translateY(-2px);
-        border-color: var(--accent, #84d669);
+        border-color: var(--accent);
     }
 
     .panel-card-icon {
@@ -193,7 +193,7 @@
         font-family: 'Fira Code', monospace;
         font-size: 13px;
         font-weight: 500;
-        color: var(--text, #3b3b3b);
+        color: var(--text);
         margin-top: auto;
     }
 
@@ -236,7 +236,7 @@
     .toolbar {
         height: 50px;
         background: var(--bg);
-        border-top: 1px solid var(--border, #f0f1f2);
+        border-top: 1px solid var(--border);
         display: flex;
         align-items: center;
         padding: 0 8px;
@@ -255,7 +255,7 @@
     .toolbar-time {
         font-family: 'Fira Code', monospace;
         font-size: 14px;
-        color: var(--text, #3b3b3b);
+        color: var(--text);
         text-align: right;
         line-height: 1.4;
         padding: 0 10px;
@@ -275,11 +275,11 @@
     }
 
     .taskbar-item:hover {
-        background: var(--surface, #f8f8f8);
+        background: var(--surface);
     }
 
     .taskbar-item.active {
-        border-bottom-color: var(--accent, #84d669);
+        border-bottom-color: var(--accent);
         background: linear-gradient(to bottom, transparent 50%, var(--accent-light, rgba(132, 214, 105, 0.1)) 100%);
     }
 
@@ -293,13 +293,13 @@
     <!-- Left Sidebar -->
     <aside class="sidebar">
         <div class="sidebar-item active" title="Home">
-            <svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="var(--text, #3b3b3b)" stroke-width="2">
+            <svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2">
                 <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                 <polyline points="9 22 9 12 15 12 15 22"></polyline>
             </svg>
         </div>
         <div class="sidebar-item" title="Terminal">
-            <svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="var(--text, #3b3b3b)" stroke-width="2">
+            <svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2">
                 <polyline points="4 17 10 11 4 5"></polyline>
                 <line x1="12" y1="19" x2="20" y2="19"></line>
             </svg>
@@ -347,8 +347,8 @@
                     <div class="desktop-icon" data-app-id="chat" data-app-title="Chat"
                         hx-get="/suite/partials/chat.html" hx-swap="none">
                         <svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
-                            <circle cx="21" cy="21" r="20" stroke="var(--accent, #84d669)" stroke-width="2" />
-                            <path d="M14 21h14M21 14v14" stroke="var(--accent, #84d669)" stroke-width="2" />
+                            <circle cx="21" cy="21" r="20" stroke="var(--accent)" stroke-width="2" />
+                            <path d="M14 21h14M21 14v14" stroke="var(--accent)" stroke-width="2" />
                         </svg>
                         <div class="panel-card-label">Chat</div>
                     </div>
@@ -356,10 +356,10 @@
                     <div class="desktop-icon" data-app-id="vibe" data-app-title="Vibe"
                         hx-get="/suite/partials/vibe.html" hx-swap="none">
                         <svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
-                            <circle cx="21" cy="21" r="20" stroke="var(--accent, #84d669)" stroke-width="2" />
-                            <path d="M12 14l8 7-8 7" stroke="var(--accent, #84d669)" stroke-width="2" stroke-linecap="round"
+                            <circle cx="21" cy="21" r="20" stroke="var(--accent)" stroke-width="2" />
+                            <path d="M12 14l8 7-8 7" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round" />
-                            <line x1="22" y1="28" x2="32" y2="28" stroke="var(--accent, #84d669)" stroke-width="2"
+                            <line x1="22" y1="28" x2="32" y2="28" stroke="var(--accent)" stroke-width="2"
                                 stroke-linecap="round" />
                         </svg>
                         <div class="panel-card-label">Vibe</div>
@@ -368,10 +368,10 @@
                     <div class="desktop-icon" data-app-id="tasks" data-app-title="Tasks"
                         hx-get="/suite/tasks/task-window.html" hx-swap="none">
                         <svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
-                            <rect x="2" y="2" width="38" height="38" rx="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <line x1="12" y1="12" x2="30" y2="12" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <line x1="12" y1="21" x2="30" y2="21" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <line x1="12" y1="30" x2="24" y2="30" stroke="var(--text, #3b3b3b)" stroke-width="2" />
+                            <rect x="2" y="2" width="38" height="38" rx="4" stroke="var(--text)" stroke-width="2" />
+                            <line x1="12" y1="12" x2="30" y2="12" stroke="var(--text)" stroke-width="2" />
+                            <line x1="12" y1="21" x2="30" y2="21" stroke="var(--text)" stroke-width="2" />
+                            <line x1="12" y1="30" x2="24" y2="30" stroke="var(--text)" stroke-width="2" />
                         </svg>
                         <div class="panel-card-label">Tasks</div>
                     </div>
@@ -379,10 +379,10 @@
                     <div class="desktop-icon" data-app-id="terminal" data-app-title="Terminal"
                         hx-get="/suite/partials/terminal.html" hx-swap="none">
                         <svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
-                            <rect x="2" y="4" width="38" height="34" rx="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <line x1="10" y1="14" x2="32" y2="14" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <line x1="10" y1="22" x2="28" y2="22" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <line x1="10" y1="30" x2="24" y2="30" stroke="var(--text, #3b3b3b)" stroke-width="2" />
+                            <rect x="2" y="4" width="38" height="34" rx="4" stroke="var(--text)" stroke-width="2" />
+                            <line x1="10" y1="14" x2="32" y2="14" stroke="var(--text)" stroke-width="2" />
+                            <line x1="10" y1="22" x2="28" y2="22" stroke="var(--text)" stroke-width="2" />
+                            <line x1="10" y1="30" x2="24" y2="30" stroke="var(--text)" stroke-width="2" />
                         </svg>
                         <div class="panel-card-label">Terminal</div>
                     </div>
@@ -390,11 +390,11 @@
                     <div class="desktop-icon" data-app-id="explorer" data-app-title="Explorer"
                         hx-get="/suite/partials/explorer.html" hx-swap="none">
                         <svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
-                            <rect x="2" y="2" width="38" height="38" rx="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <line x1="10" y1="10" x2="32" y2="10" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <line x1="10" y1="18" x2="28" y2="18" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <line x1="10" y1="26" x2="32" y2="26" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <line x1="10" y1="34" x2="24" y2="34" stroke="var(--text, #3b3b3b)" stroke-width="2" />
+                            <rect x="2" y="2" width="38" height="38" rx="4" stroke="var(--text)" stroke-width="2" />
+                            <line x1="10" y1="10" x2="32" y2="10" stroke="var(--text)" stroke-width="2" />
+                            <line x1="10" y1="18" x2="28" y2="18" stroke="var(--text)" stroke-width="2" />
+                            <line x1="10" y1="26" x2="32" y2="26" stroke="var(--text)" stroke-width="2" />
+                            <line x1="10" y1="34" x2="24" y2="34" stroke="var(--text)" stroke-width="2" />
                         </svg>
                         <div class="panel-card-label">Explorer</div>
                     </div>
@@ -402,10 +402,10 @@
                     <div class="desktop-icon" data-app-id="editor" data-app-title="Editor"
                         hx-get="/suite/partials/editor.html" hx-swap="none">
                         <svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
-                            <polyline points="4 8 12 2 20 8" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <line x1="12" y1="2" x2="12" y2="24" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <polyline points="22 16 30 10 38 16" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <line x1="30" y1="10" x2="30" y2="32" stroke="var(--text, #3b3b3b)" stroke-width="2" />
+                            <polyline points="4 8 12 2 20 8" stroke="var(--text)" stroke-width="2" />
+                            <line x1="12" y1="2" x2="12" y2="24" stroke="var(--text)" stroke-width="2" />
+                            <polyline points="22 16 30 10 38 16" stroke="var(--text)" stroke-width="2" />
+                            <line x1="30" y1="10" x2="30" y2="32" stroke="var(--text)" stroke-width="2" />
                         </svg>
                         <div class="panel-card-label">Editor</div>
                     </div>
@@ -413,9 +413,9 @@
                     <div class="desktop-icon" data-app-id="browser" data-app-title="Browser"
                         hx-get="/suite/partials/browser.html" hx-swap="none">
                         <svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
-                            <rect x="2" y="4" width="38" height="34" rx="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <circle cx="14" cy="16" r="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
-                            <path d="M6 34a6 6 0 0 1 6-6h10a6 6 0 0 1 6 6v2H6v-2z" stroke="var(--text, #3b3b3b)" stroke-width="2" />
+                            <rect x="2" y="4" width="38" height="34" rx="4" stroke="var(--text)" stroke-width="2" />
+                            <circle cx="14" cy="16" r="4" stroke="var(--text)" stroke-width="2" />
+                            <path d="M6 34a6 6 0 0 1 6-6h10a6 6 0 0 1 6 6v2H6v-2z" stroke="var(--text)" stroke-width="2" />
                         </svg>
                         <div class="panel-card-label">Browser</div>
                     </div>
diff --git a/ui/suite/partials/vibe.html b/ui/suite/partials/vibe.html
index 6a780ac..8061d1f 100644
--- a/ui/suite/partials/vibe.html
+++ b/ui/suite/partials/vibe.html
@@ -15,9 +15,9 @@
     <div class="vibe-body">
 
         <!-- Agents & Workspaces Sidebar (Fixed to left as in image) -->
-        <aside class="agents-sidebar" id="agentsSidebar" style="background: var(--surface, #fcfcfc);">
+        <aside class="agents-sidebar" id="agentsSidebar" style="background: var(--surface);">
             <div class="as-logo-section"
-                style="padding: 16px; border-bottom: 1px solid var(--border, #f0f1f2); display: flex; align-items: center; justify-content: space-between;">
+                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
@@ -139,7 +139,7 @@
             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, #f0f1f2); background: rgba(255,255,255,0.8); backdrop-filter: blur(4px);">
+                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
                 <div style="float: right;">
                     <button
@@ -380,7 +380,7 @@
 
             var subTasksHtml = "";
             if (fileList.length > 0) {
-                subTasksHtml = '<div id="' + nodeId + '-files" style="display:none;padding:8px 16px;border-top:1px solid var(--border, #f0f1f2);font-size:10px;color:var(--text-muted, #555);">';
+                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>';
                 }
@@ -389,17 +389,17 @@
 
             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, #f0f1f2)") + ";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, #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.innerHTML =
-                '<div style="padding:12px 16px;border-bottom: 1px solid var(--border, #f0f1f2);">' +
+                '<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);">' +
                 '<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>' +
                 '</div>' +
-                '<div style="padding:10px 16px;background: var(--surface, #fcfcfc);border-bottom: 1px solid var(--border, #f0f1f2);font-size:11px;">' +
+                '<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="background:' + statusBg + ';color:' + statusColor + ';padding:2px 8px;border-radius:12px;font-weight:600;">' + esc(status) + '</span>' +