diff --git a/app/desktop/src/App.module.css b/app/desktop/src/App.module.css
index f136b8796..579ff7a7c 100644
--- a/app/desktop/src/App.module.css
+++ b/app/desktop/src/App.module.css
@@ -31,17 +31,17 @@
   min-height: 48px;
   padding: 6px 8px;
   border-top: 1px solid rgba(255,255,255,0.32);
-  border-bottom: 1px solid rgba(0,0,0,0.06);
-  background: rgba(250,250,251,0.78);
+  border-bottom: 1px solid var(--glass-border);
+  background: var(--glass-light-fill);
   backdrop-filter: blur(22px) saturate(1.15);
   -webkit-backdrop-filter: blur(22px) saturate(1.15);
   flex-shrink: 0;
 }
 
 [data-theme='dark'] .mobileToolbar {
-  background: rgba(28,28,36,0.72);
-  border-top-color: rgba(255,255,255,0.06);
-  border-bottom-color: rgba(255,255,255,0.06);
+  background: var(--glass-panel);
+  border-top-color: var(--glass-border);
+  border-bottom-color: var(--glass-border);
 }
 
 .mobileToolbarBtn,
@@ -67,7 +67,7 @@
 .mobileToolbarBtn:hover,
 .railBtn:hover,
 .rightPanelCollapseBtn:hover {
-  background: rgba(0,0,0,0.055);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 
@@ -81,14 +81,14 @@
 .rightPanelTab:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
-  background: rgba(99,102,241,0.1);
+  background: var(--glass-tint-plum);
   color: var(--foreground);
 }
 
 [data-theme='dark'] .mobileToolbarBtn:hover,
 [data-theme='dark'] .railBtn:hover,
 [data-theme='dark'] .rightPanelCollapseBtn:hover {
-  background: rgba(255,255,255,0.07);
+  background: var(--glass-bg-medium);
 }
 
 .mobileToolbarBtn:active,
@@ -113,12 +113,12 @@
   z-index: 40;
   max-width: 220px;
   padding: 5px 8px 6px;
-  border: 1px solid rgba(0,0,0,0.06);
+  border: 1px solid var(--glass-border);
   border-radius: 8px;
-  background: rgba(255,255,255,0.86);
+  background: var(--glass-input-bg-hover);
   backdrop-filter: blur(18px) saturate(1.12);
   -webkit-backdrop-filter: blur(18px) saturate(1.12);
-  box-shadow: 0 10px 28px rgba(15,23,42,0.12), 0 1px 0 rgba(255,255,255,0.7) inset;
+  box-shadow: 0 10px 28px var(--glass-shadow-subtle), 0 1px 0 rgba(255,255,255,0.7) inset;
   color: var(--foreground);
   font-size: 11px;
   font-weight: 560;
@@ -133,9 +133,9 @@
 }
 
 [data-theme='dark'] .iconTooltip {
-  border-color: rgba(255,255,255,0.08);
-  background: rgba(36,36,44,0.82);
-  box-shadow: 0 14px 32px rgba(0,0,0,0.34), 0 1px 0 rgba(255,255,255,0.06) inset;
+  border-color: var(--glass-border);
+  background: var(--glass-panel);
+  box-shadow: 0 14px 32px var(--glass-shadow), 0 1px 0 var(--glass-bg-medium) inset;
 }
 
 .iconTooltipHost:hover .iconTooltip,
@@ -219,12 +219,12 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
-  background: rgba(246, 246, 247, 0.82);
+  background: var(--glass-light-fill);
   backdrop-filter: blur(26px) saturate(1.08);
   -webkit-backdrop-filter: blur(26px) saturate(1.08);
   border-radius: 12px;
   overflow: hidden;
-  border: 1px solid rgba(15,23,42,0.055);
+  border: 1px solid var(--glass-border);
   position: relative;
 }
 
@@ -249,7 +249,7 @@
 }
 
 .resizeHandle:hover::before {
-  background: rgba(99,102,241,0.36);
+  background: var(--glass-tint-plum);
 }
 
 .resizeHandle:focus-visible {
@@ -257,8 +257,8 @@
 }
 
 .resizeHandle:focus-visible::before {
-  background: rgba(99,102,241,0.68);
-  box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
+  background: var(--glass-tint-plum);
+  box-shadow: 0 0 0 4px var(--glass-tint-plum);
 }
 
 .resizing,
@@ -276,9 +276,9 @@
   align-items: center;
   gap: 6px;
   padding: 8px 5px;
-  border: 1px solid rgba(0,0,0,0.04);
+  border: 1px solid var(--glass-border-subtle);
   border-radius: 14px;
-  background: rgba(246,246,247,0.68);
+  background: var(--glass-light-fill);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
 }
@@ -304,10 +304,10 @@
 
 [data-theme='dark'] .leftRail,
 [data-theme='dark'] .rightRail {
-  background: rgba(35,35,45,0.55);
+  background: var(--glass-panel);
   backdrop-filter: blur(40px) saturate(1.2);
   -webkit-backdrop-filter: blur(40px) saturate(1.2);
-  border-color: rgba(255,255,255,0.06);
+  border-color: var(--glass-border);
 }
 
 .railBtn {
@@ -318,21 +318,21 @@
 }
 
 [data-theme='dark'] .sidebar {
-  background: rgba(31, 31, 39, 0.82);
+  background: var(--glass-panel);
   backdrop-filter: blur(26px) saturate(1.08);
   -webkit-backdrop-filter: blur(26px) saturate(1.08);
-  border-color: rgba(0,0,0,0.26);
+  border-color: var(--glass-border-heavy);
 }
 
 /* ── Sidebar sections ──────────────────────── */
 .sidebarSection {
   min-height: 0;
   flex: 0 0 auto;
-  border-bottom: 1px solid rgba(0,0,0,0.035);
+  border-bottom: 1px solid var(--glass-border-subtle);
 }
 
 [data-theme='dark'] .sidebarSection {
-  border-bottom-color: rgba(255,255,255,0.042);
+  border-bottom-color: var(--glass-border-subtle);
 }
 
 .threadSection {
@@ -384,9 +384,9 @@
   gap: 6px;
   width: calc(100% - 16px);
   padding: 7px 10px;
-  border: 1px solid rgba(15,23,42,0.045);
+  border: 1px solid var(--glass-border);
   border-radius: 9px;
-  background: rgba(0,0,0,0.028);
+  background: var(--glass-bg-subtle);
   color: var(--text-weaker);
   cursor: pointer;
   font: inherit;
@@ -395,20 +395,20 @@
 }
 
 [data-theme='dark'] .sidebarSearch {
-  background: rgba(255,255,255,0.038);
-  border: 1px solid rgba(0,0,0,0.2);
+  background: var(--glass-bg-light);
+  border: 1px solid var(--glass-border-heavy);
 }
 
 .sidebarSearch:hover,
 .sidebarSearch:focus-visible {
-  background: rgba(0,0,0,0.045);
+  background: var(--glass-bg-light);
   color: var(--foreground);
   outline: none;
 }
 
 [data-theme='dark'] .sidebarSearch:hover,
 [data-theme='dark'] .sidebarSearch:focus-visible {
-  background: rgba(255,255,255,0.06);
+  background: var(--glass-bg-medium);
 }
 
 .sidebarSearch svg {
@@ -437,15 +437,15 @@
   justify-content: flex-end;
   gap: 8px;
   padding: 10px 14px;
-  border-top: 1px solid rgba(0,0,0,0.04);
-  background: rgba(246, 246, 247, 0.9);
+  border-top: 1px solid var(--glass-border-subtle);
+  background: var(--glass-light-fill);
   backdrop-filter: blur(18px) saturate(1.06);
   -webkit-backdrop-filter: blur(18px) saturate(1.06);
 }
 
 [data-theme='dark'] .sidebarFooter {
-  border-top-color: rgba(255,255,255,0.06);
-  background: rgba(31, 31, 39, 0.9);
+  border-top-color: var(--glass-border);
+  background: var(--glass-panel-strong);
 }
 
 .navIconBtn {
@@ -463,12 +463,12 @@
 }
 
 .navIconBtn:hover {
-  background: rgba(0,0,0,0.05);
+  background: var(--glass-bg-light);
   color: var(--foreground);
 }
 
 [data-theme='dark'] .navIconBtn:hover {
-  background: rgba(255,255,255,0.065);
+  background: var(--glass-bg-medium);
 }
 
 /* ═══════════════════════════════════════════════
@@ -491,14 +491,14 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: rgba(255, 255, 255, 0.72);
+  background: var(--glass-input-bg-hover);
   backdrop-filter: blur(22px) saturate(1.05);
   -webkit-backdrop-filter: blur(22px) saturate(1.05);
   border-radius: 16px;
-  box-shadow: 0 4px 24px -2px rgba(0,0,0,0.03),
-              0 2px 8px -1px rgba(0,0,0,0.015);
+  box-shadow: 0 4px 24px -2px var(--glass-shadow-subtle),
+              0 2px 8px -1px var(--glass-bg-subtle);
   overflow: hidden;
-  border: 1px solid rgba(15,23,42,0.06);
+  border: 1px solid var(--glass-border);
   transition:
     border-color 0.18s ease,
     box-shadow 0.22s ease,
@@ -507,10 +507,10 @@
 }
 
 [data-theme='dark'] .workspace {
-  background: rgba(36, 36, 44, 0.84);
-  border-color: rgba(0,0,0,0.18);
+  background: var(--glass-panel);
+  border-color: var(--glass-border-heavy);
   box-shadow:
-    0 14px 36px rgba(0,0,0,0.12);
+    0 14px 36px var(--glass-bg-heavy);
 }
 
 .workspaceWithRunCard {
@@ -522,14 +522,14 @@
   align-items: center;
   gap: 10px;
   padding: 10px 16px;
-  border-bottom: 1px solid rgba(0,0,0,0.04);
+  border-bottom: 1px solid var(--glass-border-subtle);
   flex-shrink: 0;
   font-size: var(--font-size-sm);
   font-weight: 430;
 }
 
 [data-theme='dark'] .workspaceHeader {
-  border-bottom-color: rgba(255,255,255,0.038);
+  border-bottom-color: var(--glass-border-subtle);
 }
 
 .workspaceHeader h2 {
@@ -576,7 +576,7 @@
 }
 
 .workspaceHeaderBtn:hover {
-  background: rgba(0,0,0,0.05);
+  background: var(--glass-bg-light);
   color: var(--foreground);
 }
 
@@ -597,7 +597,7 @@
   min-width: 15px;
   height: 15px;
   padding: 0 4px;
-  border: 1px solid rgba(255, 255, 255, 0.72);
+  border: 1px solid var(--glass-input-bg-hover);
   border-radius: 999px;
   background: var(--destructive);
   color: var(--destructive-foreground);
@@ -607,7 +607,7 @@
 }
 
 [data-theme='dark'] .iconBadge {
-  border-color: rgba(31, 31, 39, 0.92);
+  border-color: var(--glass-panel-strong);
 }
 
 .workspaceHeaderBtn:active {
@@ -615,7 +615,7 @@
 }
 
 [data-theme='dark'] .workspaceHeaderBtn:hover {
-  background: rgba(255,255,255,0.06);
+  background: var(--glass-bg-medium);
 }
 
 .workspaceHeaderDot {
@@ -724,14 +724,14 @@
   background: var(--sidebar-bg);
   border-radius: 14px;
   overflow: hidden;
-  border: 1px solid rgba(0,0,0,0.04);
+  border: 1px solid var(--glass-border-subtle);
 }
 
 [data-theme='dark'] .rightPanel {
-  background: rgba(35,35,45,0.55);
+  background: var(--glass-panel);
   backdrop-filter: blur(40px) saturate(1.2);
   -webkit-backdrop-filter: blur(40px) saturate(1.2);
-  border-color: rgba(255,255,255,0.06);
+  border-color: var(--glass-border);
 }
 
 .rightPanelHeader {
@@ -740,7 +740,7 @@
   gap: 6px;
   padding: 6px;
   flex-shrink: 0;
-  border-bottom: 1px solid rgba(0,0,0,0.04);
+  border-bottom: 1px solid var(--glass-border-subtle);
   position: relative;
   z-index: 2;
 }
@@ -750,7 +750,7 @@
   display: flex;
   flex: 1;
   min-width: 0;
-  background: rgba(0,0,0,0.05);
+  background: var(--glass-bg-light);
   border-radius: 8px;
   padding: 2px;
 }
@@ -764,7 +764,7 @@
 }
 
 [data-theme='dark'] .rightPanelSegmented {
-  background: rgba(255,255,255,0.06);
+  background: var(--glass-bg-medium);
 }
 
 .rightPanelTab {
@@ -794,13 +794,13 @@
 .rightPanelTabActive {
   background: var(--card);
   color: var(--foreground);
-  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+  box-shadow: 0 1px 4px var(--glass-shadow-subtle);
 }
 
 [data-theme='dark'] .rightPanelTabActive {
-  background: rgba(255,255,255,0.1);
+  background: var(--glass-bg-heavy);
   color: var(--primary-foreground);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+  box-shadow: 0 1px 3px var(--glass-shadow);
 }
 
 .rightPanelBody {
@@ -823,7 +823,7 @@
   justify-content: space-between;
   height: 36px;
   padding: 0 10px 0 10px;
-  background: rgba(244, 244, 245, 0.72);
+  background: var(--glass-light-fill);
   backdrop-filter: blur(24px) saturate(1.12);
   -webkit-backdrop-filter: blur(24px) saturate(1.12);
   flex-shrink: 0;
@@ -833,8 +833,8 @@
 }
 
 [data-theme='dark'] .topBar {
-  background: rgba(28, 28, 36, 0.88);
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
+  background: var(--glass-panel-strong);
+  box-shadow: 0 1px 0 var(--glass-shadow);
 }
 
 .topBarLeft, .topBarRight {
@@ -859,12 +859,12 @@
 }
 
 .topBarSidebarBtn:hover {
-  background: rgba(0,0,0,0.045);
+  background: var(--glass-bg-light);
   color: var(--foreground);
 }
 
 [data-theme='dark'] .topBarSidebarBtn:hover {
-  background: rgba(255,255,255,0.06);
+  background: var(--glass-bg-medium);
 }
 
 .topBarSidebarBtn:active {
@@ -876,7 +876,7 @@
   align-items: center;
   gap: 1px;
   margin-left: 2px;
-  color: rgba(176, 176, 181, 0.72);
+  color: var(--glass-text-muted);
 }
 
 .topBarNavBtn {
@@ -889,9 +889,9 @@
 }
 
 .topBarNavBtnAccent {
-  background: rgba(93, 104, 204, 0.96);
+  background: var(--glass-tint-plum);
   color: var(--primary-foreground);
-  box-shadow: 0 4px 12px rgba(93, 104, 204, 0.26);
+  box-shadow: 0 4px 12px var(--glass-tint-plum);
 }
 
 .appMenu {
@@ -927,13 +927,13 @@
 
 .appMenu .topMenuTrigger:hover,
 .appMenu .topMenuTriggerActive {
-  background: rgba(15,23,42,0.052);
+  background: var(--glass-bg-medium);
   color: color-mix(in oklch, var(--foreground) 82%, var(--muted-foreground) 18%);
 }
 
 [data-theme='dark'] .appMenu .topMenuTrigger:hover,
 [data-theme='dark'] .appMenu .topMenuTriggerActive {
-  background: rgba(255,255,255,0.048);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground) 22%);
 }
 
@@ -952,22 +952,22 @@
   min-width: 236px;
   max-width: min(340px, calc(100vw - 24px));
   padding: 5px 0;
-  border: 1px solid rgba(0, 0, 0, 0.16);
+  border: 1px solid var(--glass-border-heavy);
   border-radius: 15px;
-  background: rgba(26, 26, 32, 0.96);
+  background: var(--glass-panel-overlay);
   box-shadow:
-    0 22px 52px rgba(0,0,0,0.28),
-    0 6px 18px rgba(0,0,0,0.14);
+    0 22px 52px var(--glass-shadow),
+    0 6px 18px var(--glass-shadow-subtle);
   backdrop-filter: blur(18px) saturate(1.03);
   -webkit-backdrop-filter: blur(18px) saturate(1.03);
 }
 
 [data-theme='light'] .topMenuPanel {
-  border-color: rgba(0,0,0,0.07);
-  background: rgba(248,248,250,0.96);
+  border-color: var(--glass-border);
+  background: var(--glass-light-fill);
   box-shadow:
-    0 18px 44px rgba(15,23,42,0.11),
-    0 6px 16px rgba(15,23,42,0.055);
+    0 18px 44px var(--glass-shadow-subtle),
+    0 6px 16px var(--glass-shadow-subtle);
 }
 
 .topMenuItemWrap {
@@ -977,11 +977,11 @@
 .topMenuSeparator {
   height: 1px;
   margin: 5px 0;
-  background: rgba(255,255,255,0.045);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='light'] .topMenuSeparator {
-  background: rgba(15,23,42,0.1);
+  background: var(--glass-bg-heavy);
 }
 
 .appMenu .topMenuItem {
@@ -1007,12 +1007,12 @@
 .appMenu .topMenuItem:hover:not(:disabled),
 .appMenu .topMenuItem:focus-visible:not(:disabled) {
   outline: none;
-  background: rgba(255,255,255,0.062);
+  background: var(--glass-bg-medium);
 }
 
 [data-theme='light'] .appMenu .topMenuItem:hover:not(:disabled),
 [data-theme='light'] .appMenu .topMenuItem:focus-visible:not(:disabled) {
-  background: rgba(15,23,42,0.055);
+  background: var(--glass-bg-medium);
 }
 
 .appMenu .topMenuItem:disabled {
@@ -1100,7 +1100,7 @@
 }
 
 .topBarBtn:hover {
-  background: rgba(0,0,0,0.05);
+  background: var(--glass-bg-light);
   color: var(--foreground);
 }
 
@@ -1126,7 +1126,7 @@
   transition: background 0.12s, color 0.12s;
 }
 
-.winBtn:hover { background: rgba(0,0,0,0.05); color: var(--foreground); }
+.winBtn:hover { background: var(--glass-bg-light); color: var(--foreground); }
 .winBtnClose:hover { background: var(--destructive); color: var(--destructive-foreground); }
 
 /* ═══════════════════════════════════════════════
@@ -1138,7 +1138,7 @@
   align-items: center;
   gap: 8px;
   padding: 6px 12px;
-  background: rgba(255, 255, 255, 0.065);
+  background: var(--glass-bg-medium);
   border-bottom: 1px solid var(--border);
   color: var(--text-primary);
   font-size: 12px;
@@ -1154,13 +1154,13 @@
   cursor: pointer;
   font-size: 11px;
 }
-.bannerBtn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.075); }
+.bannerBtn:hover:not(:disabled) { background: var(--glass-bg-medium); }
 
 .modalOverlay {
   position: fixed;
   inset: 0;
   z-index: var(--z-overlay);
-  background: rgba(0,0,0,0.22);
+  background: var(--glass-shadow);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   display: flex;
@@ -1170,13 +1170,13 @@
 
 .authModal {
   background:
-    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.68)),
+    linear-gradient(180deg, var(--glass-input-bg-hover), rgba(255,255,255,0.68)),
     rgba(248, 249, 252, 0.92);
-  border: 1px solid rgba(15,23,42,0.08);
+  border: 1px solid var(--glass-border-strong);
   border-radius: 16px;
   box-shadow:
     0 18px 56px rgba(15,23,42,0.16),
-    inset 0 1px 0 rgba(255,255,255,0.72);
+    inset 0 1px 0 var(--glass-input-bg-hover);
   backdrop-filter: blur(28px) saturate(1.08);
   -webkit-backdrop-filter: blur(28px) saturate(1.08);
   max-height: 90vh;
@@ -1185,12 +1185,12 @@
 
 [data-theme='dark'] .authModal {
   background:
-    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
-    rgba(37, 37, 45, 0.88);
-  border-color: rgba(255,255,255,0.075);
+    linear-gradient(180deg, var(--glass-bg-light), var(--glass-bg-subtle)),
+    var(--glass-panel-strong);
+  border-color: var(--glass-border);
   box-shadow:
-    0 18px 56px rgba(0,0,0,0.28),
-    inset 0 1px 0 rgba(255,255,255,0.045);
+    0 18px 56px var(--glass-shadow),
+    inset 0 1px 0 var(--glass-bg-light);
 }
 
 .sidebarBrand {
@@ -1219,7 +1219,7 @@
   position: fixed;
   inset: 0;
   z-index: var(--z-overlay);
-  background: rgba(0,0,0,0.25);
+  background: var(--glass-shadow);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s;
@@ -1232,15 +1232,15 @@
   width: 280px;
   transform: translateX(-100%);
   transition: transform 0.25s var(--ease-out);
-  background: rgba(250,250,251,0.92);
+  background: var(--glass-light-fill);
   backdrop-filter: blur(24px) saturate(1.1);
   -webkit-backdrop-filter: blur(24px) saturate(1.1);
-  border-right: 1px solid rgba(0,0,0,0.06);
+  border-right: 1px solid var(--glass-border);
 }
 
 [data-theme='dark'] .overlayPanelLeft {
-  background: rgba(28,28,36,0.92);
-  border-right-color: rgba(255,255,255,0.08);
+  background: var(--glass-panel-strong);
+  border-right-color: var(--glass-border);
 }
 .overlayPanelLeftActive { transform: translateX(0); }
 
@@ -1334,7 +1334,7 @@
 }
 
 .banner {
-  background: rgba(255, 255, 255, 0.065);
+  background: var(--glass-bg-medium);
   border-bottom-color: var(--border);
   color: var(--text-primary);
 }
@@ -1345,5 +1345,5 @@
 }
 
 .bannerBtn:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.075);
+  background: var(--glass-bg-medium);
 }
diff --git a/app/desktop/src/components/AgentList.module.css b/app/desktop/src/components/AgentList.module.css
index 2760f84f6..436c2be0e 100644
--- a/app/desktop/src/components/AgentList.module.css
+++ b/app/desktop/src/components/AgentList.module.css
@@ -32,7 +32,7 @@
   height: 20px;
   padding: 0 8px;
   border-radius: 999px;
-  background: rgba(0,0,0,0.045);
+  background: var(--glass-bg-light);
   color: var(--text-weaker);
   font-size: 11px;
   font-weight: 500;
@@ -40,7 +40,7 @@
 }
 
 [data-theme='dark'] .countPill {
-  background: rgba(255,255,255,0.052);
+  background: var(--glass-bg-medium);
 }
 
 .searchWrapper,
@@ -80,7 +80,7 @@
 }
 
 .item:hover {
-  background: rgba(15,23,42,0.045);
+  background: var(--glass-bg-light);
 }
 
 .item:disabled {
@@ -90,13 +90,13 @@
 
 .selected {
   border-color: transparent;
-  background: rgba(15,23,42,0.038);
+  background: var(--glass-bg-light);
   color: var(--text-strong);
   box-shadow: none;
 }
 
 .selected:hover {
-  background: rgba(15,23,42,0.052);
+  background: var(--glass-bg-medium);
 }
 
 [data-theme='dark'] .item {
@@ -104,18 +104,18 @@
 }
 
 [data-theme='dark'] .item:hover {
-  background: rgba(255,255,255,0.045);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='dark'] .selected {
   border-color: transparent;
-  background: rgba(255,255,255,0.034);
+  background: var(--glass-bg-subtle);
   color: var(--text-strong);
   box-shadow: none;
 }
 
 [data-theme='dark'] .selected:hover {
-  background: rgba(255,255,255,0.052);
+  background: var(--glass-bg-medium);
 }
 
 .avatar {
@@ -126,7 +126,7 @@
   flex-shrink: 0;
   place-items: center;
   border-radius: 8px;
-  background: rgba(0,0,0,0.045);
+  background: var(--glass-bg-light);
   color: var(--text-weaker);
 }
 
@@ -145,7 +145,7 @@
 }
 
 [data-theme='dark'] .avatar {
-  background: rgba(255,255,255,0.052);
+  background: var(--glass-bg-medium);
 }
 
 .statusDot {
@@ -255,7 +255,7 @@
 
 /* ── Highlight ─────────────────────────────── */
 .highlight {
-  background: rgba(99,102,241,0.15);
+  background: var(--glass-tint-plum);
   color: var(--primary);
   border-radius: 2px;
   padding: 0 1px;
diff --git a/app/desktop/src/components/ApprovalCard.module.css b/app/desktop/src/components/ApprovalCard.module.css
index cbeea8a80..6fbe6c921 100644
--- a/app/desktop/src/components/ApprovalCard.module.css
+++ b/app/desktop/src/components/ApprovalCard.module.css
@@ -70,24 +70,24 @@
 }
 
 .riskLow {
-  background: rgba(105, 201, 103, 0.12);
+  background: var(--glass-tint-moss);
   color: var(--success);
 }
 
 .riskMedium {
-  background: rgba(251, 191, 36, 0.12);
+  background: var(--glass-tint-amber);
   color: var(--warning);
 }
 
 .riskHigh {
-  background: rgba(239, 68, 68, 0.12);
+  background: var(--glass-tint-danger);
   color: var(--destructive);
 }
 
 .riskCritical {
-  background: rgba(220, 38, 38, 0.18);
+  background: var(--glass-tint-danger);
   color: var(--destructive);
-  border: 1px solid rgba(248, 113, 113, 0.3);
+  border: 1px solid var(--glass-tint-danger);
 }
 
 .statusBadge {
@@ -101,25 +101,25 @@
 
 .statusBadge.statusPending {
   border: none;
-  background: rgba(251, 191, 36, 0.12);
+  background: var(--glass-tint-amber);
   color: var(--warning);
 }
 
 .statusBadge.statusApproved {
   border: none;
-  background: rgba(105, 201, 103, 0.12);
+  background: var(--glass-tint-moss);
   color: var(--success);
 }
 
 .statusBadge.statusDenied {
   border: none;
-  background: rgba(239, 68, 68, 0.12);
+  background: var(--glass-tint-danger);
   color: var(--destructive);
 }
 
 .statusBadge.statusTimeout {
   border: none;
-  background: rgba(160, 161, 170, 0.12);
+  background: var(--glass-bg-heavy);
   color: var(--muted-foreground);
 }
 
@@ -215,12 +215,12 @@
 }
 
 .approveBtn {
-  background: rgba(105, 201, 103, 0.15);
+  background: var(--glass-tint-moss);
   color: var(--success);
 }
 
 .approveBtn:hover {
-  background: rgba(105, 201, 103, 0.25);
+  background: var(--glass-tint-moss);
 }
 
 .approveBtn:disabled {
@@ -229,12 +229,12 @@
 }
 
 .denyBtn {
-  background: rgba(239, 68, 68, 0.12);
+  background: var(--glass-tint-danger);
   color: var(--destructive);
 }
 
 .denyBtn:hover {
-  background: rgba(239, 68, 68, 0.22);
+  background: var(--glass-tint-danger);
 }
 
 .denyBtn:disabled {
diff --git a/app/desktop/src/components/ArtifactBrowser.module.css b/app/desktop/src/components/ArtifactBrowser.module.css
index e59f695e0..9cf726a92 100644
--- a/app/desktop/src/components/ArtifactBrowser.module.css
+++ b/app/desktop/src/components/ArtifactBrowser.module.css
@@ -13,14 +13,14 @@
   gap: 8px;
   min-height: 36px;
   padding: 6px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
+  border-bottom: 1px solid var(--glass-border);
   color: var(--muted-foreground);
   font-size: 12px;
   opacity: 0.72;
 }
 
 [data-theme='light'] .emptyCard {
-  border-bottom-color: rgba(0, 0, 0, 0.055);
+  border-bottom-color: var(--glass-border);
 }
 
 /* ── Category tabs ── */
@@ -29,11 +29,11 @@
   flex-wrap: wrap;
   gap: 3px;
   padding: 4px 0 6px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
+  border-bottom: 1px solid var(--glass-border-subtle);
 }
 
 [data-theme='light'] .tabBar {
-  border-bottom-color: rgba(0, 0, 0, 0.055);
+  border-bottom-color: var(--glass-border);
 }
 
 .tab {
@@ -53,12 +53,12 @@
 }
 
 .tab:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 
 .tabActive {
-  background: rgba(93, 104, 204, 0.15);
+  background: var(--glass-tint-plum);
   color: var(--foreground);
 }
 
@@ -84,20 +84,20 @@
   justify-content: space-between;
   gap: 4px;
   padding: 4px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid var(--glass-border-subtle);
   transition: background 0.1s;
 }
 
 [data-theme='light'] .artifactRow {
-  border-bottom-color: rgba(0, 0, 0, 0.035);
+  border-bottom-color: var(--glass-border-subtle);
 }
 
 .artifactRow:hover {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--glass-bg-subtle);
 }
 
 .artifactRowActive {
-  background: rgba(93, 104, 204, 0.08);
+  background: var(--glass-tint-plum);
 }
 
 .artifactInfo {
@@ -138,7 +138,7 @@
   flex-shrink: 0;
   padding: 1px 4px;
   border-radius: 3px;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-light);
 }
 
 .artifactActions {
@@ -164,7 +164,7 @@
 }
 
 .artifactBtn:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 
@@ -183,14 +183,14 @@
 /* ── Preview overlay ── */
 .previewOverlay {
   margin-top: 6px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  border-top: 1px solid var(--glass-border);
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
 [data-theme='light'] .previewOverlay {
-  border-top-color: rgba(0, 0, 0, 0.06);
+  border-top-color: var(--glass-border);
 }
 
 .previewHeader {
@@ -224,9 +224,9 @@
   align-items: center;
   gap: 4px;
   padding: 3px 7px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--glass-border);
   border-radius: 5px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--glass-bg-subtle);
   color: var(--text-weakest);
   font-size: 10px;
   font-family: var(--font-sans);
@@ -235,17 +235,17 @@
 }
 
 .previewBtn:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 
 [data-theme='light'] .previewBtn {
-  border-color: rgba(0, 0, 0, 0.08);
-  background: rgba(0, 0, 0, 0.03);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-subtle);
 }
 
 [data-theme='light'] .previewBtn:hover {
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--glass-bg-medium);
 }
 
 .previewBody {
@@ -261,7 +261,7 @@
   align-items: center;
   justify-content: center;
   min-height: 100px;
-  background: rgba(0, 0, 0, 0.03);
+  background: var(--glass-bg-subtle);
   border-radius: 6px;
   overflow: hidden;
 }
@@ -277,7 +277,7 @@
   min-height: 200px;
   border-radius: 6px;
   overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--glass-border);
 }
 
 .previewIframe {
@@ -296,7 +296,7 @@
 .previewCode {
   margin: 0;
   padding: 10px 12px;
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--glass-bg-light);
   border-radius: 6px;
   font-size: 11px;
   font-family: var(--font-mono);
@@ -307,7 +307,7 @@
 }
 
 [data-theme='dark'] .previewCode {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--glass-bg-subtle);
 }
 
 /* ── Placeholder ── */
diff --git a/app/desktop/src/components/AuthPage.module.css b/app/desktop/src/components/AuthPage.module.css
index 69a6e5d99..e6ccf2b1b 100644
--- a/app/desktop/src/components/AuthPage.module.css
+++ b/app/desktop/src/components/AuthPage.module.css
@@ -26,7 +26,7 @@
   transition: background 0.15s;
 }
 
-.closeBtn:hover { background: rgba(0, 0, 0, 0.05); }
+.closeBtn:hover { background: var(--glass-bg-light); }
 
 .header {
   text-align: center;
@@ -43,7 +43,7 @@
   margin-inline: auto;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.42),
-    0 12px 28px rgba(0, 113, 188, 0.18);
+    0 12px 28px var(--glass-tint-sky);
 }
 
 .appName {
@@ -60,7 +60,7 @@
 
 .tabs {
   display: flex;
-  background: rgba(0, 0, 0, 0.05);
+  background: var(--glass-bg-light);
   border-radius: 8px;
   padding: 2px;
   margin-bottom: 18px;
@@ -82,7 +82,7 @@
 .tabActive {
   background: var(--card);
   color: var(--foreground);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 6px var(--glass-shadow-subtle);
 }
 
 .body {
@@ -107,7 +107,7 @@
   padding: 10px 14px;
   border: none;
   border-radius: 10px;
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--glass-bg-light);
   color: var(--foreground);
   font-size: 14px;
   font-family: var(--font-sans);
@@ -121,12 +121,12 @@
 .input::placeholder { color: var(--text-weakest); }
 
 .input:focus {
-  background: rgba(0, 0, 0, 0.02);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  background: var(--glass-bg-subtle);
+  box-shadow: 0 0 0 3px var(--glass-tint-plum);
 }
 
 .input:disabled { opacity: 0.5; }
-.inputError { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3); }
+.inputError { box-shadow: 0 0 0 1px var(--glass-tint-danger); }
 
 .passwordWrapper {
   position: relative;
@@ -158,7 +158,7 @@
 .errorBanner {
   padding: 8px 12px;
   border-radius: 8px;
-  background: rgba(239, 68, 68, 0.06);
+  background: var(--glass-tint-danger);
   color: var(--destructive);
   font-size: 12px;
   display: flex;
@@ -199,7 +199,7 @@
 
 .identityDivider span {
   height: 1px;
-  background: rgba(0, 0, 0, 0.08);
+  background: var(--glass-bg-strong);
 }
 
 .identityDivider strong {
@@ -212,11 +212,11 @@
   border: 1px solid rgba(255, 255, 255, 0.64);
   border-radius: 12px;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68)),
-    rgba(255, 255, 255, 0.72);
+    linear-gradient(180deg, var(--glass-input-bg-hover), rgba(255, 255, 255, 0.68)),
+    var(--glass-input-bg-hover);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.95),
-    0 10px 28px rgba(15, 23, 42, 0.08);
+    inset 0 1px 0 var(--glass-input-bg-hover),
+    0 10px 28px var(--glass-bg-strong);
   color: #111827;
   font-size: 14px;
   font-weight: 650;
@@ -230,18 +230,18 @@
 }
 
 .identityButton:hover {
-  border-color: rgba(0, 122, 255, 0.28);
+  border-color: var(--glass-tint-sky);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.95),
-    0 12px 32px rgba(0, 122, 255, 0.12);
+    inset 0 1px 0 var(--glass-input-bg-hover),
+    0 12px 32px var(--glass-tint-sky);
 }
 
 .identityButton:focus-visible {
   outline: none;
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.95),
-    0 0 0 3px rgba(0, 122, 255, 0.16),
-    0 12px 32px rgba(0, 122, 255, 0.12);
+    inset 0 1px 0 var(--glass-input-bg-hover),
+    0 0 0 3px var(--glass-tint-sky),
+    0 12px 32px var(--glass-tint-sky);
 }
 
 .identityButton:disabled {
@@ -266,9 +266,9 @@
 
 .identityNotice {
   padding: 9px 11px;
-  border: 1px solid rgba(0, 122, 255, 0.16);
+  border: 1px solid var(--glass-tint-sky);
   border-radius: 10px;
-  background: rgba(0, 122, 255, 0.07);
+  background: var(--glass-tint-sky);
   color: var(--primary);
   font-size: 12px;
   line-height: 1.45;
@@ -349,7 +349,7 @@
   padding: 8px 12px;
   border: none;
   border-radius: 8px;
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--glass-bg-light);
   color: var(--foreground);
   font-size: 13px;
   font-family: var(--font-mono);
@@ -358,7 +358,7 @@
 }
 
 .hubInput:focus {
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  box-shadow: 0 0 0 3px var(--glass-tint-plum);
 }
 
 .hubStatus {
diff --git a/app/desktop/src/components/ChatView.module.css b/app/desktop/src/components/ChatView.module.css
index 9e1e6cd35..682a68fdf 100644
--- a/app/desktop/src/components/ChatView.module.css
+++ b/app/desktop/src/components/ChatView.module.css
@@ -90,22 +90,22 @@
   margin-left: 0;
   margin-right: 0;
   background:
-    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.003)),
+    linear-gradient(180deg, var(--glass-bg-subtle), var(--glass-bg-subtle)),
     var(--input-panel-bg);
   color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground) 26%);
-  border: 1px solid rgba(0, 0, 0, 0.04);
+  border: 1px solid var(--glass-border-subtle);
   border-radius: 18px;
   padding: 9px 13px 10px;
   box-shadow:
-    0 8px 20px rgba(0, 0, 0, 0.045),
-    0 1px 3px rgba(0, 0, 0, 0.055);
+    0 8px 20px var(--glass-shadow-subtle),
+    0 1px 3px var(--glass-shadow-subtle);
 }
 
 [data-theme='light'] .userMsg {
   background:
-    linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.52)),
+    linear-gradient(180deg, rgba(255,255,255,0.64), var(--glass-input-bg)),
     var(--input-panel-bg);
-  border-color: rgba(15, 23, 42, 0.02);
+  border-color: var(--glass-border-subtle);
 }
 
 .userAttachmentList {
@@ -127,9 +127,9 @@
   max-width: 100%;
   min-height: 34px;
   padding: 6px 8px;
-  border: 1px solid rgba(255, 255, 255, 0.065);
+  border: 1px solid var(--glass-border);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-light);
 }
 
 .userAttachmentChip svg {
@@ -165,8 +165,8 @@
 }
 
 [data-theme='light'] .userAttachmentChip {
-  border-color: rgba(15, 23, 42, 0.08);
-  background: rgba(15, 23, 42, 0.035);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-subtle);
 }
 
 .longTextBlock {
@@ -179,9 +179,9 @@
   min-height: 28px;
   margin-top: 6px;
   padding: 4px 9px;
-  border: 1px solid rgba(255, 255, 255, 0.065);
+  border: 1px solid var(--glass-border);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.035);
+  background: var(--glass-bg-subtle);
   color: var(--muted-foreground);
   font-family: var(--font-sans);
   font-size: 12px;
@@ -192,18 +192,18 @@
 .longTextToggle:hover,
 .longTextToggle:focus-visible {
   outline: none;
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
   color: color-mix(in oklch, var(--foreground) 90%, var(--muted-foreground) 10%);
 }
 
 [data-theme='light'] .longTextToggle {
-  border-color: rgba(15, 23, 42, 0.08);
-  background: rgba(15, 23, 42, 0.035);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-subtle);
 }
 
 [data-theme='light'] .longTextToggle:hover,
 [data-theme='light'] .longTextToggle:focus-visible {
-  background: rgba(15, 23, 42, 0.055);
+  background: var(--glass-bg-medium);
 }
 
 /* Agent: pure text on canvas, no background */
@@ -269,8 +269,8 @@
   width: 100%;
   min-height: 38px;
   padding: 6px 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  background: rgba(251, 191, 36, 0.12);
+  border-bottom: 1px solid var(--glass-border);
+  background: var(--glass-tint-amber);
   color: var(--warning);
   font-size: 13px;
   line-height: 1.45;
@@ -279,12 +279,12 @@
 }
 
 .connectionBannerReconnecting {
-  background: rgba(251, 191, 36, 0.1);
+  background: var(--glass-tint-amber);
   color: var(--warning);
 }
 
 .connectionBannerFailed {
-  background: rgba(239, 68, 68, 0.1);
+  background: var(--glass-tint-danger);
   color: var(--destructive);
 }
 
@@ -336,7 +336,7 @@
 }
 
 .connectionBannerBtn:hover {
-  background: rgba(239, 68, 68, 0.12);
+  background: var(--glass-tint-danger);
   border-color: var(--destructive);
 }
 
@@ -362,19 +362,19 @@
 
 .connectionBannerDismiss:hover {
   opacity: 1;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg-hover);
 }
 
 [data-theme='light'] .connectionBanner {
-  border-bottom-color: rgba(15, 23, 42, 0.06);
+  border-bottom-color: var(--glass-border);
 }
 
 [data-theme='light'] .connectionBannerReconnecting {
-  background: rgba(251, 191, 36, 0.12);
+  background: var(--glass-tint-amber);
 }
 
 [data-theme='light'] .connectionBannerFailed {
-  background: rgba(239, 68, 68, 0.08);
+  background: var(--glass-tint-danger);
 }
 
 [data-theme='light'] .connectionBannerBtn {
@@ -382,11 +382,11 @@
 }
 
 [data-theme='light'] .connectionBannerBtn:hover {
-  background: rgba(239, 68, 68, 0.1);
+  background: var(--glass-tint-danger);
 }
 
 [data-theme='light'] .connectionBannerDismiss:hover {
-  background: rgba(15, 23, 42, 0.04);
+  background: var(--glass-bg-hover);
 }
 
 @keyframes bannerSlideIn {
@@ -439,7 +439,7 @@
   width: 18px;
   height: 18px;
   border-radius: 6px;
-  background: rgba(255,255,255,0.032);
+  background: var(--glass-bg-subtle);
   color: color-mix(in oklch, var(--muted-foreground) 82%, transparent);
   display: flex;
   align-items: center;
@@ -467,7 +467,7 @@
 }
 
 [data-theme='light'] .avatarCircle {
-  background: rgba(0,0,0,0.045);
+  background: var(--glass-bg-light);
 }
 
 .agentNameLabel {
@@ -567,7 +567,7 @@
 }
 
 .actionBtn:hover {
-  background: rgba(255,255,255,0.045);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground) 12%);
 }
 
@@ -578,9 +578,9 @@
 .viewFullDiff:focus-visible,
 .copyBtn:focus-visible {
   outline: none;
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground) 12%);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
+  box-shadow: inset 0 0 0 1px var(--glass-bg-heavy);
 }
 
 :global([data-theme='light']) .actionBtn:focus-visible,
@@ -589,8 +589,8 @@
 :global([data-theme='light']) .thinkingToggle:focus-visible,
 :global([data-theme='light']) .viewFullDiff:focus-visible,
 :global([data-theme='light']) .copyBtn:focus-visible {
-  background: rgba(0, 0, 0, 0.04);
-  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
+  background: var(--glass-bg-light);
+  box-shadow: inset 0 0 0 1px var(--glass-shadow-subtle);
 }
 
 :global(html[data-focus-source='pointer']) .actionBtn:focus-visible,
@@ -609,13 +609,13 @@
   min-height: 24px;
   padding: 2px 3px 2px 8px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.036);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.052);
+  background: var(--glass-bg-light);
+  box-shadow: inset 0 0 0 1px var(--glass-bg-medium);
 }
 
 :global([data-theme='light']) .deleteConfirmBar {
-  background: rgba(15, 23, 42, 0.035);
-  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.045);
+  background: var(--glass-bg-subtle);
+  box-shadow: inset 0 0 0 1px var(--glass-shadow-subtle);
 }
 
 .deleteConfirmText {
@@ -651,12 +651,12 @@
 }
 
 .deleteCancelBtn:hover {
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--foreground) 80%, var(--text-weaker) 20%);
 }
 
 :global([data-theme='light']) .deleteCancelBtn:hover {
-  background: rgba(15, 23, 42, 0.045);
+  background: var(--glass-bg-light);
 }
 
 .deleteConfirmBtn {
@@ -695,7 +695,7 @@
 }
 
 .thinkingToggle:hover {
-  background: rgba(255, 255, 255, 0.032);
+  background: var(--glass-bg-subtle);
   color: var(--muted-foreground);
 }
 
@@ -730,7 +730,7 @@
   width: min(100%, 680px);
   margin: 3px 0 8px 10px;
   padding: 2px 0 2px 12px;
-  border-left: 1px solid rgba(255, 255, 255, 0.075);
+  border-left: 1px solid var(--glass-border);
   font-size: 12.5px;
   font-family: var(--font-sans);
   line-height: 1.56;
@@ -742,7 +742,7 @@
 }
 
 [data-theme='light'] .thinkingContent {
-  border-left-color: rgba(15, 23, 42, 0.12);
+  border-left-color: var(--glass-border-strong);
 }
 
 /* ── File change ─────────────────────────── */
@@ -777,7 +777,7 @@
 
 .fileChangeHeader:hover,
 .fileChangeHeader:focus-visible {
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--foreground) 82%, transparent);
   outline: none;
 }
@@ -844,9 +844,9 @@
   padding: 8px 10px;
   max-height: 260px;
   overflow: auto;
-  border: 1px solid rgba(255, 255, 255, 0.055);
+  border: 1px solid var(--glass-border);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.018);
+  background: var(--glass-bg-subtle);
   color: color-mix(in oklch, var(--foreground) 72%, transparent);
   font-family: var(--font-mono);
   font-size: 12px;
@@ -889,18 +889,18 @@
   width: min(100%, 680px);
   margin: 4px 0;
   padding: 10px 12px;
-  border: 1px solid rgba(255, 255, 255, 0.095);
+  border: 1px solid var(--glass-border-strong);
   border-radius: 9px;
-  background: rgba(255, 255, 255, 0.038);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--foreground) 84%, var(--muted-foreground) 16%);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;
+  box-shadow: 0 1px 0 var(--glass-bg-subtle) inset;
 }
 
 [data-theme='light'] .agentTaskBlock,
 [data-theme='light'] .childAgentBlock,
 [data-theme='light'] .routeDecisionBlock {
-  border-color: rgba(15, 23, 42, 0.095);
-  background: rgba(15, 23, 42, 0.035);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-subtle);
 }
 
 .agentTaskHeader,
@@ -1045,7 +1045,7 @@
 }
 
 .statusRowHeader:hover {
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   color: var(--foreground);
 }
 
@@ -1081,7 +1081,7 @@
   min-height: 22px;
   padding: 2px 7px 3px;
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-light);
   color: var(--muted-foreground);
   font-size: 12px;
   line-height: 1.45;
@@ -1155,7 +1155,7 @@
   min-height: 18px;
   padding: 0 6px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
   color: var(--muted-foreground);
   font-size: 11px;
   font-weight: 520;
@@ -1164,7 +1164,7 @@
 
 [data-theme='light'] .contextUsagePercent,
 [data-theme='light'] .contextUsageThreshold {
-  background: rgba(15, 23, 42, 0.052);
+  background: var(--glass-bg-medium);
 }
 
 .contextUsageWarning .contextUsagePercent {
@@ -1178,11 +1178,11 @@
   margin: 7px 0 0;
   overflow: hidden;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.075);
+  background: var(--glass-bg-medium);
 }
 
 [data-theme='light'] .contextUsageBar {
-  background: rgba(15, 23, 42, 0.075);
+  background: var(--glass-bg-strong);
 }
 
 .contextUsageBar::before {
@@ -1246,14 +1246,14 @@
   padding: 7px 8px 7px 12px;
   border-left: 3px solid var(--muted-foreground);
   border-radius: 0 4px 4px 0;
-  background: rgba(255, 255, 255, 0.025);
+  background: var(--glass-bg-subtle);
   color: var(--muted-foreground);
   font-size: 13px;
   line-height: 1.45;
 }
 
 [data-theme='light'] .errorBlock {
-  background: rgba(15, 23, 42, 0.028);
+  background: var(--glass-bg-subtle);
 }
 
 /* Category-specific border and icon colors */
@@ -1326,7 +1326,7 @@
   gap: 4px;
   min-height: 24px;
   padding: 2px 8px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--glass-border-strong);
   border-radius: 5px;
   background: transparent;
   color: var(--muted-foreground);
@@ -1338,9 +1338,9 @@
 }
 
 .errorBlockActionBtn:hover {
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
-  border-color: rgba(255, 255, 255, 0.18);
+  border-color: var(--glass-border-heavy);
 }
 
 .errorBlockActionBtn:active {
@@ -1363,20 +1363,20 @@
 
 .errorBlockDismissBtn:hover {
   color: var(--foreground);
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
 }
 
 [data-theme='light'] .errorBlockActionBtn {
-  border-color: rgba(15, 23, 42, 0.086);
+  border-color: var(--glass-border-strong);
 }
 
 [data-theme='light'] .errorBlockActionBtn:hover {
-  background: rgba(15, 23, 42, 0.038);
-  border-color: rgba(15, 23, 42, 0.14);
+  background: var(--glass-bg-light);
+  border-color: var(--glass-border-heavy);
 }
 
 [data-theme='light'] .errorBlockDismissBtn:hover {
-  background: rgba(15, 23, 42, 0.038);
+  background: var(--glass-bg-light);
 }
 
 /* ── Progressive Disclosure ───────────────── */
@@ -1423,7 +1423,7 @@
 }
 .toolUseHeader:hover,
 .toolUseHeader:focus-visible {
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--foreground) 82%, transparent);
   outline: none;
 }
@@ -1485,13 +1485,13 @@
   font-size: 12px;
   font-weight: 520;
   line-height: 1.45;
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   border: 0;
   flex-shrink: 0;
 }
 
 .toolStatusPending {
-  background: rgba(255, 255, 255, 0.075);
+  background: var(--glass-bg-medium);
   color: var(--muted-foreground);
 }
 
@@ -1577,7 +1577,7 @@
 
 .toolGroupHeader:hover,
 .toolGroupHeader:focus-visible {
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--foreground) 82%, transparent);
   outline: none;
 }
@@ -1636,18 +1636,18 @@
 /* ── Diff card �?left-border emphasis, no box ── */
 .diffCard {
   margin: var(--space-xs) 0;
-  border: 1px solid rgba(255, 255, 255, 0.055);
+  border: 1px solid var(--glass-border);
   border-radius: 8px;
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.014);
+  background: var(--glass-bg-subtle);
 }
 .diffCardHeader {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 5px 10px;
-  background: rgba(255, 255, 255, 0.025);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-subtle);
+  border-bottom: 1px solid var(--glass-border-subtle);
   font-size: var(--font-size-xs);
   font-family: var(--font-mono);
 }
@@ -1689,7 +1689,7 @@
   align-items: center;
   gap: 3px;
   padding: 2px 8px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--glass-border-strong);
   border-radius: 5px;
   background: transparent;
   color: var(--muted-foreground);
@@ -1699,9 +1699,9 @@
   transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
 }
 .diffActionBtn:hover {
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
-  border-color: rgba(255, 255, 255, 0.18);
+  border-color: var(--glass-border-heavy);
 }
 .diffActionBtn:active {
   transform: scale(0.97);
@@ -1729,7 +1729,7 @@
   align-items: center;
   gap: 3px;
   padding: 2px 8px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--glass-border-strong);
   border-radius: 5px;
   background: transparent;
   color: var(--muted-foreground);
@@ -1739,7 +1739,7 @@
   transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
 }
 .diffViewToggle:hover {
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 .diffViewToggleActive {
@@ -1779,7 +1779,7 @@
 }
 .diffHunkHeader {
   padding: 2px 8px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--glass-bg-subtle);
   color: var(--text-weaker);
   font-size: 10px;
   font-weight: 520;
@@ -1793,20 +1793,20 @@
 .diffSideBySideCol {
   flex: 1;
   min-width: 0;
-  border-right: 1px solid rgba(255, 255, 255, 0.04);
+  border-right: 1px solid var(--glass-border-subtle);
 }
 .diffSideBySideCol:last-child {
   border-right: none;
 }
 .diffSideBySideHeader {
   padding: 2px 8px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--glass-bg-subtle);
   color: var(--text-weaker);
   font-size: 10px;
   font-weight: 520;
   text-align: center;
   user-select: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  border-bottom: 1px solid var(--glass-border-subtle);
 }
 .diffSideBySideRow {
   display: flex;
@@ -1818,7 +1818,7 @@
   padding: 0 8px;
   white-space: pre;
   overflow-x: auto;
-  border-right: 1px solid rgba(255, 255, 255, 0.04);
+  border-right: 1px solid var(--glass-border-subtle);
 }
 .diffSideBySideCell:last-child {
   border-right: none;
@@ -1827,8 +1827,8 @@
   flex: 1;
   min-width: 0;
   padding: 0 8px;
-  background: rgba(255, 255, 255, 0.015);
-  border-right: 1px solid rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-subtle);
+  border-right: 1px solid var(--glass-border-subtle);
   color: transparent;
   user-select: none;
 }
@@ -1921,8 +1921,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 4px 10px;
-  background: rgba(255, 255, 255, 0.03);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-subtle);
+  border-bottom: 1px solid var(--glass-border-subtle);
 }
 
 .codeLangBadge {
@@ -1989,7 +1989,7 @@
 
 /* ── User msg actionBar tint ──────────────── */
 .userMsg .actionBtn:hover {
-  background: rgba(0,0,0,0.06);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 
@@ -2030,7 +2030,7 @@
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 8px var(--glass-shadow-subtle);
   transition: background var(--duration-fast), transform var(--duration-fast);
 }
 
diff --git a/app/desktop/src/components/ContextUsage.module.css b/app/desktop/src/components/ContextUsage.module.css
index 5a76af2a6..b9039ef15 100644
--- a/app/desktop/src/components/ContextUsage.module.css
+++ b/app/desktop/src/components/ContextUsage.module.css
@@ -5,14 +5,14 @@
 
 .section {
   padding: 8px 0 10px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
+  border-bottom: 1px solid var(--glass-border-subtle);
   display: flex;
   flex-direction: column;
   gap: 7px;
 }
 
 [data-theme='light'] .section {
-  border-bottom-color: rgba(0, 0, 0, 0.055);
+  border-bottom-color: var(--glass-border);
 }
 
 /* ── Context Bar ───────────────────────────── */
@@ -21,12 +21,12 @@
   height: 4px;
   border-radius: var(--radius-full);
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.095);
+  background: var(--glass-bg-strong);
   display: flex;
 }
 
 [data-theme='light'] .bar {
-  background: rgba(0, 0, 0, 0.055);
+  background: var(--glass-bg-medium);
 }
 
 .barWarning {
@@ -121,11 +121,11 @@
   justify-content: space-between;
   align-items: center;
   padding-top: 7px;
-  border-top: 1px solid rgba(255, 255, 255, 0.045);
+  border-top: 1px solid var(--glass-border-subtle);
 }
 
 [data-theme='light'] .costRow {
-  border-top-color: rgba(0, 0, 0, 0.045);
+  border-top-color: var(--glass-border);
 }
 
 .costLabel {
diff --git a/app/desktop/src/components/FileExplorer.module.css b/app/desktop/src/components/FileExplorer.module.css
index 209bb07cd..451408ff4 100644
--- a/app/desktop/src/components/FileExplorer.module.css
+++ b/app/desktop/src/components/FileExplorer.module.css
@@ -166,7 +166,7 @@
   border-radius: 6px;
   padding: 4px 0;
   min-width: 180px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 8px 24px var(--glass-shadow);
 }
 
 .menuItem {
@@ -224,12 +224,12 @@
 }
 
 .gitStatusA {
-  background: var(--diff-added-bg, rgba(70, 149, 74, 0.15));
+  background: var(--diff-added-bg, var(--glass-tint-moss));
   color: var(--diff-added-border, #46954a);
 }
 
 .gitStatusD {
-  background: var(--diff-removed-bg, rgba(229, 83, 75, 0.15));
+  background: var(--diff-removed-bg, var(--glass-tint-danger));
   color: var(--diff-removed-border, #e5534b);
 }
 
@@ -244,7 +244,7 @@
 }
 
 .gitStatusU {
-  background: var(--diff-removed-bg, rgba(229, 83, 75, 0.15));
+  background: var(--diff-removed-bg, var(--glass-tint-danger));
   color: var(--diff-removed-border, #e5534b);
 }
 
diff --git a/app/desktop/src/components/FileSearchDialog.module.css b/app/desktop/src/components/FileSearchDialog.module.css
index 30352f93b..f26f45e50 100644
--- a/app/desktop/src/components/FileSearchDialog.module.css
+++ b/app/desktop/src/components/FileSearchDialog.module.css
@@ -5,7 +5,7 @@
   display: flex;
   justify-content: center;
   padding-top: 15vh;
-  background: rgba(0, 0, 0, 0.32);
+  background: var(--glass-shadow);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
 }
@@ -13,11 +13,11 @@
 .dialog {
   width: min(600px, calc(100vw - 32px));
   max-height: min(68vh, 560px);
-  background: rgba(31, 32, 39, 0.96);
-  border: 1px solid rgba(0, 0, 0, 0.34);
+  background: var(--glass-panel-overlay);
+  border: 1px solid var(--glass-shadow);
   border-radius: 14px;
   box-shadow:
-    0 22px 56px rgba(0, 0, 0, 0.36),
+    0 22px 56px var(--glass-shadow),
     0 4px 16px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   display: flex;
@@ -29,7 +29,7 @@
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
+  border-bottom: 1px solid var(--glass-border);
 }
 
 .searchIcon {
@@ -51,13 +51,13 @@
 
 .kbd {
   padding: 2px 6px 3px;
-  border: 1px solid rgba(255, 255, 255, 0.07);
+  border: 1px solid var(--glass-border);
   border-radius: 6px;
   font-size: 10px;
   font-family: var(--font-sans);
   font-weight: 560;
   color: var(--muted-foreground);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-light);
 }
 
 /* ── Mode tabs ── */
@@ -66,7 +66,7 @@
   display: flex;
   align-items: center;
   gap: 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
+  border-bottom: 1px solid var(--glass-border);
 }
 
 .modeTab {
@@ -117,7 +117,7 @@
 
 .item:hover,
 .selected {
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 
@@ -155,7 +155,7 @@
 .itemPath {
   font-size: 10px;
   line-height: 1.4;
-  color: rgba(255, 255, 255, 0.27);
+  color: var(--glass-text-disabled);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -172,7 +172,7 @@
   font-size: 10px;
   padding: 1px 5px;
   border-radius: 4px;
-  background: rgba(91, 155, 213, 0.15);
+  background: var(--glass-tint-sky);
   color: var(--primary, #5b9bd5);
   white-space: nowrap;
 }
@@ -222,7 +222,7 @@
 
 .highlight {
   color: var(--foreground);
-  background: rgba(255, 213, 79, 0.18);
+  background: var(--glass-tint-amber);
   border-radius: 2px;
   padding: 0 1px;
 }
@@ -230,28 +230,28 @@
 /* ── Light theme ── */
 
 [data-theme='light'] .dialog {
-  background: rgba(250, 250, 252, 0.97);
-  border-color: rgba(15, 23, 42, 0.08);
+  background: var(--glass-light-fill);
+  border-color: var(--glass-border-strong);
   box-shadow:
-    0 22px 56px rgba(15, 23, 42, 0.14),
-    0 4px 16px rgba(15, 23, 42, 0.08);
+    0 22px 56px var(--glass-bg-heavy),
+    0 4px 16px var(--glass-bg-strong);
 }
 
 [data-theme='light'] .inputRow,
 [data-theme='light'] .modeRow {
-  border-bottom-color: rgba(15, 23, 42, 0.075);
+  border-bottom-color: var(--glass-border-strong);
 }
 
 [data-theme='light'] .kbd {
-  border-color: rgba(15, 23, 42, 0.08);
-  background: rgba(15, 23, 42, 0.045);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='light'] .item:hover,
 [data-theme='light'] .selected {
-  background: rgba(15, 23, 42, 0.055);
+  background: var(--glass-bg-medium);
 }
 
 [data-theme='light'] .itemPath {
-  color: rgba(15, 23, 42, 0.3);
+  color: var(--glass-shadow);
 }
diff --git a/app/desktop/src/components/HomeDashboard.module.css b/app/desktop/src/components/HomeDashboard.module.css
index 7e816bedb..392c1bb14 100644
--- a/app/desktop/src/components/HomeDashboard.module.css
+++ b/app/desktop/src/components/HomeDashboard.module.css
@@ -21,9 +21,9 @@
   gap: 5px;
   padding: 12px 14px;
   border-radius: 12px;
-  background: rgba(37, 37, 45, 0.58);
-  border: 1px solid rgba(0, 0, 0, 0.24);
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
+  background: var(--glass-panel);
+  border: 1px solid var(--glass-border-heavy);
+  box-shadow: 0 10px 24px var(--glass-shadow-subtle);
   transition: border-color var(--duration-fast) var(--ease-out);
 }
 
@@ -145,9 +145,9 @@
   gap: var(--space-md);
   padding: 12px;
   border-radius: 12px;
-  background: rgba(37, 37, 45, 0.58);
-  border: 1px solid rgba(0, 0, 0, 0.24);
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
+  background: var(--glass-panel);
+  border: 1px solid var(--glass-border-heavy);
+  box-shadow: 0 10px 24px var(--glass-shadow-subtle);
 }
 
 .teamPanelHeader {
diff --git a/app/desktop/src/components/IM/IMMessageView.module.css b/app/desktop/src/components/IM/IMMessageView.module.css
index 44c797324..03e1f3503 100644
--- a/app/desktop/src/components/IM/IMMessageView.module.css
+++ b/app/desktop/src/components/IM/IMMessageView.module.css
@@ -129,17 +129,17 @@
 }
 
 .authorityBadgeHub {
-  background: rgba(59, 130, 246, 0.15);
+  background: var(--glass-tint-sky);
   color: var(--primary);
 }
 
 .authorityBadgeEdge {
-  background: rgba(34, 197, 94, 0.15);
+  background: var(--glass-tint-moss);
   color: var(--success);
 }
 
 .authorityBadgeHybrid {
-  background: rgba(249, 115, 22, 0.15);
+  background: var(--glass-tint-amber);
   color: var(--warning);
 }
 
diff --git a/app/desktop/src/components/LinkCard.module.css b/app/desktop/src/components/LinkCard.module.css
index ea2409545..39d11b469 100644
--- a/app/desktop/src/components/LinkCard.module.css
+++ b/app/desktop/src/components/LinkCard.module.css
@@ -12,7 +12,7 @@
 
 .card:hover {
   border-color: var(--primary);
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 6px var(--glass-shadow-subtle);
 }
 
 .body {
diff --git a/app/desktop/src/components/MarkdownRenderer.module.css b/app/desktop/src/components/MarkdownRenderer.module.css
index b69f209f3..ee4a1c66e 100644
--- a/app/desktop/src/components/MarkdownRenderer.module.css
+++ b/app/desktop/src/components/MarkdownRenderer.module.css
@@ -120,45 +120,45 @@
   max-width: 100%;
   margin: 0.65em 0;
   overflow-x: auto;
-  border: 1px solid rgba(255, 255, 255, 0.07);
+  border: 1px solid var(--glass-border);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.018);
+  background: var(--glass-bg-subtle);
   font-size: 0.92em;
 }
 
 .root th,
 .root td {
   padding: 6px 10px;
-  border: 1px solid rgba(255, 255, 255, 0.065);
+  border: 1px solid var(--glass-border);
   text-align: left;
   white-space: nowrap;
 }
 
 .root th {
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   font-weight: var(--font-weight-medium, 500);
 }
 
 .root tr:nth-child(even) td {
-  background: rgba(255, 255, 255, 0.024);
+  background: var(--glass-bg-subtle);
 }
 
 [data-theme='light'] .root table {
-  border-color: rgba(15, 23, 42, 0.08);
-  background: rgba(255, 255, 255, 0.58);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-input-bg);
 }
 
 [data-theme='light'] .root th,
 [data-theme='light'] .root td {
-  border-color: rgba(15, 23, 42, 0.075);
+  border-color: var(--glass-border-strong);
 }
 
 [data-theme='light'] .root th {
-  background: rgba(15, 23, 42, 0.045);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='light'] .root tr:nth-child(even) td {
-  background: rgba(15, 23, 42, 0.025);
+  background: var(--glass-bg-subtle);
 }
 
 /* ── Inline code ────────────────────────────── */
diff --git a/app/desktop/src/components/MentionPopover.module.css b/app/desktop/src/components/MentionPopover.module.css
index 53f232ab0..5b66740c3 100644
--- a/app/desktop/src/components/MentionPopover.module.css
+++ b/app/desktop/src/components/MentionPopover.module.css
@@ -3,11 +3,11 @@
   z-index: var(--z-popover, 45);
   pointer-events: auto;
   background: rgb(34, 34, 42);
-  border: 1px solid rgba(255, 255, 255, 0.105);
+  border: 1px solid var(--glass-border-strong);
   border-radius: 8px;
   box-shadow:
-    0 18px 46px rgba(0, 0, 0, 0.32),
-    0 1px 0 rgba(255, 255, 255, 0.055) inset;
+    0 18px 46px var(--glass-shadow),
+    0 1px 0 var(--glass-bg-medium) inset;
   min-width: 260px;
   max-width: 360px;
   max-height: 240px;
@@ -17,10 +17,10 @@
 
 [data-theme='light'] .popover {
   background: rgb(255, 255, 255);
-  border-color: rgba(15, 23, 42, 0.1);
+  border-color: var(--glass-border-strong);
   box-shadow:
-    0 18px 44px rgba(15, 23, 42, 0.15),
-    0 1px 0 rgba(255, 255, 255, 0.82) inset;
+    0 18px 44px var(--glass-bg-heavy),
+    0 1px 0 var(--glass-input-bg-hover) inset;
 }
 
 .list {
@@ -61,12 +61,12 @@
   height: 24px;
   margin-top: 1px;
   border-radius: 7px;
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
   color: var(--muted-foreground);
 }
 
 [data-theme='light'] .kindIcon {
-  background: rgba(15, 23, 42, 0.055);
+  background: var(--glass-bg-medium);
 }
 
 .statusDot {
diff --git a/app/desktop/src/components/ModelDropdown.module.css b/app/desktop/src/components/ModelDropdown.module.css
index 9f445688a..55e863fe2 100644
--- a/app/desktop/src/components/ModelDropdown.module.css
+++ b/app/desktop/src/components/ModelDropdown.module.css
@@ -3,14 +3,14 @@
 /* ── Trigger ──────────────────────────────── */
 .trigger {
   display: inline-flex; align-items: center; gap: 6px;
-  padding: 5px 10px; border: 1px solid rgba(0,0,0,0.06); border-radius: 8px;
-  background: rgba(0,0,0,0.03); color: var(--foreground);
+  padding: 5px 10px; border: 1px solid var(--glass-border); border-radius: 8px;
+  background: var(--glass-bg-subtle); color: var(--foreground);
   font-size: 12px; font-family: var(--font-sans); cursor: pointer;
   white-space: nowrap; transition: border-color 0.15s, background 0.15s;
   -webkit-font-smoothing: antialiased;
 }
-.trigger:hover { background: rgba(0,0,0,0.05); border-color: rgba(15,23,42,0.12); }
-.trigger:focus-visible { border-color: rgba(15,23,42,0.16); box-shadow: 0 0 0 3px rgba(15,23,42,0.06); outline: none; }
+.trigger:hover { background: var(--glass-bg-medium); border-color: var(--glass-border-strong); }
+.trigger:focus-visible { border-color: var(--glass-border-heavy); box-shadow: 0 0 0 3px var(--glass-shadow-subtle); outline: none; }
 .trigger:disabled { opacity: 0.4; cursor: not-allowed; }
 .triggerLabel { font-weight: 500; font-size: 12px; }
 .chevron { opacity: 0.35; transition: transform 0.2s ease; flex-shrink: 0; }
@@ -21,17 +21,17 @@
   position: absolute; top: calc(100% + 6px); left: 0;
   min-width: 200px; max-width: calc(100vw - 24px); max-height: 360px; overflow-y: auto;
   z-index: var(--z-dropdown);
-  background: rgba(246,247,250,0.92); backdrop-filter: blur(24px) saturate(1.08);
+  background: var(--glass-light-fill); backdrop-filter: blur(24px) saturate(1.08);
   -webkit-backdrop-filter: blur(24px) saturate(1.08);
-  border: 1px solid rgba(15,23,42,0.075); border-radius: 12px;
-  box-shadow: 0 18px 44px -12px rgba(15,23,42,0.2), 0 4px 14px -8px rgba(15,23,42,0.14);
+  border: 1px solid var(--glass-border-strong); border-radius: 12px;
+  box-shadow: 0 18px 44px -12px var(--glass-shadow), 0 4px 14px -8px var(--glass-shadow-subtle);
   padding: 8px; animation: dropdownIn 0.12s ease-out;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
   scrollbar-width: thin; scrollbar-color: transparent transparent;
 }
 .dropdown::-webkit-scrollbar { width: 4px; }
-.dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 2px; }
+.dropdown::-webkit-scrollbar-thumb { background: var(--glass-bg-strong); border-radius: 2px; }
 .dropdownUp { animation: dropdownInUp 0.12s ease-out; }
 
 @keyframes dropdownIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@@ -46,7 +46,7 @@
 /* ── Separator ───────────────────────────── */
 .separator {
   height: 1px; margin: 4px 12px;
-  background: rgba(0,0,0,0.05);
+  background: var(--glass-bg-medium);
 }
 
 /* ── Items ────────────────────────────────── */
@@ -57,9 +57,9 @@
   cursor: pointer; text-align: left; font-family: inherit;
   transition: background 0.12s ease, color 0.12s ease;
 }
-.item:hover { background: rgba(0,0,0,0.04); }
-.itemActive { background: rgba(15,23,42,0.055); }
-.itemActive:hover { background: rgba(15,23,42,0.075); }
+.item:hover { background: var(--glass-bg-light); }
+.itemActive { background: var(--glass-bg-medium); }
+.itemActive:hover { background: var(--glass-bg-strong); }
 
 /* Compact single-line (base models) */
 .itemCompact { padding: 8px 14px; }
@@ -88,27 +88,27 @@
 
 /* ── Right side ───────────────────────────── */
 .itemRight { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
-.itemMeta { font-size: 11px; color: var(--text-weaker); background: rgba(0,0,0,0.04); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
+.itemMeta { font-size: 11px; color: var(--text-weaker); background: var(--glass-bg-light); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
 .check { flex-shrink: 0; color: var(--foreground); opacity: 0.82; }
 
 /* ── Dark mode ────────────────────────────── */
-:global([data-theme='dark']) .dropdown { background: rgba(32,34,41,0.94); backdrop-filter: blur(24px) saturate(1.08); border-color: rgba(255,255,255,0.075); box-shadow: 0 18px 48px -14px rgba(0,0,0,0.58), 0 4px 18px -10px rgba(0,0,0,0.42); }
+:global([data-theme='dark']) .dropdown { background: var(--glass-panel-strong); backdrop-filter: blur(24px) saturate(1.08); border-color: var(--glass-bg-medium); box-shadow: 0 18px 48px -14px rgba(0,0,0,0.58), 0 4px 18px -10px var(--glass-shadow); }
 :global([data-theme='dark']) .groupLabel { color: oklch(0.55 0.010 252); }
 :global([data-theme='dark']) .itemName { color: var(--text-primary); }
 :global([data-theme='dark']) .itemActive .itemName { color: var(--text-strong); }
 :global([data-theme='dark']) .itemCompact .itemName { color: var(--text-primary); }
 :global([data-theme='dark']) .itemDesc { color: var(--text-weaker); }
-:global([data-theme='dark']) .itemMeta { background: rgba(255,255,255,0.06); color: var(--text-weaker); }
-:global([data-theme='dark']) .item:hover { background: rgba(255,255,255,0.05); }
-:global([data-theme='dark']) .itemActive { background: rgba(255,255,255,0.082); }
-:global([data-theme='dark']) .itemActive:hover { background: rgba(255,255,255,0.105); }
+:global([data-theme='dark']) .itemMeta { background: var(--glass-bg-medium); color: var(--text-weaker); }
+:global([data-theme='dark']) .item:hover { background: var(--glass-bg-light); }
+:global([data-theme='dark']) .itemActive { background: var(--glass-bg-strong); }
+:global([data-theme='dark']) .itemActive:hover { background: var(--glass-bg-heavy); }
 :global([data-theme='dark']) .check { color: var(--text-primary); opacity: 0.86; }
 :global([data-theme='dark']) .itemIcon { color: var(--text-weaker); }
-:global([data-theme='dark']) .dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }
-:global([data-theme='dark']) .trigger { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
-:global([data-theme='dark']) .trigger:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.11); }
-:global([data-theme='dark']) .trigger:focus-visible { border-color: rgba(255,255,255,0.16); box-shadow: 0 0 0 3px rgba(255,255,255,0.045); }
-:global([data-theme='dark']) .separator { background: rgba(255,255,255,0.06); }
+:global([data-theme='dark']) .dropdown::-webkit-scrollbar-thumb { background: var(--glass-bg-strong); }
+:global([data-theme='dark']) .trigger { background: var(--glass-bg-light); border-color: var(--glass-bg-medium); }
+:global([data-theme='dark']) .trigger:hover { background: var(--glass-bg-medium); border-color: var(--glass-bg-heavy); }
+:global([data-theme='dark']) .trigger:focus-visible { border-color: var(--glass-bg-heavy); box-shadow: 0 0 0 3px var(--glass-bg-light); }
+:global([data-theme='dark']) .separator { background: var(--glass-bg-medium); }
 
 /* ── Text-only variant ────────────────────── */
 .triggerText {
diff --git a/app/desktop/src/components/ModelReasoningPicker.module.css b/app/desktop/src/components/ModelReasoningPicker.module.css
index 777848be9..5a581a7d4 100644
--- a/app/desktop/src/components/ModelReasoningPicker.module.css
+++ b/app/desktop/src/components/ModelReasoningPicker.module.css
@@ -17,7 +17,7 @@
   padding: 0 8px;
   border: 0;
   border-radius: var(--composer-control-radius, 10px);
-  background: var(--composer-control-bg, rgba(255, 255, 255, 0.052));
+  background: var(--composer-control-bg, var(--glass-bg-medium));
   box-shadow: none;
   color: var(--composer-control-text, var(--foreground));
   font: inherit;
@@ -30,7 +30,7 @@
 
 .trigger:hover,
 .trigger:focus-visible {
-  background: var(--composer-control-bg-hover, rgba(255, 255, 255, 0.078));
+  background: var(--composer-control-bg-hover, var(--glass-bg-strong));
   color: var(--composer-control-text-active, var(--foreground));
   outline: none;
 }
@@ -103,10 +103,10 @@
   max-height: min(292px, calc(100vh - 24px));
   overflow-y: auto;
   padding: 5px;
-  border: 1px solid var(--composer-panel-edge, rgba(0, 0, 0, 0.34));
+  border: 1px solid var(--composer-panel-edge, var(--glass-shadow));
   border-radius: 12px;
-  background: rgba(29, 30, 37, 0.97);
-  box-shadow: var(--composer-panel-shadow, 0 22px 56px rgba(0, 0, 0, 0.38), 0 3px 12px rgba(0, 0, 0, 0.22));
+  background: var(--glass-panel-overlay);
+  box-shadow: var(--composer-panel-shadow, 0 22px 56px var(--glass-shadow), 0 3px 12px var(--glass-shadow));
   animation: popoverIn 0.12s ease-out;
   backdrop-filter: blur(24px) saturate(1.08);
   -webkit-backdrop-filter: blur(24px) saturate(1.08);
@@ -167,7 +167,7 @@
 }
 
 .modelRowActive {
-  background: rgba(255, 255, 255, 0.036);
+  background: var(--glass-bg-light);
 }
 
 .modelButton {
@@ -189,7 +189,7 @@
 
 .modelButton:hover,
 .modelButton:focus-visible {
-  background: rgba(255, 255, 255, 0.046);
+  background: var(--glass-bg-light);
   outline: none;
 }
 
@@ -223,7 +223,7 @@
   height: 20px;
   padding: 0 6px;
   border-radius: 7px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--glass-bg-light);
   overflow: hidden;
   color: var(--composer-control-text, var(--muted-foreground));
   font-size: 11.5px;
@@ -252,7 +252,7 @@
   height: 20px;
   padding: 0 6px;
   border-radius: 7px;
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--glass-bg-medium);
   color: var(--muted-foreground);
   font-size: 11px;
   font-weight: 450;
@@ -277,7 +277,7 @@
   padding: 0 8px;
   border: 0;
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-light);
   color: var(--muted-foreground);
   font: inherit;
   font-size: 12px;
@@ -288,13 +288,13 @@
 
 .reasoningChip:hover,
 .reasoningChip:focus-visible {
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--glass-bg-medium);
   color: var(--composer-control-text-active, var(--muted-foreground));
   outline: none;
 }
 
 .reasoningChipActive {
-  background: rgba(255, 255, 255, 0.085);
+  background: var(--glass-bg-strong);
   color: var(--composer-control-text-active, var(--muted-foreground));
 }
 
@@ -304,31 +304,31 @@
 
 [data-theme='light'] .trigger:hover,
 [data-theme='light'] .trigger:focus-visible {
-  background: rgba(15, 23, 42, 0.08);
+  background: var(--glass-bg-strong);
 }
 
 [data-theme='light'] .popover {
-  border-color: rgba(15, 23, 42, 0.08);
-  background: rgba(248, 249, 252, 0.96);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-light-fill);
   box-shadow:
-    0 18px 42px rgba(15, 23, 42, 0.14),
-    0 2px 10px rgba(15, 23, 42, 0.08);
+    0 18px 42px var(--glass-bg-heavy),
+    0 2px 10px var(--glass-bg-strong);
 }
 
 [data-theme='light'] .modelRowActive,
 [data-theme='light'] .modelButton:hover,
 [data-theme='light'] .modelButton:focus-visible {
-  background: rgba(15, 23, 42, 0.055);
+  background: var(--glass-bg-medium);
 }
 
 [data-theme='light'] .reasoningChip {
-  background: rgba(15, 23, 42, 0.045);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='light'] .reasoningChip:hover,
 [data-theme='light'] .reasoningChip:focus-visible,
 [data-theme='light'] .reasoningChipActive {
-  background: rgba(15, 23, 42, 0.082);
+  background: var(--glass-bg-strong);
 }
 
 /* Neutral typography pass: model identity is primary text, metadata is weak. */
diff --git a/app/desktop/src/components/PermissionDialog.module.css b/app/desktop/src/components/PermissionDialog.module.css
index c7b59e78c..85fbe43e0 100644
--- a/app/desktop/src/components/PermissionDialog.module.css
+++ b/app/desktop/src/components/PermissionDialog.module.css
@@ -37,7 +37,7 @@
 }
 
 .notificationBarBtn:hover {
-  background: var(--hover, rgba(255, 255, 255, 0.055));
+  background: var(--hover, var(--glass-bg-medium));
 }
 
 .notificationBar,
@@ -71,7 +71,7 @@
 .panel {
   background: var(--background);
   border-top: 1px solid var(--border);
-  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 -4px 16px var(--glass-shadow-subtle);
   max-height: 50vh;
   display: flex;
   flex-direction: column;
@@ -127,7 +127,7 @@
 
 .panelBtn:hover {
   opacity: 1;
-  background: var(--hover, rgba(255, 255, 255, 0.055));
+  background: var(--hover, var(--glass-bg-medium));
 }
 
 /* ── Request list ──────────────────────────── */
@@ -180,7 +180,7 @@
   font-weight: 600;
   padding: 1px 6px;
   border-radius: 3px;
-  background: var(--code-bg, rgba(0, 0, 0, 0.05));
+  background: var(--code-bg, var(--glass-bg-light));
 }
 
 .itemSummary {
@@ -202,17 +202,17 @@
 }
 
 .itemPending .itemStatus {
-  background: rgba(245, 158, 11, 0.15);
+  background: var(--glass-tint-amber);
   color: var(--warning, #f59e0b);
 }
 
 .itemAllowed .itemStatus {
-  background: rgba(34, 197, 94, 0.15);
+  background: var(--glass-tint-moss);
   color: var(--success, #22c55e);
 }
 
 .itemDenied .itemStatus {
-  background: rgba(239, 68, 68, 0.15);
+  background: var(--glass-tint-danger);
   color: var(--danger, #ef4444);
 }
 
@@ -233,13 +233,13 @@
 
 .itemDismiss:hover {
   opacity: 0.7;
-  background: var(--hover, rgba(255, 255, 255, 0.055));
+  background: var(--hover, var(--glass-bg-medium));
 }
 
 .itemInput {
   margin-top: var(--space-xs);
   padding: var(--space-xs);
-  background: var(--code-bg, rgba(0, 0, 0, 0.03));
+  background: var(--code-bg, var(--glass-bg-subtle));
   border-radius: 4px;
   font-size: 11px;
   font-family: var(--font-mono, monospace);
@@ -270,7 +270,7 @@
 .itemReason {
   margin-top: var(--space-xs);
   padding: var(--space-xs);
-  background: rgba(239, 68, 68, 0.08);
+  background: var(--glass-tint-danger);
   border-radius: 4px;
   color: var(--danger, #ef4444);
   font-size: 11px;
@@ -366,27 +366,27 @@
 }
 
 .riskLow {
-  background: rgba(34, 197, 94, 0.12);
+  background: var(--glass-tint-moss);
   color: var(--success, #22c55e);
 }
 
 .riskMedium {
-  background: rgba(245, 158, 11, 0.12);
+  background: var(--glass-tint-amber);
   color: var(--warning, #f59e0b);
 }
 
 .riskHigh {
-  background: rgba(249, 115, 22, 0.12);
+  background: var(--glass-tint-amber);
   color: var(--warning);
 }
 
 .riskCritical {
-  background: rgba(239, 68, 68, 0.12);
+  background: var(--glass-tint-danger);
   color: var(--danger, #ef4444);
 }
 
 .riskDefault {
-  background: rgba(148, 163, 184, 0.12);
+  background: var(--glass-bg-heavy);
   color: var(--muted-foreground);
 }
 
@@ -498,9 +498,9 @@
 /* ── Dark theme ────────────────────────────── */
 
 :global(.theme-dark) .itemTool {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--glass-bg-strong);
 }
 
 :global(.theme-dark) .itemInput {
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-light);
 }
diff --git a/app/desktop/src/components/PromptInput.module.css b/app/desktop/src/components/PromptInput.module.css
index 6c90a2767..e303d9983 100644
--- a/app/desktop/src/components/PromptInput.module.css
+++ b/app/desktop/src/components/PromptInput.module.css
@@ -9,8 +9,8 @@
   --composer-column-width: 760px;
   --composer-control-h: 32px;
   --composer-control-radius: 14px;
-  --composer-control-bg: rgba(255, 255, 255, 0.044);
-  --composer-control-bg-hover: rgba(255, 255, 255, 0.066);
+  --composer-control-bg: var(--glass-bg-light);
+  --composer-control-bg-hover: var(--glass-bg-medium);
   --composer-control-edge: transparent;
   --composer-input-text: var(--text-primary);
   --composer-placeholder: var(--text-weaker);
@@ -18,8 +18,8 @@
   --composer-control-text-active: var(--text-strong);
   --composer-control-icon: var(--text-weaker);
   --composer-control-icon-active: var(--text-primary);
-  --composer-panel-edge: rgba(0, 0, 0, 0.04);
-  --composer-panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.1);
+  --composer-panel-edge: var(--glass-bg-light);
+  --composer-panel-shadow: 0 14px 34px var(--glass-shadow-subtle), 0 1px 4px var(--glass-shadow-subtle);
   --composer-side-pad: max(30px, calc((100% - var(--run-card-space, 0px) - var(--composer-column-width)) / 2));
   padding:
     8px
@@ -36,7 +36,7 @@
   width: 100%;
   max-width: var(--composer-column-width);
   margin: 0 auto;
-  background: rgba(47, 47, 57, 0.84);
+  background: var(--glass-panel);
   border: 1px solid var(--composer-panel-edge);
   border-radius: 26px;
   padding: 11px 14px 10px;
@@ -46,36 +46,36 @@
   backdrop-filter: blur(24px) saturate(1.06);
   -webkit-backdrop-filter: blur(24px) saturate(1.06);
   box-shadow:
-    0 12px 30px rgba(0, 0, 0, 0.14),
-    0 1px 4px rgba(0, 0, 0, 0.1);
+    0 12px 30px var(--glass-bg-heavy),
+    0 1px 4px var(--glass-bg-heavy);
   transition: background var(--duration-fast), border-color var(--duration-fast),
     box-shadow var(--duration-fast);
 }
 
 .capsule:focus-within {
-  background: rgba(49, 49, 59, 0.88);
-  border-color: rgba(0, 0, 0, 0.06);
+  background: var(--glass-panel-strong);
+  border-color: var(--glass-border);
   box-shadow:
-    0 14px 34px rgba(0, 0, 0, 0.17),
-    0 1px 5px rgba(0, 0, 0, 0.1);
+    0 14px 34px var(--glass-shadow-subtle),
+    0 1px 5px var(--glass-bg-heavy);
 }
 
 [data-theme='light'] .capsule {
   background:
-    linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.52)),
-    rgba(244, 245, 248, 0.82);
-  border-color: rgba(15, 23, 42, 0.02);
+    linear-gradient(180deg, rgba(255,255,255,0.64), var(--glass-input-bg)),
+    var(--glass-light-fill);
+  border-color: var(--glass-border-subtle);
   box-shadow:
-    0 12px 30px rgba(15, 23, 42, 0.075);
+    0 12px 30px var(--glass-bg-strong);
 }
 
 [data-theme='light'] .capsule:focus-within {
   background:
-    linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.58)),
-    rgba(246, 247, 250, 0.88);
-  border-color: rgba(15, 23, 42, 0.045);
+    linear-gradient(180deg, rgba(255,255,255,0.7), var(--glass-input-bg)),
+    var(--glass-light-fill);
+  border-color: var(--glass-border);
   box-shadow:
-    0 14px 32px rgba(15, 23, 42, 0.09);
+    0 14px 32px var(--glass-bg-strong);
 }
 
 /* ── Slash command palette ─────────────────── */
@@ -88,20 +88,20 @@
   max-height: min(430px, calc(100vh - 220px));
   overflow-y: auto;
   padding: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.105);
+  border: 1px solid var(--glass-border-strong);
   border-radius: 12px;
-  background: rgba(35, 35, 43, 0.97);
+  background: var(--glass-panel-overlay);
   box-shadow:
-    0 20px 52px rgba(0, 0, 0, 0.32),
-    0 1px 0 rgba(255, 255, 255, 0.055) inset;
+    0 20px 52px var(--glass-shadow),
+    0 1px 0 var(--glass-bg-medium) inset;
 }
 
 [data-theme='light'] .slashPalette {
-  border-color: rgba(15, 23, 42, 0.1);
+  border-color: var(--glass-border-strong);
   background: rgb(255, 255, 255);
   box-shadow:
-    0 18px 46px rgba(15, 23, 42, 0.16),
-    0 1px 0 rgba(255, 255, 255, 0.82) inset;
+    0 18px 46px var(--glass-shadow-subtle),
+    0 1px 0 var(--glass-input-bg-hover) inset;
 }
 
 .slashHeader {
@@ -122,7 +122,7 @@
   min-width: 20px;
   height: 20px;
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
   font-family: var(--font-sans);
   font-size: 12px;
@@ -130,7 +130,7 @@
 }
 
 [data-theme='light'] .slashHeader kbd {
-  background: rgba(15, 23, 42, 0.06);
+  background: var(--glass-bg-medium);
 }
 
 .slashCommandWrap {
@@ -165,12 +165,12 @@
 
 .slashCommand:hover,
 .slashCommandActive {
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--glass-bg-medium);
 }
 
 [data-theme='light'] .slashCommand:hover,
 [data-theme='light'] .slashCommandActive {
-  background: rgba(15, 23, 42, 0.055);
+  background: var(--glass-bg-medium);
 }
 
 .slashCommandLabel,
@@ -257,9 +257,9 @@
   min-height: 28px;
   gap: 6px;
   padding: 3px 4px 3px 8px;
-  border: 1px solid rgba(255, 255, 255, 0.065);
+  border: 1px solid var(--glass-border);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   color: var(--composer-control-text);
   font-size: 12px;
   line-height: 1;
@@ -300,18 +300,18 @@
 .attachmentChip button:hover,
 .attachmentChip button:focus-visible {
   outline: none;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 
 [data-theme='light'] .attachmentChip {
-  border-color: rgba(15, 23, 42, 0.075);
-  background: rgba(15, 23, 42, 0.04);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='light'] .attachmentChip button:hover,
 [data-theme='light'] .attachmentChip button:focus-visible {
-  background: rgba(15, 23, 42, 0.055);
+  background: var(--glass-bg-medium);
 }
 
 .runSettingsStrip {
@@ -331,7 +331,7 @@
   padding: 3px 4px 3px 8px;
   border: 0;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   color: var(--text-primary);
   box-shadow: none;
   font-size: 11.5px;
@@ -370,17 +370,17 @@
 .runSettingChip button:hover,
 .runSettingChip button:focus-visible {
   outline: none;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg-medium);
   color: var(--text-primary);
 }
 
 [data-theme='light'] .runSettingChip {
-  background: rgba(15, 23, 42, 0.04);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='light'] .runSettingChip button:hover,
 [data-theme='light'] .runSettingChip button:focus-visible {
-  background: rgba(15, 23, 42, 0.055);
+  background: var(--glass-bg-medium);
 }
 
 /* ── Route preview chips ────────────────────── */
@@ -581,18 +581,18 @@
 }
 
 .workTargetBtn:hover {
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
 }
 
 .workTargetBtnActive {
-  background: rgba(255, 255, 255, 0.052);
+  background: var(--glass-bg-medium);
 }
 
 .workTargetBtn:focus-visible {
   outline: none;
   box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.085),
-    0 0 0 2px rgba(255, 255, 255, 0.04);
+    inset 0 0 0 1px var(--glass-bg-strong),
+    0 0 0 2px var(--glass-bg-light);
 }
 
 .workTargetBtn:disabled {
@@ -607,7 +607,7 @@
 }
 
 [data-theme='light'] .workTargetBtn:focus-visible {
-  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
+  box-shadow: inset 0 0 0 1px var(--glass-shadow-subtle);
 }
 
 .workTargetMenu {
@@ -621,16 +621,16 @@
   padding: 9px;
   border: 1px solid var(--composer-panel-edge);
   border-radius: 14px;
-  background: rgba(35, 35, 43, 0.97);
+  background: var(--glass-panel-overlay);
   box-shadow: var(--composer-panel-shadow);
   backdrop-filter: blur(24px) saturate(1.08);
   -webkit-backdrop-filter: blur(24px) saturate(1.08);
 }
 
 [data-theme='light'] .workTargetMenu {
-  border-color: rgba(15, 23, 42, 0.09);
-  background: rgba(250, 250, 252, 0.96);
-  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-light-fill);
+  box-shadow: 0 18px 44px var(--glass-shadow-subtle);
 }
 
 .workTargetHeader,
@@ -642,12 +642,12 @@
 
 .workTargetHeader {
   padding: 4px 5px 10px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.24);
+  border-bottom: 1px solid var(--glass-border-heavy);
   margin-bottom: 7px;
 }
 
 [data-theme='light'] .workTargetHeader {
-  border-bottom-color: rgba(15, 23, 42, 0.07);
+  border-bottom-color: var(--glass-border);
 }
 
 .workTargetHeader span,
@@ -691,16 +691,16 @@
 
 [data-theme='light'] .workTargetOption:hover,
 [data-theme='light'] .workTargetOptionActive {
-  background: rgba(15, 23, 42, 0.045);
+  background: var(--glass-bg-light);
 }
 
 .workTargetOption:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 0 1px var(--glass-bg-heavy);
 }
 
 [data-theme='light'] .workTargetOption:focus-visible {
-  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
+  box-shadow: inset 0 0 0 1px var(--glass-shadow-subtle);
 }
 
 .workTargetOption:disabled {
@@ -738,7 +738,7 @@
   min-height: 18px;
   padding: 3px 7px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
   color: var(--muted-foreground);
   font-size: 11px;
   font-style: normal;
@@ -750,7 +750,7 @@
 }
 
 [data-theme='light'] .workTargetMeta {
-  background: rgba(15, 23, 42, 0.045);
+  background: var(--glass-bg-light);
 }
 
 .workDirEditor {
@@ -760,8 +760,8 @@
   margin-top: 7px;
   padding: 9px;
   border-radius: var(--composer-control-radius);
-  background: rgba(255, 255, 255, 0.038);
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+  background: var(--glass-bg-light);
+  box-shadow: inset 0 0 0 1px var(--glass-shadow-subtle);
 }
 
 .workDirInputRow {
@@ -775,26 +775,26 @@
   height: var(--composer-control-h);
   border: 0;
   border-radius: var(--composer-control-radius);
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   color: var(--foreground);
   padding: 0 10px;
   outline: none;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 0 1px var(--glass-shadow);
 }
 
 [data-theme='light'] .workDirInputRow input {
-  border-color: rgba(15, 23, 42, 0.09);
-  background: rgba(15, 23, 42, 0.035);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-subtle);
 }
 
 .workDirInputRow input:focus {
   box-shadow:
-    inset 0 0 0 1px rgba(0, 0, 0, 0.36),
-    0 0 0 2px rgba(255, 255, 255, 0.055);
+    inset 0 0 0 1px var(--glass-shadow),
+    0 0 0 2px var(--glass-bg-medium);
 }
 
 [data-theme='light'] .workDirInputRow input:focus {
-  border-color: rgba(15, 23, 42, 0.16);
+  border-color: var(--glass-border-heavy);
 }
 
 .workDirInputRow button {
@@ -815,12 +815,12 @@
 }
 
 .workDirBrowseBtn {
-  background: rgba(255, 255, 255, 0.075) !important;
+  background: var(--glass-bg-medium) !important;
   color: var(--foreground) !important;
 }
 
 [data-theme='light'] .workDirBrowseBtn {
-  background: rgba(15, 23, 42, 0.07) !important;
+  background: var(--glass-bg-medium) !important;
 }
 
 .workDirApplyBtn {
@@ -932,7 +932,7 @@
 .sendBtnActive {
   background: color-mix(in oklch, var(--foreground) 88%, var(--muted-foreground) 12%);
   color: var(--background);
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 1px 8px var(--glass-shadow-subtle);
 }
 
 .sendBtnActive:hover {
diff --git a/app/desktop/src/components/ReplyPreviewBar.module.css b/app/desktop/src/components/ReplyPreviewBar.module.css
index beea66d58..6e7eb1659 100644
--- a/app/desktop/src/components/ReplyPreviewBar.module.css
+++ b/app/desktop/src/components/ReplyPreviewBar.module.css
@@ -65,6 +65,6 @@
 }
 
 .cancelBtn:hover {
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   color: var(--foreground);
 }
diff --git a/app/desktop/src/components/RunDetail.module.css b/app/desktop/src/components/RunDetail.module.css
index 0b5950ac0..5ebdf52cc 100644
--- a/app/desktop/src/components/RunDetail.module.css
+++ b/app/desktop/src/components/RunDetail.module.css
@@ -21,11 +21,11 @@
 
 .section {
   padding: 4px 0 9px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
+  border-bottom: 1px solid var(--glass-border-subtle);
 }
 
 [data-theme='light'] .section {
-  border-bottom-color: rgba(0, 0, 0, 0.055);
+  border-bottom-color: var(--glass-border);
 }
 
 .tabContent {
@@ -55,10 +55,10 @@
   font-weight: 600;
   font-family: var(--font-mono);
 }
-.statusDone    { background: rgba(105, 201, 103, 0.09); color: var(--success); }
-.statusFailed  { background: rgba(255, 126, 120, 0.09); color: var(--diff-removed-border); }
-.statusRunning { background: rgba(93, 104, 204, 0.11); color: var(--skill); }
-.statusPending { background: rgba(255, 255, 255, 0.07); color: var(--muted-foreground); }
+.statusDone    { background: var(--glass-tint-moss); color: var(--success); }
+.statusFailed  { background: var(--glass-tint-danger); color: var(--diff-removed-border); }
+.statusRunning { background: var(--glass-tint-plum); color: var(--skill); }
+.statusPending { background: var(--glass-bg-medium); color: var(--muted-foreground); }
 
 .runId {
   margin-left: 6px;
@@ -107,7 +107,7 @@
 .emptyCard,
 .cardSection {
   border: 0;
-  border-bottom: 1px solid rgba(0,0,0,0.055);
+  border-bottom: 1px solid var(--glass-border);
   border-radius: 0;
   background: transparent;
 }
@@ -115,7 +115,7 @@
 [data-theme='dark'] .emptyCard,
 [data-theme='dark'] .cardSection {
   background: transparent;
-  border-color: rgba(255,255,255,0.045);
+  border-color: var(--glass-border-subtle);
 }
 
 .emptyCard {
@@ -124,7 +124,7 @@
   gap: 8px;
   min-height: 36px;
   padding: 6px 0;
-  border-bottom: 1px solid rgba(255,255,255,0.055);
+  border-bottom: 1px solid var(--glass-border);
   color: var(--muted-foreground);
   font-size: 12px;
   opacity: 0.72;
@@ -135,12 +135,12 @@
 }
 
 .reviewSurface {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
+  border-bottom: 1px solid var(--glass-border-subtle);
   padding: 3px 0 8px;
 }
 
 [data-theme='light'] .reviewSurface {
-  border-bottom-color: rgba(0, 0, 0, 0.055);
+  border-bottom-color: var(--glass-border);
 }
 
 .reviewGrid {
@@ -152,11 +152,11 @@
 .reviewCard {
   min-width: 0;
   padding: 6px 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.045);
+  border-top: 1px solid var(--glass-border-subtle);
 }
 
 [data-theme='light'] .reviewCard {
-  border-top-color: rgba(0, 0, 0, 0.055);
+  border-top-color: var(--glass-border);
 }
 
 .reviewCardTitle,
@@ -249,11 +249,11 @@
 .runtimeItem {
   gap: 8px;
   padding: 4px 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.035);
+  border-top: 1px solid var(--glass-border-subtle);
 }
 
 [data-theme='light'] .runtimeItem {
-  border-top-color: rgba(0, 0, 0, 0.045);
+  border-top-color: var(--glass-border);
 }
 
 .runtimeKind {
@@ -280,14 +280,14 @@
   margin-left: auto;
   padding: 1px 5px;
   border-radius: 999px;
-  background: rgba(0,0,0,0.035);
+  background: var(--glass-bg-subtle);
   color: var(--muted-foreground);
   font-size: 10px;
   font-weight: 600;
 }
 
 [data-theme='dark'] .cardCount {
-  background: rgba(255,255,255,0.07);
+  background: var(--glass-bg-medium);
 }
 
 .list {
@@ -328,10 +328,10 @@
 }
 
 /* ── Tool call items ───────────────────────── */
-.toolCallItem { border-bottom: 1px solid rgba(0,0,0,0.04); }
+.toolCallItem { border-bottom: 1px solid var(--glass-bg-light); }
 .toolCallItem:last-child { border-bottom: none; }
 
-[data-theme='dark'] .toolCallItem { border-bottom-color: rgba(255,255,255,0.045); }
+[data-theme='dark'] .toolCallItem { border-bottom-color: var(--glass-bg-light); }
 
 .toolCallHeader {
   display: flex;
@@ -350,7 +350,7 @@
 .toolCallOutput {
   margin: 2px 0 8px;
   padding: 7px 8px;
-  background: rgba(0,0,0,0.026);
+  background: var(--glass-bg-subtle);
   border-radius: 7px;
   font-size: 11px;
   font-family: var(--font-mono);
@@ -360,8 +360,8 @@
   word-break: break-all;
 }
 
-[data-theme='light'] .toolCallOutput { background: rgba(0, 0, 0, 0.035); }
-[data-theme='dark'] .toolCallOutput { background: rgba(255, 255, 255, 0.04); }
+[data-theme='light'] .toolCallOutput { background: var(--glass-bg-subtle); }
+[data-theme='dark'] .toolCallOutput { background: var(--glass-bg-light); }
 
 .chevron {
   display: inline-block;
@@ -397,16 +397,16 @@
 .cancelButton {
   width: 100%;
   padding: 6px 12px;
-  border: 1px solid rgba(239,68,68,0.2);
+  border: 1px solid var(--glass-tint-danger);
   border-radius: 8px;
-  background: rgba(239,68,68,0.04);
+  background: var(--glass-tint-danger);
   color: var(--destructive);
   font-size: 11px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.15s;
 }
-.cancelButton:hover { background: rgba(239,68,68,0.08); }
+.cancelButton:hover { background: var(--glass-tint-danger); }
 
 /* ── Diff Review Panel (primary when diffs exist) ── */
 .diffReviewPrimary {
@@ -432,7 +432,7 @@
 }
 
 [data-theme='dark'] .tabContentSecondary {
-  border-top-color: rgba(255, 255, 255, 0.045);
+  border-top-color: var(--glass-border-subtle);
 }
 
 /* ── Token usage ───────────────────────────── */
diff --git a/app/desktop/src/components/SearchDialog.module.css b/app/desktop/src/components/SearchDialog.module.css
index a03107830..5e43aca42 100644
--- a/app/desktop/src/components/SearchDialog.module.css
+++ b/app/desktop/src/components/SearchDialog.module.css
@@ -5,7 +5,7 @@
   display: flex;
   justify-content: center;
   padding-top: 15vh;
-  background: rgba(0, 0, 0, 0.32);
+  background: var(--glass-shadow);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
 }
@@ -13,11 +13,11 @@
 .dialog {
   width: min(560px, calc(100vw - 32px));
   max-height: min(62vh, 520px);
-  background: rgba(31, 32, 39, 0.96);
-  border: 1px solid rgba(0, 0, 0, 0.34);
+  background: var(--glass-panel-overlay);
+  border: 1px solid var(--glass-shadow);
   border-radius: 14px;
   box-shadow:
-    0 22px 56px rgba(0, 0, 0, 0.36),
+    0 22px 56px var(--glass-shadow),
     0 4px 16px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   display: flex;
@@ -29,7 +29,7 @@
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
+  border-bottom: 1px solid var(--glass-border);
 }
 
 .searchIcon {
@@ -51,13 +51,13 @@
 
 .kbd {
   padding: 2px 6px 3px;
-  border: 1px solid rgba(255, 255, 255, 0.07);
+  border: 1px solid var(--glass-border);
   border-radius: 6px;
   font-size: 10px;
   font-family: var(--font-sans);
   font-weight: 560;
   color: var(--muted-foreground);
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-light);
 }
 
 .results {
@@ -78,7 +78,7 @@
 }
 .item:hover,
 .selected {
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 
@@ -138,23 +138,23 @@
 }
 
 [data-theme='light'] .dialog {
-  background: rgba(250, 250, 252, 0.97);
-  border-color: rgba(15, 23, 42, 0.08);
+  background: var(--glass-light-fill);
+  border-color: var(--glass-border-strong);
   box-shadow:
-    0 22px 56px rgba(15, 23, 42, 0.14),
-    0 4px 16px rgba(15, 23, 42, 0.08);
+    0 22px 56px var(--glass-bg-heavy),
+    0 4px 16px var(--glass-bg-strong);
 }
 
 [data-theme='light'] .inputRow {
-  border-bottom-color: rgba(15, 23, 42, 0.075);
+  border-bottom-color: var(--glass-border-strong);
 }
 
 [data-theme='light'] .kbd {
-  border-color: rgba(15, 23, 42, 0.08);
-  background: rgba(15, 23, 42, 0.045);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='light'] .item:hover,
 [data-theme='light'] .selected {
-  background: rgba(15, 23, 42, 0.055);
+  background: var(--glass-bg-medium);
 }
diff --git a/app/desktop/src/components/SettingsPage.module.css b/app/desktop/src/components/SettingsPage.module.css
index 0af5a1f68..430b021ac 100644
--- a/app/desktop/src/components/SettingsPage.module.css
+++ b/app/desktop/src/components/SettingsPage.module.css
@@ -1,15 +1,8 @@
 .root {
   --settings-accent: var(--primary);
-  --settings-glass-bg: rgba(255, 255, 255, 0.52);
-  --settings-glass-border: rgba(15, 23, 42, 0.075);
-  --settings-glass-hover: rgba(255, 255, 255, 0.66);
-  --settings-glass-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.68),
-    0 4px 18px rgba(15, 23, 42, 0.035);
-  --settings-chip-bg: rgba(0, 0, 0, 0.04);
-  --settings-chip-border: rgba(0, 0, 0, 0.06);
-  --settings-icon-bg: rgba(93, 104, 204, 0.12);
-  --settings-sidebar-bg: rgba(246, 246, 248, 0.72);
+  --settings-chip-bg: var(--glass-bg-light);
+  --settings-chip-border: var(--glass-border);
+  --settings-icon-bg: var(--glass-tint-plum);
   --settings-muted: var(--text-weaker);
   --settings-graph-artifact: var(--info);
   --settings-graph-conflict: var(--destructive);
@@ -20,27 +13,12 @@
   height: 100%;
   min-height: 0;
   flex: 1;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 34%),
-    var(--app-bg);
+  background: var(--app-bg);
   color: var(--foreground);
 }
 
 [data-theme='dark'] .root {
-  --settings-glass-bg: rgba(37, 37, 45, 0.58);
-  --settings-glass-border: rgba(255, 255, 255, 0.065);
-  --settings-glass-hover: rgba(48, 48, 57, 0.7);
-  --settings-glass-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.045),
-    0 5px 18px rgba(0, 0, 0, 0.08);
-  --settings-chip-bg: rgba(255, 255, 255, 0.04);
-  --settings-chip-border: rgba(255, 255, 255, 0.05);
-  --settings-icon-bg: rgba(93, 104, 204, 0.15);
-  --settings-sidebar-bg: rgba(27, 27, 34, 0.78);
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 36%),
-    radial-gradient(ellipse at 78% 0%, rgba(93, 104, 204, 0.045), transparent 34%),
-    var(--app-bg);
+  background: var(--app-bg);
 }
 
 .sidebar {
@@ -49,14 +27,14 @@
   min-height: 0;
   flex-direction: column;
   padding: 16px 10px;
-  border-right: 1px solid rgba(0, 0, 0, 0.06);
-  background: var(--settings-sidebar-bg);
+  border-right: 1px solid var(--glass-border);
+  background: var(--glass-panel);
   backdrop-filter: blur(30px) saturate(1.16);
   -webkit-backdrop-filter: blur(30px) saturate(1.16);
 }
 
 [data-theme='dark'] .sidebar {
-  border-right-color: rgba(255, 255, 255, 0.06);
+  border-right-color: var(--glass-border);
 }
 
 .backBtn,
@@ -88,7 +66,7 @@
 .navItem:hover,
 .sidebarAccountBtn:hover,
 .sidebarActionBtn:hover {
-  background: rgba(0, 0, 0, 0.045);
+  background: var(--glass-bg-light);
   color: var(--foreground);
 }
 
@@ -97,24 +75,24 @@
 .sidebarAccountBtn:focus-visible,
 .sidebarActionBtn:focus-visible {
   outline: none;
-  background: rgba(0, 0, 0, 0.045);
+  background: var(--glass-bg-light);
   color: var(--foreground);
-  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
+  box-shadow: inset 0 0 0 1px var(--glass-shadow-subtle);
 }
 
 [data-theme='dark'] .backBtn:hover,
 [data-theme='dark'] .navItem:hover,
 [data-theme='dark'] .sidebarAccountBtn:hover,
 [data-theme='dark'] .sidebarActionBtn:hover {
-  background: rgba(255, 255, 255, 0.065);
+  background: var(--glass-bg-medium);
 }
 
 [data-theme='dark'] .backBtn:focus-visible,
 [data-theme='dark'] .navItem:focus-visible,
 [data-theme='dark'] .sidebarAccountBtn:focus-visible,
 [data-theme='dark'] .sidebarActionBtn:focus-visible {
-  background: rgba(255, 255, 255, 0.065);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
+  background: var(--glass-bg-medium);
+  box-shadow: inset 0 0 0 1px var(--glass-bg-heavy);
 }
 
 :global(html[data-focus-source='pointer']) .backBtn:focus-visible,
@@ -169,7 +147,7 @@
 .main::-webkit-scrollbar-thumb {
   border: 2px solid transparent;
   border-radius: 999px;
-  background: rgba(142, 142, 147, 0.32);
+  background: var(--glass-border-heavy);
   background-clip: padding-box;
 }
 
@@ -195,9 +173,9 @@
 .navEmpty {
   margin: 8px 6px;
   padding: 10px 11px;
-  border: 1px solid var(--settings-glass-border);
+  border: 1px solid var(--glass-border);
   border-radius: 9px;
-  background: rgba(255, 255, 255, 0.025);
+  background: var(--glass-bg-subtle);
   color: var(--settings-muted);
   font-size: 13px;
   line-height: 1.45;
@@ -220,23 +198,23 @@
 }
 
 .navItemActive {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
   border-radius: 8px;
 }
 
 [data-theme='dark'] .navItemActive {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--glass-bg-strong);
 }
 
 .sidebarAccount {
   margin-top: auto;
   padding-top: 12px;
-  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  border-top: 1px solid var(--glass-border);
 }
 
 [data-theme='dark'] .sidebarAccount {
-  border-top-color: rgba(255, 255, 255, 0.06);
+  border-top-color: var(--glass-border);
 }
 
 .sidebarAccountBtn,
@@ -346,10 +324,10 @@
   min-height: 76px;
   gap: 12px;
   padding: 15px 18px;
-  border: 1px solid var(--settings-glass-border);
+  border: 1px solid var(--glass-border);
   border-radius: 11px;
-  background: var(--settings-glass-bg);
-  box-shadow: var(--settings-glass-shadow);
+  background: var(--glass-panel);
+  box-shadow: 0 6px 18px var(--glass-shadow-subtle);
   backdrop-filter: blur(22px) saturate(1.18);
   -webkit-backdrop-filter: blur(22px) saturate(1.18);
 }
@@ -379,7 +357,7 @@
   width: fit-content;
   padding: 4px 8px;
   border-radius: 999px;
-  background: rgba(93, 104, 204, 0.13);
+  background: var(--glass-tint-plum);
   color: color-mix(in oklch, var(--settings-accent) 86%, white);
   font-size: 11px;
   font-style: normal;
@@ -390,10 +368,10 @@
 .profileCard,
 .targetCard {
   min-width: 0;
-  border: 1px solid var(--settings-glass-border);
+  border: 1px solid var(--glass-border);
   border-radius: 11px;
-  background: var(--settings-glass-bg);
-  box-shadow: var(--settings-glass-shadow);
+  background: var(--glass-panel);
+  box-shadow: 0 6px 18px var(--glass-shadow-subtle);
   backdrop-filter: blur(22px) saturate(1.18);
   -webkit-backdrop-filter: blur(22px) saturate(1.18);
 }
@@ -476,7 +454,7 @@
   flex-shrink: 0;
   padding: 4px 8px;
   border-radius: 999px;
-  background: rgba(142, 142, 147, 0.14);
+  background: var(--glass-bg-medium);
   color: var(--settings-muted);
   font-size: 11px;
   font-style: normal;
@@ -484,12 +462,12 @@
 }
 
 .profileStatus_available {
-  background: rgba(34, 197, 94, 0.14);
+  background: var(--glass-tint-moss);
   color: var(--success);
 }
 
 .profileStatus_configuring {
-  background: rgba(245, 158, 11, 0.14);
+  background: var(--glass-tint-amber);
   color: var(--warning);
 }
 
@@ -639,10 +617,10 @@
   flex-direction: column;
   gap: 10px;
   padding: 15px;
-  border: 1px solid var(--settings-glass-border);
+  border: 1px solid var(--glass-border);
   border-radius: 12px;
-  background: var(--settings-glass-bg);
-  box-shadow: var(--settings-glass-shadow);
+  background: var(--glass-panel);
+  box-shadow: 0 6px 18px var(--glass-shadow-subtle);
   backdrop-filter: blur(20px) saturate(1.14);
   -webkit-backdrop-filter: blur(20px) saturate(1.14);
 }
@@ -680,10 +658,10 @@
   gap: 12px;
   min-height: 66px;
   padding: 13px 16px;
-  border: 1px solid var(--settings-glass-border);
+  border: 1px solid var(--glass-border);
   border-radius: 11px;
-  background: var(--settings-glass-bg);
-  box-shadow: var(--settings-glass-shadow);
+  background: var(--glass-panel);
+  box-shadow: 0 6px 18px var(--glass-shadow-subtle);
   backdrop-filter: blur(20px) saturate(1.14);
   -webkit-backdrop-filter: blur(20px) saturate(1.14);
 }
@@ -712,10 +690,10 @@
 .teamMetric {
   min-width: 0;
   padding: 13px 14px;
-  border: 1px solid var(--settings-glass-border);
+  border: 1px solid var(--glass-border);
   border-radius: 11px;
-  background: var(--settings-glass-bg);
-  box-shadow: var(--settings-glass-shadow);
+  background: var(--glass-panel);
+  box-shadow: 0 6px 18px var(--glass-shadow-subtle);
 }
 
 .teamMetric span {
@@ -744,16 +722,16 @@
   gap: 10px;
   min-width: 0;
   padding: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.055);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
-  background: color-mix(in oklch, var(--settings-glass-bg) 88%, transparent);
-  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045);
+  background: color-mix(in oklch, var(--glass-panel) 88%, transparent);
+  box-shadow: 0 10px 26px var(--glass-shadow-subtle);
 }
 
 [data-theme='dark'] .teamGraph {
-  border-color: rgba(0, 0, 0, 0.18);
-  background: rgba(31, 32, 39, 0.52);
-  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
+  border-color: var(--glass-border-heavy);
+  background: var(--glass-panel);
+  box-shadow: 0 14px 34px var(--glass-shadow-subtle);
 }
 
 .teamGraphNodes {
@@ -782,15 +760,15 @@
   border: 1px solid color-mix(in oklch, var(--settings-chip-border) 82%, transparent);
   border-left: 2px solid color-mix(in oklch, var(--team-node-accent) 58%, transparent);
   border-radius: 12px;
-  background: color-mix(in oklch, var(--settings-glass-bg) 92%, transparent);
-  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035);
+  background: color-mix(in oklch, var(--glass-panel) 92%, transparent);
+  box-shadow: 0 6px 16px var(--glass-shadow-subtle);
 }
 
 [data-theme='dark'] .teamGraphNode {
-  border-color: rgba(0, 0, 0, 0.2);
-  border-left-color: color-mix(in oklch, var(--team-node-accent) 52%, rgba(255, 255, 255, 0.08));
-  background: rgba(42, 43, 51, 0.72);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  border-color: var(--glass-border-heavy);
+  border-left-color: color-mix(in oklch, var(--team-node-accent) 52%, var(--glass-border));
+  background: var(--glass-panel);
+  box-shadow: 0 8px 20px var(--glass-shadow-subtle);
 }
 
 .teamGraphNode strong {
@@ -864,8 +842,8 @@
 }
 
 [data-theme='dark'] .teamGraphEdge {
-  border-color: rgba(0, 0, 0, 0.16);
-  background: rgba(255, 255, 255, 0.032);
+  border-color: var(--glass-border-heavy);
+  background: var(--glass-bg-subtle);
 }
 
 .teamGraphEdge span {
@@ -943,10 +921,10 @@
   gap: 12px;
   min-height: 66px;
   padding: 13px 15px;
-  border: 1px solid var(--settings-glass-border);
-  background: var(--settings-glass-bg);
-  backdrop-filter: blur(18px) saturate(1.12);
-  -webkit-backdrop-filter: blur(18px) saturate(1.12);
+  border: 1px solid var(--glass-border);
+  border-radius: 11px;
+  margin-bottom: 8px;
+  background: var(--glass-panel);
 }
 
 .teamMiniButton {
@@ -964,8 +942,8 @@
 .teamMiniButton:hover,
 .teamMiniButton:focus-visible {
   outline: none;
-  border-color: color-mix(in oklch, var(--settings-accent) 28%, var(--settings-glass-border));
-  background: var(--settings-glass-hover);
+  border-color: color-mix(in oklch, var(--settings-accent) 28%, var(--glass-border));
+  background: var(--glass-panel-strong);
 }
 
 .teamMiniButton:focus-visible {
@@ -983,25 +961,9 @@
   padding-block: 11px;
 }
 
-.teamMiniRow:first-child {
-  border-radius: 12px 12px 0 0;
-}
-
-.teamMiniRow:last-child {
-  border-radius: 0 0 12px 12px;
-}
-
-.teamMiniRow:only-child {
-  border-radius: 12px;
-}
-
-.teamMiniRow + .teamMiniRow {
-  border-top: 0;
-}
-
 .teamMiniRowSelected {
-  border-color: color-mix(in oklch, var(--settings-accent) 34%, var(--settings-glass-border));
-  background: var(--settings-glass-hover);
+  border-color: color-mix(in oklch, var(--settings-accent) 34%, var(--glass-border));
+  background: var(--glass-panel-strong);
 }
 
 .teamMiniRow > div:first-child {
@@ -1059,7 +1021,7 @@
   width: 100%;
   justify-content: flex-end;
   padding-top: 10px;
-  border-top: 1px solid var(--settings-glass-border);
+  border-top: 1px solid var(--glass-border);
 }
 
 .teamActionRow .primaryBtn,
@@ -1080,9 +1042,9 @@
   flex-direction: column;
   gap: 6px;
   padding: 10px;
-  border: 1px solid var(--settings-glass-border);
+  border: 1px solid var(--glass-border);
   border-radius: 10px;
-  background: color-mix(in oklch, var(--settings-glass-bg) 82%, transparent);
+  background: color-mix(in oklch, var(--glass-panel) 82%, transparent);
 }
 
 .conflictSourceHead {
@@ -1144,10 +1106,10 @@
 .providerRow {
   min-width: 0;
   padding: 14px;
-  border: 1px solid var(--settings-glass-border);
+  border: 1px solid var(--glass-border);
   border-radius: 11px;
-  background: var(--settings-glass-bg);
-  box-shadow: var(--settings-glass-shadow);
+  background: var(--glass-panel);
+  box-shadow: 0 6px 18px var(--glass-shadow-subtle);
   backdrop-filter: blur(20px) saturate(1.14);
   -webkit-backdrop-filter: blur(20px) saturate(1.14);
 }
@@ -1220,9 +1182,9 @@
 .textInput {
   min-height: 34px;
   padding: 8px 12px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--glass-border-strong);
   border-radius: 9px;
-  background: rgba(255, 255, 255, 0.48);
+  background: var(--glass-input-bg);
   color: var(--foreground);
   font: inherit;
   font-size: 13px;
@@ -1232,8 +1194,8 @@
 }
 
 [data-theme='dark'] .textInput {
-  border-color: rgba(255, 255, 255, 0.09);
-  background: rgba(255, 255, 255, 0.055);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-medium);
 }
 
 .modeCard {
@@ -1242,10 +1204,10 @@
   gap: 13px;
   min-height: 80px;
   padding: 15px;
-  border: 1px solid var(--settings-glass-border);
+  border: 1px solid var(--glass-border);
   border-radius: 11px;
-  background: var(--settings-glass-bg);
-  box-shadow: var(--settings-glass-shadow);
+  background: var(--glass-panel);
+  box-shadow: 0 6px 18px var(--glass-shadow-subtle);
   backdrop-filter: blur(22px) saturate(1.18);
   -webkit-backdrop-filter: blur(22px) saturate(1.18);
   color: var(--foreground);
@@ -1262,20 +1224,20 @@
 }
 
 .modeCard:hover {
-  background: var(--settings-glass-hover);
-  border-color: color-mix(in oklch, var(--settings-glass-border) 72%, var(--foreground));
+  background: var(--glass-panel-strong);
+  border-color: color-mix(in oklch, var(--glass-border) 72%, var(--foreground));
 }
 
 [data-theme='dark'] .modeCard:hover {
-  background: var(--settings-glass-hover);
+  background: var(--glass-panel-strong);
 }
 
 .modeCardActive,
 [data-theme='dark'] .modeCardActive {
-  border-color: color-mix(in oklch, var(--settings-accent) 34%, var(--settings-glass-border));
+  border-color: color-mix(in oklch, var(--settings-accent) 34%, var(--glass-border));
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
-    var(--settings-glass-hover);
+    linear-gradient(180deg, var(--glass-bg-subtle), transparent),
+    var(--glass-panel-strong);
 }
 
 .modeCard span {
@@ -1312,11 +1274,10 @@
   gap: 16px;
   min-height: 70px;
   padding: 15px 18px;
-  border: 1px solid var(--settings-glass-border);
-  background: var(--settings-glass-bg);
-  border-radius: 0;
-  backdrop-filter: blur(20px) saturate(1.14);
-  -webkit-backdrop-filter: blur(20px) saturate(1.14);
+  border: 1px solid var(--glass-border);
+  background: var(--glass-panel);
+  border-radius: 11px;
+  margin-bottom: 10px;
   transition:
     background 0.18s ease,
     border-color 0.18s ease;
@@ -1327,48 +1288,7 @@
 [data-theme='dark'] .runnerRow,
 [data-theme='dark'] .taskRow,
 [data-theme='dark'] .accountCard {
-  border-color: rgba(255, 255, 255, 0.05);
-}
-
-.settingRow:first-child,
-.connectionRow:first-child,
-.runnerRow:first-child,
-.taskRow:first-child,
-.accountCard:first-child {
-  border-radius: 12px 12px 0 0;
-}
-
-.settingRow:last-child,
-.connectionRow:last-child,
-.runnerRow:last-child,
-.taskRow:last-child,
-.accountCard:last-child {
-  border-radius: 0 0 12px 12px;
-}
-
-.settingRow:only-child,
-.connectionRow:only-child,
-.runnerRow:only-child,
-.taskRow:only-child,
-.accountCard:only-child {
-  border-radius: 12px;
-}
-
-.settingRow:hover,
-.connectionRow:hover,
-.runnerRow:hover,
-.taskRow:hover,
-.accountCard:hover {
-  background: var(--settings-glass-hover);
-}
-
-.settingRow + .settingRow,
-.connectionRow + .connectionRow,
-.runnerRow + .runnerRow,
-.taskRow + .taskRow,
-.accountCard + .settingRow,
-.settingRow + .accountCard {
-  border-top: 0;
+  border-color: var(--glass-border);
 }
 
 .instructionsRow {
@@ -1376,11 +1296,10 @@
   flex-direction: column;
   gap: 12px;
   padding: 16px 18px;
-  border: 1px solid var(--settings-glass-border);
-  border-top: 0;
-  background: var(--settings-glass-bg);
-  backdrop-filter: blur(20px) saturate(1.14);
-  -webkit-backdrop-filter: blur(20px) saturate(1.14);
+  border: 1px solid var(--glass-border);
+  border-radius: 11px;
+  margin-top: 8px;
+  background: var(--glass-panel);
 }
 
 .instructionsHeader,
@@ -1446,7 +1365,7 @@
   overflow: hidden;
   padding: 3px 7px;
   border-radius: 999px;
-  background: rgba(142, 142, 147, 0.12);
+  background: var(--glass-bg-medium);
   color: var(--settings-muted);
   font-size: 11px;
   font-weight: 700;
@@ -1511,13 +1430,13 @@
   flex-shrink: 0;
   border: 0;
   border-radius: 999px;
-  background: rgba(0, 0, 0, 0.14);
+  background: var(--glass-bg-heavy);
   cursor: pointer;
   transition: background 0.18s ease;
 }
 
 [data-theme='dark'] .switch {
-  background: rgba(255, 255, 255, 0.16);
+  background: var(--glass-bg-heavy);
 }
 
 .switch span {
@@ -1528,7 +1447,7 @@
   height: 18px;
   border-radius: 50%;
   background: var(--card);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 3px var(--glass-shadow);
   transition: transform 0.18s ease;
 }
 
@@ -1557,9 +1476,9 @@
   min-width: 158px;
   height: 34px;
   padding: 0 34px 0 12px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--glass-border-strong);
   border-radius: 9px;
-  background: rgba(255, 255, 255, 0.48);
+  background: var(--glass-input-bg);
   color: var(--foreground);
   font: inherit;
   font-size: 13px;
@@ -1567,8 +1486,8 @@
 }
 
 [data-theme='dark'] .select {
-  border-color: rgba(255, 255, 255, 0.09);
-  background: rgba(255, 255, 255, 0.055);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-medium);
 }
 
 .segmented {
@@ -1576,11 +1495,11 @@
   width: fit-content;
   padding: 3px;
   border-radius: 12px;
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--glass-bg-medium);
 }
 
 [data-theme='dark'] .segmented {
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--glass-bg-medium);
 }
 
 .segmented button {
@@ -1597,28 +1516,28 @@
 }
 
 .segmented .segmentActive {
-  background: rgba(255, 255, 255, 0.72);
+  background: var(--glass-input-bg-hover);
   color: var(--foreground);
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.09);
+  box-shadow: 0 1px 6px var(--glass-shadow-subtle);
 }
 
 [data-theme='dark'] .segmented .segmentActive {
-  background: rgba(255, 255, 255, 0.11);
+  background: var(--glass-bg-heavy);
 }
 
 .shortcutTable {
   display: grid;
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  border: 1px solid var(--glass-border);
   border-radius: 10px;
   overflow: hidden;
-  background: var(--settings-glass-bg);
-  box-shadow: var(--settings-glass-shadow);
+  background: var(--glass-panel);
+  box-shadow: 0 6px 18px var(--glass-shadow-subtle);
   backdrop-filter: blur(20px) saturate(1.14);
   -webkit-backdrop-filter: blur(20px) saturate(1.14);
 }
 
 [data-theme='dark'] .shortcutTable {
-  border-color: var(--settings-glass-border);
+  border-color: var(--glass-border);
 }
 
 .shortcutGroup {
@@ -1626,11 +1545,11 @@
 }
 
 .shortcutGroup + .shortcutGroup {
-  border-top: 1px solid rgba(0, 0, 0, 0.055);
+  border-top: 1px solid var(--glass-border);
 }
 
 [data-theme='dark'] .shortcutGroup + .shortcutGroup {
-  border-top-color: rgba(255, 255, 255, 0.06);
+  border-top-color: var(--glass-border);
 }
 
 .shortcutGroupTitle {
@@ -1655,12 +1574,12 @@
 
 .shortcutGroupTitle + .shortcutRow,
 .shortcutRow + .shortcutRow {
-  border-top: 1px solid rgba(0, 0, 0, 0.055);
+  border-top: 1px solid var(--glass-border);
 }
 
 [data-theme='dark'] .shortcutGroupTitle + .shortcutRow,
 [data-theme='dark'] .shortcutRow + .shortcutRow {
-  border-top-color: rgba(255, 255, 255, 0.06);
+  border-top-color: var(--glass-border);
 }
 
 .shortcutRow span {
@@ -1683,10 +1602,10 @@
   min-width: 26px;
   height: 25px;
   padding: 0 8px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-bottom-color: rgba(0, 0, 0, 0.16);
+  border: 1px solid var(--glass-border-strong);
+  border-bottom-color: var(--glass-border-heavy);
   border-radius: 7px;
-  background: rgba(255, 255, 255, 0.62);
+  background: var(--glass-input-bg-hover);
   color: var(--foreground);
   font: inherit;
   font-size: 12px;
@@ -1695,9 +1614,9 @@
 }
 
 [data-theme='dark'] .shortcutRow kbd {
-  border-color: rgba(255, 255, 255, 0.08);
-  border-bottom-color: rgba(255, 255, 255, 0.16);
-  background: rgba(255, 255, 255, 0.055);
+  border-color: var(--glass-border);
+  border-bottom-color: var(--glass-border-heavy);
+  background: var(--glass-bg-medium);
 }
 
 .connectionIcon {
@@ -1707,12 +1626,12 @@
   flex-shrink: 0;
   place-items: center;
   border-radius: 10px;
-  background: rgba(0, 0, 0, 0.05);
+  background: var(--glass-bg-light);
   color: var(--settings-muted);
 }
 
 [data-theme='dark'] .connectionIcon {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg-medium);
 }
 
 .statusPill {
@@ -1723,14 +1642,14 @@
   height: 26px;
   padding: 0 10px;
   border-radius: 999px;
-  background: rgba(142, 142, 147, 0.14);
+  background: var(--glass-bg-medium);
   color: var(--settings-muted);
   font-size: 12px;
   font-weight: 700;
 }
 
 .statusPillOn {
-  background: rgba(34, 197, 94, 0.14);
+  background: var(--glass-tint-moss);
   color: var(--success);
 }
 
@@ -1757,7 +1676,7 @@
 }
 
 .secondaryBtn {
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--glass-border-strong);
   background: transparent;
   color: var(--foreground);
 }
@@ -1777,7 +1696,7 @@
 }
 
 [data-theme='dark'] .secondaryBtn {
-  border-color: rgba(255, 255, 255, 0.09);
+  border-color: var(--glass-border-strong);
 }
 
 .taskRowAction {
@@ -1791,13 +1710,13 @@
   gap: 12px;
   padding: 14px 16px;
   margin-top: 12px;
-  border: 1px solid var(--settings-glass-border);
+  border: 1px solid var(--glass-border);
   border-radius: 12px;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
-    var(--settings-glass-bg);
+    linear-gradient(180deg, var(--glass-bg-subtle), transparent),
+    var(--glass-panel);
   color: var(--foreground);
-  box-shadow: var(--settings-glass-shadow);
+  box-shadow: 0 6px 18px var(--glass-shadow-subtle);
   backdrop-filter: blur(20px) saturate(1.12);
   -webkit-backdrop-filter: blur(20px) saturate(1.12);
 }
@@ -1832,10 +1751,10 @@
   align-items: center;
   justify-content: center;
   gap: 8px;
-  border: 1px solid var(--settings-glass-border);
+  border: 1px solid var(--glass-border);
   border-radius: 10px;
-  background: var(--settings-glass-bg);
-  box-shadow: var(--settings-glass-shadow);
+  background: var(--glass-panel);
+  box-shadow: 0 6px 18px var(--glass-shadow-subtle);
   backdrop-filter: blur(20px) saturate(1.14);
   -webkit-backdrop-filter: blur(20px) saturate(1.14);
   color: var(--settings-muted);
@@ -1870,14 +1789,14 @@
   gap: 10px;
   min-width: 0;
   padding: 13px;
-  border: 1px solid var(--settings-glass-border);
+  border: 1px solid var(--glass-border);
   border-radius: 10px;
-  background: var(--settings-glass-bg);
+  background: var(--glass-panel);
   color: var(--foreground);
   font: inherit;
   text-align: left;
   cursor: pointer;
-  box-shadow: var(--settings-glass-shadow);
+  box-shadow: 0 6px 18px var(--glass-shadow-subtle);
   backdrop-filter: blur(18px) saturate(1.12);
   -webkit-backdrop-filter: blur(18px) saturate(1.12);
   transition:
@@ -1887,8 +1806,8 @@
 }
 
 .presetCard:hover {
-  background: var(--settings-glass-hover);
-  border-color: color-mix(in oklch, var(--settings-glass-border) 72%, var(--foreground));
+  background: var(--glass-panel-strong);
+  border-color: color-mix(in oklch, var(--glass-border) 72%, var(--foreground));
 }
 
 .presetCard:focus-visible {
@@ -1897,16 +1816,16 @@
 }
 
 .presetCardActive {
-  border-color: color-mix(in oklch, var(--settings-accent) 34%, var(--settings-glass-border));
+  border-color: color-mix(in oklch, var(--settings-accent) 34%, var(--glass-border));
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
-    var(--settings-glass-hover);
+    linear-gradient(180deg, var(--glass-bg-subtle), transparent),
+    var(--glass-panel-strong);
 }
 
 [data-theme='dark'] .presetCardActive {
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
-    var(--settings-glass-hover);
+    linear-gradient(180deg, var(--glass-bg-subtle), transparent),
+    var(--glass-panel-strong);
 }
 
 .presetSwatches {
@@ -1919,7 +1838,7 @@
   height: 20px;
   border-radius: 50%;
   flex-shrink: 0;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 3px var(--glass-shadow-subtle);
 }
 
 .presetCardLabel {
@@ -1955,11 +1874,11 @@
   .sidebar {
     padding: 10px 12px 12px;
     border-right: 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    border-bottom: 1px solid var(--glass-border);
   }
 
   [data-theme='dark'] .sidebar {
-    border-bottom-color: rgba(255, 255, 255, 0.06);
+    border-bottom-color: var(--glass-border);
   }
 
   .nav {
@@ -1997,7 +1916,7 @@
     min-height: 34px;
     padding: 0 10px;
     border: 1px solid transparent;
-    background: rgba(255, 255, 255, 0.025);
+    background: var(--glass-bg-subtle);
     font-size: 13px;
     font-weight: 540;
     white-space: nowrap;
@@ -2009,13 +1928,13 @@
   }
 
   [data-theme='dark'] .navItem {
-    background: rgba(255, 255, 255, 0.035);
+    background: var(--glass-bg-subtle);
   }
 
   .navItemActive {
-    border-color: var(--settings-glass-border);
-    background: var(--settings-glass-hover);
-    box-shadow: var(--settings-glass-shadow);
+    border-color: var(--glass-border);
+    background: var(--glass-panel-strong);
+    box-shadow: 0 6px 18px var(--glass-shadow-subtle);
     font-weight: 580;
   }
 
diff --git a/app/desktop/src/components/ShortcutHelp.module.css b/app/desktop/src/components/ShortcutHelp.module.css
index 3be3e25e1..523d5e58d 100644
--- a/app/desktop/src/components/ShortcutHelp.module.css
+++ b/app/desktop/src/components/ShortcutHelp.module.css
@@ -5,7 +5,7 @@
   display: grid;
   place-items: center;
   padding: 24px;
-  background: rgba(0, 0, 0, 0.34);
+  background: var(--glass-shadow);
   animation: shortcutOverlayIn 0.14s ease-out;
 }
 
@@ -13,22 +13,22 @@
   width: min(640px, calc(100vw - 40px));
   max-height: min(720px, calc(100vh - 48px));
   overflow: hidden;
-  border: 1px solid rgba(15, 23, 42, 0.08);
+  border: 1px solid var(--glass-border-strong);
   border-radius: 12px;
-  background: rgba(252, 252, 253, 0.98);
+  background: var(--glass-light-fill);
   box-shadow:
-    0 24px 68px rgba(15, 23, 42, 0.2),
-    0 1px 0 rgba(255, 255, 255, 0.82) inset;
+    0 24px 68px var(--glass-shadow),
+    0 1px 0 var(--glass-input-bg-hover) inset;
   color: var(--foreground);
   animation: shortcutDialogIn 0.16s ease-out;
 }
 
 [data-theme='dark'] .dialog {
-  border-color: rgba(255, 255, 255, 0.09);
-  background: rgba(30, 30, 37, 0.98);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-panel-overlay);
   box-shadow:
-    0 28px 78px rgba(0, 0, 0, 0.42),
-    0 1px 0 rgba(255, 255, 255, 0.055) inset;
+    0 28px 78px var(--glass-shadow),
+    0 1px 0 var(--glass-bg-medium) inset;
 }
 
 .header {
@@ -37,11 +37,11 @@
   align-items: center;
   gap: 10px;
   padding: 14px 16px 12px;
-  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
+  border-bottom: 1px solid var(--glass-border);
 }
 
 [data-theme='dark'] .header {
-  border-bottom-color: rgba(255, 255, 255, 0.07);
+  border-bottom-color: var(--glass-border);
 }
 
 .headerIcon,
@@ -56,12 +56,12 @@
   width: 30px;
   height: 30px;
   border-radius: 8px;
-  background: rgba(15, 23, 42, 0.055);
+  background: var(--glass-bg-medium);
   color: color-mix(in oklch, var(--foreground) 74%, var(--muted-foreground));
 }
 
 [data-theme='dark'] .headerIcon {
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--glass-bg-medium);
 }
 
 .title {
@@ -89,13 +89,13 @@
 .closeBtn:hover,
 .closeBtn:focus-visible {
   outline: none;
-  background: rgba(15, 23, 42, 0.06);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 
 [data-theme='dark'] .closeBtn:hover,
 [data-theme='dark'] .closeBtn:focus-visible {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--glass-bg-strong);
 }
 
 .groupList {
@@ -143,11 +143,11 @@
   min-height: 54px;
   padding: 8px 9px;
   border-radius: 9px;
-  background: rgba(15, 23, 42, 0.035);
+  background: var(--glass-bg-subtle);
 }
 
 [data-theme='dark'] .commandRow {
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
 }
 
 .commandText {
@@ -196,10 +196,10 @@
   min-width: 27px;
   min-height: 25px;
   padding: 2px 7px 3px;
-  border: 1px solid rgba(15, 23, 42, 0.09);
-  border-bottom-color: rgba(15, 23, 42, 0.18);
+  border: 1px solid var(--glass-border-strong);
+  border-bottom-color: var(--glass-border-heavy);
   border-radius: 7px;
-  background: rgba(255, 255, 255, 0.78);
+  background: var(--glass-input-bg-hover);
   color: var(--foreground);
   font-family: var(--font-sans);
   font-size: 11.5px;
@@ -209,9 +209,9 @@
 }
 
 [data-theme='dark'] .keyGroup kbd {
-  border-color: rgba(255, 255, 255, 0.09);
-  border-bottom-color: rgba(255, 255, 255, 0.18);
-  background: rgba(255, 255, 255, 0.065);
+  border-color: var(--glass-border-strong);
+  border-bottom-color: var(--glass-border-heavy);
+  background: var(--glass-bg-medium);
 }
 
 @keyframes shortcutOverlayIn {
diff --git a/app/desktop/src/components/TaskList.module.css b/app/desktop/src/components/TaskList.module.css
index 9dd22456c..df226c18c 100644
--- a/app/desktop/src/components/TaskList.module.css
+++ b/app/desktop/src/components/TaskList.module.css
@@ -2,15 +2,15 @@
   width: min(100%, 680px);
   margin: 2px 0 8px;
   padding: 8px 10px;
-  border: 1px solid rgba(255, 255, 255, 0.075);
+  border: 1px solid var(--glass-border);
   border-radius: 9px;
-  background: rgba(255, 255, 255, 0.022);
+  background: var(--glass-bg-subtle);
   color: var(--foreground);
 }
 
 [data-theme='light'] .root {
-  border-color: rgba(15, 23, 42, 0.09);
-  background: rgba(15, 23, 42, 0.024);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-subtle);
 }
 
 .header,
@@ -68,7 +68,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 7px;
-  background: rgba(255, 255, 255, 0.035);
+  background: var(--glass-bg-subtle);
 }
 
 .entryText {
diff --git a/app/desktop/src/components/TeamRunDock.module.css b/app/desktop/src/components/TeamRunDock.module.css
index 64e0de468..2e1443f7e 100644
--- a/app/desktop/src/components/TeamRunDock.module.css
+++ b/app/desktop/src/components/TeamRunDock.module.css
@@ -2,13 +2,13 @@
   width: min(100%, 760px);
   margin: 0 auto 14px;
   padding: 10px 12px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--glass-border-strong);
   border-radius: 15px;
-  background: rgba(255, 255, 255, 0.035);
+  background: var(--glass-bg-subtle);
   color: var(--muted-foreground);
   box-shadow:
-    0 14px 30px rgba(0, 0, 0, 0.055),
-    0 1px 0 rgba(255, 255, 255, 0.018) inset;
+    0 14px 30px var(--glass-bg-medium),
+    0 1px 0 var(--glass-bg-subtle) inset;
 }
 
 .header {
@@ -26,13 +26,13 @@
   width: 24px;
   height: 24px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   color: var(--muted-foreground);
 }
 
 .signalActive {
   color: rgb(99, 214, 125);
-  background: rgba(99, 214, 125, 0.1);
+  background: var(--glass-tint-moss);
 }
 
 .titleBlock {
@@ -82,7 +82,7 @@
 .statusPill {
   flex: 0 0 auto;
   padding: 3px 8px;
-  background: rgba(255, 255, 255, 0.045);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--foreground) 78%, var(--muted-foreground) 22%);
 }
 
@@ -95,7 +95,7 @@
   flex: 0 0 auto;
   padding: 3px 9px;
   border: 0;
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
   cursor: pointer;
 }
@@ -103,7 +103,7 @@
 .openButton:hover,
 .openButton:focus-visible {
   outline: none;
-  background: rgba(255, 255, 255, 0.085);
+  background: var(--glass-bg-strong);
 }
 
 .metrics {
@@ -118,7 +118,7 @@
 .metrics span {
   max-width: 100%;
   padding: 3px 7px;
-  background: rgba(255, 255, 255, 0.028);
+  background: var(--glass-bg-subtle);
   color: var(--text-weaker);
 }
 
@@ -143,7 +143,7 @@
   max-width: 100%;
   padding: 2px 7px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.025);
+  background: var(--glass-bg-subtle);
   font-weight: 500;
   white-space: nowrap;
 }
@@ -162,9 +162,9 @@
 }
 
 [data-theme='light'] .root {
-  border-color: rgba(15, 23, 42, 0.075);
-  background: rgba(15, 23, 42, 0.03);
-  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-subtle);
+  box-shadow: 0 12px 28px var(--glass-shadow-subtle);
 }
 
 [data-theme='light'] .signal,
@@ -173,7 +173,7 @@
 [data-theme='light'] .metrics span,
 [data-theme='light'] .localExecution strong,
 [data-theme='light'] .localExecution span {
-  background: rgba(15, 23, 42, 0.045);
+  background: var(--glass-bg-light);
 }
 
 @media (max-width: 720px) {
diff --git a/app/desktop/src/components/ThreadPanel.module.css b/app/desktop/src/components/ThreadPanel.module.css
index ec2f0845c..5cf8b97ee 100644
--- a/app/desktop/src/components/ThreadPanel.module.css
+++ b/app/desktop/src/components/ThreadPanel.module.css
@@ -41,12 +41,12 @@
 }
 
 .createBtn:hover {
-  background: rgba(15, 23, 42, 0.055);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 
 [data-theme='dark'] .createBtn:hover {
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
 }
 
 .createBtn:disabled {
@@ -58,9 +58,9 @@
   width: 100%;
   height: 28px;
   padding: 0 9px;
-  border: 1px solid rgba(15, 23, 42, 0.06);
+  border: 1px solid var(--glass-border);
   border-radius: 12px;
-  background: rgba(15, 23, 42, 0.022);
+  background: var(--glass-bg-subtle);
   color: var(--foreground);
   font-family: var(--font-sans);
   font-size: 12.5px;
@@ -68,8 +68,8 @@
 }
 
 [data-theme='dark'] .search {
-  border-color: rgba(255, 255, 255, 0.045);
-  background: rgba(255, 255, 255, 0.02);
+  border-color: var(--glass-border-subtle);
+  background: var(--glass-bg-subtle);
 }
 
 .search::placeholder {
@@ -77,13 +77,13 @@
 }
 
 .search:focus {
-  border-color: rgba(15, 23, 42, 0.12);
-  background: rgba(15, 23, 42, 0.04);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='dark'] .search:focus {
-  border-color: rgba(255, 255, 255, 0.11);
-  background: rgba(255, 255, 255, 0.04);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-light);
 }
 
 .filterBar {
@@ -115,13 +115,13 @@
 
 .filterBtn:hover,
 .filterBtnActive {
-  background: rgba(15, 23, 42, 0.042);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--foreground) 80%, var(--muted-foreground) 20%);
 }
 
 [data-theme='dark'] .filterBtn:hover,
 [data-theme='dark'] .filterBtnActive {
-  background: rgba(255, 255, 255, 0.042);
+  background: var(--glass-bg-light);
 }
 
 .filterBtn span,
@@ -239,20 +239,20 @@
 
 .itemRow:hover,
 .itemRow:focus-within {
-  background: rgba(15, 23, 42, 0.032);
+  background: var(--glass-bg-subtle);
 }
 
 .itemRowSelected {
-  background: rgba(15, 23, 42, 0.038);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='dark'] .itemRow:hover,
 [data-theme='dark'] .itemRow:focus-within {
-  background: rgba(255, 255, 255, 0.028);
+  background: var(--glass-bg-subtle);
 }
 
 [data-theme='dark'] .itemRowSelected {
-  background: rgba(255, 255, 255, 0.034);
+  background: var(--glass-bg-subtle);
 }
 
 /* ── Info ──────────────────────────────────── */
@@ -286,7 +286,7 @@
   min-height: 16px;
   padding: 1px 6px;
   border-radius: 999px;
-  background: rgba(15, 23, 42, 0.06);
+  background: var(--glass-bg-medium);
   color: var(--muted-foreground);
   font-size: 10.5px;
   font-weight: 460;
@@ -297,7 +297,7 @@
 }
 
 [data-theme='dark'] .statusPill {
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
 }
 
 .statusPillRunning {
@@ -354,9 +354,9 @@
   padding: 0;
   transition: background 0.1s;
 }
-.actionBtn:hover { background: rgba(15,23,42,0.055); color: var(--foreground); }
+.actionBtn:hover { background: var(--glass-bg-medium); color: var(--foreground); }
 
-[data-theme='dark'] .actionBtn:hover { background: rgba(255,255,255,0.055); }
+[data-theme='dark'] .actionBtn:hover { background: var(--glass-bg-medium); }
 
 .editRow {
   display: flex;
@@ -365,11 +365,11 @@
   min-height: 32px;
   padding: 3px 5px 3px 8px;
   border-radius: 13px;
-  background: rgba(15, 23, 42, 0.045);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='dark'] .editRow {
-  background: rgba(255, 255, 255, 0.052);
+  background: var(--glass-bg-medium);
 }
 
 .confirmRow {
@@ -380,12 +380,12 @@
   min-height: 34px;
   padding: 4px 6px 4px 8px;
   border-radius: 13px;
-  background: rgba(15, 23, 42, 0.04);
-  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
+  background: var(--glass-bg-light);
+  box-shadow: inset 0 0 0 1px var(--glass-shadow-subtle);
 }
 
 [data-theme='dark'] .confirmRow {
-  background: rgba(255, 255, 255, 0.034);
+  background: var(--glass-bg-subtle);
   box-shadow: none;
 }
 
@@ -432,12 +432,12 @@
 }
 
 .confirmActionBtn:hover {
-  background: rgba(15, 23, 42, 0.05);
+  background: var(--glass-bg-light);
   color: var(--foreground);
 }
 
 [data-theme='dark'] .confirmActionBtn:hover {
-  background: rgba(255, 255, 255, 0.052);
+  background: var(--glass-bg-medium);
 }
 
 .confirmCancelBtn {
@@ -459,7 +459,7 @@
 [data-theme='dark'] .deleteConfirm {
   background: color-mix(in oklch, var(--destructive) 19%, transparent);
   color: color-mix(in oklch, var(--destructive) 70%, white);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 8px 20px var(--glass-shadow-subtle);
 }
 
 [data-theme='dark'] .deleteConfirm:hover {
@@ -492,9 +492,9 @@
   width: 100%;
   min-height: 32px;
   padding: 5px 8px;
-  border: 1px dashed rgba(15, 23, 42, 0.12);
+  border: 1px dashed var(--glass-border-strong);
   border-radius: 13px;
-  background: rgba(15, 23, 42, 0.018);
+  background: var(--glass-bg-subtle);
   color: var(--muted-foreground);
   cursor: pointer;
   font-family: var(--font-sans);
@@ -507,19 +507,19 @@
 }
 
 [data-theme='dark'] .emptyCreate {
-  border-color: rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.018);
+  border-color: var(--glass-border);
+  background: var(--glass-bg-subtle);
 }
 
 .emptyCreate:hover {
-  border-color: rgba(15, 23, 42, 0.16);
-  background: rgba(15, 23, 42, 0.04);
+  border-color: var(--glass-border-heavy);
+  background: var(--glass-bg-light);
   color: var(--foreground);
 }
 
 [data-theme='dark'] .emptyCreate:hover {
-  border-color: rgba(255, 255, 255, 0.12);
-  background: rgba(255, 255, 255, 0.04);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-light);
 }
 
 .emptyCreate:disabled {
diff --git a/app/desktop/src/components/Toast.module.css b/app/desktop/src/components/Toast.module.css
index 7b9069229..ba2bc271f 100644
--- a/app/desktop/src/components/Toast.module.css
+++ b/app/desktop/src/components/Toast.module.css
@@ -24,12 +24,12 @@
   cursor: default;
   animation: toast-slide-in var(--duration-medium) var(--ease-out);
   box-shadow:
-    0 16px 36px rgba(15, 23, 42, 0.11),
-    0 4px 12px rgba(15, 23, 42, 0.06),
+    0 16px 36px var(--glass-bg-heavy),
+    0 4px 12px var(--glass-bg-medium),
     0 1px 0 rgba(255, 255, 255, 0.55) inset;
   word-break: break-word;
-  border: 1px solid rgba(12, 18, 28, 0.07);
-  background: rgba(255, 255, 255, 0.66);
+  border: 1px solid var(--glass-border);
+  background: var(--glass-input-bg-hover);
   color: var(--foreground);
   backdrop-filter: blur(28px) saturate(1.16);
   -webkit-backdrop-filter: blur(28px) saturate(1.16);
@@ -39,14 +39,14 @@
 }
 
 [data-theme='dark'] .toast {
-  border-color: rgba(255, 255, 255, 0.085);
+  border-color: var(--glass-border-strong);
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
-    rgba(37, 37, 45, 0.64);
+    linear-gradient(180deg, var(--glass-bg-medium), var(--glass-bg-subtle)),
+    var(--glass-panel);
   box-shadow:
     0 16px 34px rgba(0, 0, 0, 0.26),
-    0 4px 12px rgba(0, 0, 0, 0.13),
-    0 1px 0 rgba(255, 255, 255, 0.08) inset;
+    0 4px 12px var(--glass-bg-heavy),
+    0 1px 0 var(--glass-bg-strong) inset;
 }
 
 .toast.exiting {
@@ -57,19 +57,19 @@
 /* ── Variants ── */
 
 .success {
-  border-color: rgba(105, 201, 103, 0.22);
+  border-color: var(--glass-tint-moss);
 }
 
 .error {
-  border-color: rgba(255, 126, 120, 0.22);
+  border-color: var(--glass-tint-danger);
 }
 
 .warning {
-  border-color: rgba(251, 191, 36, 0.22);
+  border-color: var(--glass-tint-amber);
 }
 
 .info {
-  border-color: rgba(93, 104, 204, 0.22);
+  border-color: var(--glass-tint-plum);
 }
 
 /* ── Inner elements ── */
diff --git a/app/desktop/src/components/ToolGroup.module.css b/app/desktop/src/components/ToolGroup.module.css
index c3e8115bc..59f643391 100644
--- a/app/desktop/src/components/ToolGroup.module.css
+++ b/app/desktop/src/components/ToolGroup.module.css
@@ -3,15 +3,15 @@
   width: fit-content;
   max-width: 100%;
   margin: 3px 0;
-  border: 1px solid rgba(255, 255, 255, 0.065);
+  border: 1px solid var(--glass-border);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.018);
+  background: var(--glass-bg-subtle);
   overflow: hidden;
 }
 
 [data-theme='light'] .root {
-  border-color: rgba(15, 23, 42, 0.07);
-  background: rgba(15, 23, 42, 0.016);
+  border-color: var(--glass-border);
+  background: var(--glass-bg-subtle);
 }
 
 /* ── Summary header (collapsed state) ──────── */
@@ -36,7 +36,7 @@
 
 .summary:hover,
 .summary:focus-visible {
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--foreground) 82%, transparent);
   outline: none;
 }
@@ -74,12 +74,12 @@
   font-weight: 540;
   line-height: 1.45;
   white-space: nowrap;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--foreground) 58%, var(--muted-foreground) 42%);
 }
 
 [data-theme='light'] .categoryChip {
-  background: rgba(15, 23, 42, 0.04);
+  background: var(--glass-bg-light);
 }
 
 .categoryChip .chipCount {
@@ -95,7 +95,7 @@
   font-size: 11px;
   font-weight: 540;
   line-height: 1.45;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-light);
 }
 
 /* ── Expanded body ─────────────────────────── */
@@ -112,11 +112,11 @@
   margin: 0;
   border: none;
   border-radius: 6px;
-  background: rgba(255, 255, 255, 0.015);
+  background: var(--glass-bg-subtle);
 }
 
 [data-theme='light'] .toolCard {
-  background: rgba(15, 23, 42, 0.012);
+  background: var(--glass-bg-subtle);
 }
 
 .toolCardHeader {
@@ -140,7 +140,7 @@
 
 .toolCardHeader:hover,
 .toolCardHeader:focus-visible {
-  background: rgba(255, 255, 255, 0.035);
+  background: var(--glass-bg-subtle);
   color: color-mix(in oklch, var(--foreground) 78%, transparent);
   outline: none;
 }
@@ -204,7 +204,7 @@
   padding: 2px 8px;
   border: none;
   border-radius: 5px;
-  background: rgba(255, 255, 255, 0.035);
+  background: var(--glass-bg-subtle);
   color: color-mix(in oklch, var(--foreground) 54%, transparent);
   cursor: pointer;
   font-size: 11px;
@@ -216,7 +216,7 @@
 
 .toolCardBody .showParamsBtn:hover,
 .toolCardBody .showParamsBtn:focus-visible {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg-medium);
   color: color-mix(in oklch, var(--foreground) 76%, transparent);
   outline: none;
 }
@@ -224,7 +224,7 @@
 .toolCardParams {
   margin-top: 4px;
   padding: 6px 8px;
-  background: rgba(255, 255, 255, 0.025);
+  background: var(--glass-bg-subtle);
   border-radius: 5px;
   font-size: 11px;
   font-family: var(--font-mono);
@@ -240,7 +240,7 @@
   margin: 3px 0;
   padding: 4px 8px;
   border-radius: 5px;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--glass-bg-subtle);
   font-size: 11px;
   color: color-mix(in oklch, var(--foreground) 52%, var(--muted-foreground) 48%);
 }
@@ -254,14 +254,14 @@
   margin: 3px 0;
   padding: 4px 8px;
   border-radius: 5px;
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--glass-bg-subtle);
   font-size: 11px;
 }
 
 .toolOutput {
   margin: 2px 0;
   padding: 4px 8px;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--glass-bg-subtle);
   border-radius: 4px;
   font-size: 11px;
   font-family: var(--font-mono);
@@ -284,37 +284,37 @@
   font-size: 10px;
   font-weight: 540;
   font-family: var(--font-mono);
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--glass-bg-subtle);
   color: color-mix(in oklch, var(--foreground) 54%, var(--muted-foreground) 46%);
 }
 
 /* ── Status badges ─────────────────────────── */
 .statusPending {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--glass-bg-subtle);
   color: color-mix(in oklch, var(--muted-foreground) 74%, var(--foreground) 26%);
 }
 
 .statusRunning {
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-light);
   color: color-mix(in oklch, var(--warning) 72%, var(--foreground) 28%);
 }
 
 .statusDone {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--glass-bg-subtle);
   color: color-mix(in oklch, var(--success) 68%, var(--foreground) 32%);
 }
 
 .statusFailed {
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--glass-bg-subtle);
   color: color-mix(in oklch, var(--destructive) 72%, var(--foreground) 28%);
 }
 
 /* ── Light theme overrides ─────────────────── */
 [data-theme='light'] .toolCardBody .showParamsBtn {
-  background: rgba(15, 23, 42, 0.03);
+  background: var(--glass-bg-subtle);
 }
 
 [data-theme='light'] .toolCardBody .showParamsBtn:hover,
 [data-theme='light'] .toolCardBody .showParamsBtn:focus-visible {
-  background: rgba(15, 23, 42, 0.06);
+  background: var(--glass-bg-medium);
 }
diff --git a/app/desktop/src/components/WelcomeScreen.module.css b/app/desktop/src/components/WelcomeScreen.module.css
index 2aa4be2de..62e5cf413 100644
--- a/app/desktop/src/components/WelcomeScreen.module.css
+++ b/app/desktop/src/components/WelcomeScreen.module.css
@@ -28,22 +28,22 @@
   width: 38px;
   height: 38px;
   place-items: center;
-  border: 1px solid rgba(0, 0, 0, 0.07);
+  border: 1px solid var(--glass-border);
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.54);
+  background: var(--glass-input-bg);
   color: var(--primary);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.74),
-    0 16px 38px rgba(15, 23, 42, 0.08);
+    inset 0 1px 0 var(--glass-input-bg-hover),
+    0 16px 38px var(--glass-bg-strong);
   backdrop-filter: blur(24px) saturate(1.2);
   -webkit-backdrop-filter: blur(24px) saturate(1.2);
 }
 
 [data-theme='dark'] .brandMark {
-  border-color: rgba(255, 255, 255, 0.08);
-  background: rgba(42, 42, 52, 0.54);
+  border-color: var(--glass-border);
+  background: var(--glass-panel);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 1px 0 var(--glass-bg-strong),
     0 18px 44px rgba(0, 0, 0, 0.2);
 }
 
@@ -69,21 +69,21 @@
   flex-direction: column;
   gap: 12px;
   padding: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.07);
+  border: 1px solid var(--glass-border);
   border-radius: 18px;
-  background: rgba(255, 255, 255, 0.48);
+  background: var(--glass-input-bg);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.72),
-    0 22px 58px rgba(15, 23, 42, 0.08);
+    inset 0 1px 0 var(--glass-input-bg-hover),
+    0 22px 58px var(--glass-bg-strong);
   backdrop-filter: blur(28px) saturate(1.22);
   -webkit-backdrop-filter: blur(28px) saturate(1.22);
 }
 
 [data-theme='dark'] .launcher {
-  border-color: rgba(255, 255, 255, 0.085);
-  background: rgba(31, 31, 38, 0.56);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-panel);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 1px 0 var(--glass-bg-strong),
     0 24px 64px rgba(0, 0, 0, 0.26);
 }
 
@@ -97,11 +97,11 @@
   gap: 6px;
   padding: 4px;
   border-radius: 13px;
-  background: rgba(0, 0, 0, 0.045);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='dark'] .modeRow {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg-medium);
 }
 
 .modePill {
@@ -123,14 +123,14 @@
 }
 
 .modePillActive {
-  background: rgba(255, 255, 255, 0.72);
+  background: var(--glass-input-bg-hover);
   color: var(--foreground);
-  box-shadow: 0 1px 10px rgba(15, 23, 42, 0.08);
+  box-shadow: 0 1px 10px var(--glass-shadow-subtle);
 }
 
 [data-theme='dark'] .modePillActive {
-  background: rgba(255, 255, 255, 0.1);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
+  background: var(--glass-bg-heavy);
+  box-shadow: inset 0 1px 0 var(--glass-bg-medium);
 }
 
 .runtimeList {
@@ -157,12 +157,12 @@
 
 .runtimeItem:hover,
 .runtimeItemActive {
-  background: rgba(255, 255, 255, 0.48);
+  background: var(--glass-input-bg);
 }
 
 [data-theme='dark'] .runtimeItem:hover,
 [data-theme='dark'] .runtimeItemActive {
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--glass-bg-medium);
 }
 
 .runtimeItem:disabled {
@@ -177,13 +177,13 @@
   height: 34px;
   place-items: center;
   border-radius: 11px;
-  background: rgba(0, 0, 0, 0.055);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 
 [data-theme='dark'] .runtimeIcon,
 [data-theme='dark'] .profileIcon {
-  background: rgba(255, 255, 255, 0.07);
+  background: var(--glass-bg-medium);
 }
 
 .runtimeText {
@@ -227,7 +227,7 @@
   min-width: 56px;
   padding: 4px 8px;
   border-radius: 999px;
-  background: rgba(0, 0, 0, 0.055);
+  background: var(--glass-bg-medium);
   color: var(--muted-foreground);
   font-size: 11px;
   font-weight: 760;
@@ -235,17 +235,17 @@
 }
 
 .status_available {
-  background: rgba(52, 199, 89, 0.14);
+  background: var(--glass-tint-moss);
   color: var(--success);
 }
 
 .status_configuring {
-  background: rgba(255, 204, 0, 0.16);
+  background: var(--glass-tint-amber);
   color: var(--warning);
 }
 
 .status_unavailable {
-  background: rgba(255, 69, 58, 0.13);
+  background: var(--glass-tint-danger);
   color: var(--destructive);
 }
 
@@ -293,11 +293,11 @@
   gap: 3px;
   padding: 8px 10px;
   border-radius: 11px;
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='dark'] .metric {
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--glass-bg-medium);
 }
 
 .metric em {
@@ -324,17 +324,17 @@
   height: 9px;
   border-radius: 999px;
   background: var(--muted-foreground);
-  box-shadow: 0 0 0 5px rgba(142, 142, 147, 0.1);
+  box-shadow: 0 0 0 5px var(--glass-bg-medium);
 }
 
 .targetDotOnline {
   background: var(--success);
-  box-shadow: 0 0 0 5px rgba(52, 199, 89, 0.14);
+  box-shadow: 0 0 0 5px var(--glass-tint-moss);
 }
 
 .targetDotOffline {
   background: var(--destructive);
-  box-shadow: 0 0 0 5px rgba(255, 69, 58, 0.13);
+  box-shadow: 0 0 0 5px var(--glass-tint-danger);
 }
 
 .commandBox {
@@ -343,9 +343,9 @@
   align-items: center;
   gap: 13px;
   padding: 0 18px;
-  border: 1px solid rgba(0, 0, 0, 0.07);
+  border: 1px solid var(--glass-border);
   border-radius: 14px;
-  background: rgba(255, 255, 255, 0.58);
+  background: var(--glass-input-bg);
   color: var(--foreground);
   font: inherit;
   font-size: 15px;
@@ -356,9 +356,9 @@
 }
 
 [data-theme='dark'] .commandBox {
-  border-color: rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.055);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
+  border-color: var(--glass-border);
+  background: var(--glass-bg-medium);
+  box-shadow: inset 0 1px 0 var(--glass-bg-medium);
 }
 
 .commandBox span {
@@ -382,9 +382,9 @@
   align-items: center;
   gap: 7px;
   padding: 0 11px;
-  border: 1px solid rgba(0, 0, 0, 0.055);
+  border: 1px solid var(--glass-border);
   border-radius: 999px;
-  background: rgba(0, 0, 0, 0.045);
+  background: var(--glass-bg-light);
   color: var(--muted-foreground);
   font-size: 12px;
   font-weight: 700;
@@ -392,8 +392,8 @@
 
 [data-theme='dark'] .controlRow span,
 [data-theme='dark'] .chip {
-  border-color: rgba(255, 255, 255, 0.06);
-  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--glass-border);
+  background: var(--glass-bg-medium);
 }
 
 .suggestions {
@@ -420,7 +420,7 @@
 
 .chip {
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.38);
+  background: var(--glass-text-disabled);
   color: var(--foreground);
   font-family: var(--font-sans);
   cursor: pointer;
@@ -428,7 +428,7 @@
 }
 
 .chip:hover {
-  background: rgba(99, 102, 241, 0.13);
+  background: var(--glass-tint-plum);
 }
 
 .chip:active {
diff --git a/app/desktop/src/components/WorkspacePicker.module.css b/app/desktop/src/components/WorkspacePicker.module.css
index 1062377fc..867eae075 100644
--- a/app/desktop/src/components/WorkspacePicker.module.css
+++ b/app/desktop/src/components/WorkspacePicker.module.css
@@ -67,9 +67,9 @@
   gap: var(--space-sm);
   padding: var(--space-md);
   border-radius: var(--radius-lg);
-  background: rgba(37, 37, 45, 0.58);
-  border: 1px solid rgba(0, 0, 0, 0.24);
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
+  background: var(--glass-panel);
+  border: 1px solid var(--glass-border-heavy);
+  box-shadow: 0 10px 24px var(--glass-shadow-subtle);
   cursor: pointer;
   font-family: inherit;
   text-align: left;
@@ -82,7 +82,7 @@
 
 .card:hover {
   border-color: var(--ring);
-  background: rgba(37, 37, 45, 0.78);
+  background: var(--glass-panel);
 }
 
 .card:focus-visible {
@@ -92,11 +92,11 @@
 
 .cardSelected {
   border-color: var(--primary);
-  background: color-mix(in oklch, var(--primary) 6%, rgba(37, 37, 45, 0.58));
+  background: color-mix(in oklch, var(--primary) 6%, var(--glass-panel));
 }
 
 .cardSelected:hover {
-  background: color-mix(in oklch, var(--primary) 10%, rgba(37, 37, 45, 0.78));
+  background: color-mix(in oklch, var(--primary) 10%, var(--glass-panel));
   border-color: var(--primary);
 }
 
diff --git a/app/desktop/src/components/settings/agentCreation/AgentCreationWizard.module.css b/app/desktop/src/components/settings/agentCreation/AgentCreationWizard.module.css
index 7f77107bc..b2b1fe52a 100644
--- a/app/desktop/src/components/settings/agentCreation/AgentCreationWizard.module.css
+++ b/app/desktop/src/components/settings/agentCreation/AgentCreationWizard.module.css
@@ -4,14 +4,14 @@
   z-index: 1000;
   display: grid;
   place-items: center;
-  background: rgba(0, 0, 0, 0.42);
+  background: var(--glass-shadow);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   animation: wizardFadeIn 180ms ease;
 }
 
 [data-theme='dark'] .wizardOverlay {
-  background: rgba(0, 0, 0, 0.6);
+  background: var(--glass-shadow);
 }
 
 @keyframes wizardFadeIn {
@@ -29,7 +29,7 @@
   border: 1px solid var(--settings-glass-border);
   box-shadow:
     var(--settings-glass-shadow),
-    0 24px 64px rgba(15, 23, 42, 0.18);
+    0 24px 64px var(--glass-shadow);
   backdrop-filter: blur(28px) saturate(1.18);
   -webkit-backdrop-filter: blur(28px) saturate(1.18);
   animation: wizardSlideIn 220ms ease;
@@ -39,7 +39,7 @@
 [data-theme='dark'] .wizardModal {
   box-shadow:
     var(--settings-glass-shadow),
-    0 24px 64px rgba(0, 0, 0, 0.32);
+    0 24px 64px var(--glass-shadow);
 }
 
 @keyframes wizardSlideIn {
@@ -92,12 +92,12 @@
 }
 
 .wizardCloseBtn:hover {
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--glass-bg-medium);
   color: var(--foreground);
 }
 
 [data-theme='dark'] .wizardCloseBtn:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--glass-bg-strong);
 }
 
 .wizardSteps {
@@ -142,13 +142,13 @@
   flex-shrink: 0;
   place-items: center;
   border-radius: 50%;
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--glass-bg-medium);
   font-size: 11px;
   font-weight: 750;
 }
 
 [data-theme='dark'] .wizardStepIdx {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--glass-bg-strong);
 }
 
 .wizardStepActive .wizardStepIdx {
@@ -184,7 +184,7 @@
 
 .wizardBody::-webkit-scrollbar-thumb {
   border-radius: 999px;
-  background: rgba(142, 142, 147, 0.24);
+  background: var(--glass-border-heavy);
 }
 
 .wizardFooter {
@@ -231,9 +231,9 @@
   width: 100%;
   min-height: 38px;
   padding: 9px 12px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--glass-border-strong);
   border-radius: 9px;
-  background: rgba(255, 255, 255, 0.48);
+  background: var(--glass-input-bg);
   color: var(--foreground);
   font: inherit;
   font-size: 13px;
@@ -241,8 +241,8 @@
 }
 
 [data-theme='dark'] .wizardInput {
-  border-color: rgba(255, 255, 255, 0.09);
-  background: rgba(255, 255, 255, 0.055);
+  border-color: var(--glass-border-strong);
+  background: var(--glass-bg-medium);
 }
 
 .wizardInput:focus {
@@ -289,11 +289,11 @@
 }
 
 .emojiOption:hover {
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--glass-bg-medium);
 }
 
 [data-theme='dark'] .emojiOption:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--glass-bg-strong);
 }
 
 .emojiOptionSelected {
@@ -448,12 +448,12 @@
   flex-shrink: 0;
   place-items: center;
   border-radius: 8px;
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--glass-bg-light);
   font-size: 18px;
 }
 
 [data-theme='dark'] .templateEmoji {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg-medium);
 }
 
 .templateCardHeader strong {
@@ -577,7 +577,7 @@
 }
 
 .wizardDangerBtn {
-  border: 1px solid rgba(239, 68, 68, 0.2);
+  border: 1px solid var(--glass-tint-danger);
   background: transparent;
   color: var(--destructive);
 }
@@ -590,11 +590,11 @@
 }
 
 .wizardSecondaryBtn:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--glass-bg-light);
 }
 
 [data-theme='dark'] .wizardSecondaryBtn:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--glass-bg-medium);
 }
 
 .wizardBtnFull {
@@ -633,7 +633,7 @@
   margin: 4px 0 0;
   padding: 10px;
   border-radius: 8px;
-  background: rgba(0, 0, 0, 0.03);
+  background: var(--glass-bg-subtle);
   font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
   font-size: 11px;
   line-height: 1.55;
@@ -643,7 +643,7 @@
 }
 
 [data-theme='dark'] .reviewBlock pre {
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--glass-bg-light);
 }
 
 .reviewChips {
diff --git a/app/desktop/src/styles/themes.css b/app/desktop/src/styles/themes.css
index 11b2d2ea7..a0403db93 100644
--- a/app/desktop/src/styles/themes.css
+++ b/app/desktop/src/styles/themes.css
@@ -231,6 +231,42 @@
   --agent-card-active: rgba(0, 0, 0, 0.05);
   --agent-dot-online: #22c55e;
   --agent-dot-online-glow: 0 0 6px rgba(34, 197, 94, 0.25);
+
+  /* ── Glass tokens (light: dark overlay direction) ───────────────────── */
+  --glass-bg-subtle: rgba(0, 0, 0, 0.02);
+  --glass-bg-light: rgba(0, 0, 0, 0.035);
+  --glass-bg-medium: rgba(0, 0, 0, 0.05);
+  --glass-bg-strong: rgba(0, 0, 0, 0.065);
+  --glass-bg-heavy: rgba(0, 0, 0, 0.08);
+
+  --glass-bg-hover: rgba(0, 0, 0, 0.04);
+  --glass-bg-active: rgba(0, 0, 0, 0.06);
+
+  --glass-border-subtle: rgba(0, 0, 0, 0.035);
+  --glass-border: rgba(0, 0, 0, 0.055);
+  --glass-border-strong: rgba(0, 0, 0, 0.08);
+  --glass-border-heavy: rgba(0, 0, 0, 0.12);
+
+  --glass-panel: rgba(255, 255, 255, 0.78);
+  --glass-panel-strong: rgba(255, 255, 255, 0.92);
+  --glass-panel-overlay: rgba(255, 255, 255, 0.97);
+
+  --glass-tint-plum: rgba(99, 102, 241, 0.08);
+  --glass-tint-moss: rgba(34, 197, 94, 0.08);
+  --glass-tint-danger: rgba(239, 68, 68, 0.07);
+  --glass-tint-amber: rgba(245, 158, 11, 0.08);
+  --glass-tint-sky: rgba(59, 130, 246, 0.08);
+
+  --glass-shadow: rgba(0, 0, 0, 0.08);
+  --glass-shadow-subtle: rgba(0, 0, 0, 0.04);
+
+  --glass-text-muted: rgba(0, 0, 0, 0.45);
+  --glass-text-disabled: rgba(0, 0, 0, 0.25);
+
+  --glass-input-bg: rgba(0, 0, 0, 0.04);
+  --glass-input-bg-hover: rgba(255, 255, 255, 0.72);
+
+  --glass-light-fill: rgba(246, 247, 250, 0.92);
 }
 
 /* ── Shared glass/backdrop utilities ──────────────────────────────────── */
diff --git a/app/desktop/src/styles/tokens.css b/app/desktop/src/styles/tokens.css
index 9efc6b8d9..ee610c971 100644
--- a/app/desktop/src/styles/tokens.css
+++ b/app/desktop/src/styles/tokens.css
@@ -86,6 +86,57 @@
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
 
+  /* ═══════════════════════════════════════════════════════════════════
+     Glass Tokens — translucent overlay system
+     Dark theme default: white glow over dark canvas
+     Light theme: dark overlay over light canvas (reversed in themes.css)
+     20 tokens covering bg layers / borders / tints / shadows / text
+     ═══════════════════════════════════════════════════════════════════ */
+
+  /* Glass background layers (dark: white translucent) */
+  --glass-bg-subtle: rgba(255, 255, 255, 0.03);
+  --glass-bg-light: rgba(255, 255, 255, 0.045);
+  --glass-bg-medium: rgba(255, 255, 255, 0.065);
+  --glass-bg-strong: rgba(255, 255, 255, 0.08);
+  --glass-bg-heavy: rgba(255, 255, 255, 0.12);
+
+  /* Glass hover / active states */
+  --glass-bg-hover: rgba(255, 255, 255, 0.06);
+  --glass-bg-active: rgba(255, 255, 255, 0.1);
+
+  /* Glass borders */
+  --glass-border-subtle: rgba(255, 255, 255, 0.04);
+  --glass-border: rgba(255, 255, 255, 0.06);
+  --glass-border-strong: rgba(255, 255, 255, 0.1);
+  --glass-border-heavy: rgba(255, 255, 255, 0.15);
+
+  /* Glass panel backgrounds (dark semi-transparent solids) */
+  --glass-panel: rgba(36, 36, 44, 0.82);
+  --glass-panel-strong: rgba(31, 31, 39, 0.92);
+  --glass-panel-overlay: rgba(30, 30, 37, 0.98);
+
+  /* Tinted glass */
+  --glass-tint-plum: rgba(99, 102, 241, 0.12);
+  --glass-tint-moss: rgba(34, 197, 94, 0.12);
+  --glass-tint-danger: rgba(239, 68, 68, 0.1);
+  --glass-tint-amber: rgba(245, 158, 11, 0.12);
+  --glass-tint-sky: rgba(59, 130, 246, 0.12);
+
+  /* Glass shadows */
+  --glass-shadow: rgba(0, 0, 0, 0.25);
+  --glass-shadow-subtle: rgba(0, 0, 0, 0.12);
+
+  /* Glass text */
+  --glass-text-muted: rgba(255, 255, 255, 0.5);
+  --glass-text-disabled: rgba(255, 255, 255, 0.3);
+
+  /* Glass input fields */
+  --glass-input-bg: rgba(255, 255, 255, 0.48);
+  --glass-input-bg-hover: rgba(255, 255, 255, 0.72);
+
+  /* Light page fill (light-theme opaque panels) */
+  --glass-light-fill: rgba(250, 250, 251, 0.92);
+
   /* ── Surface Layers (base — theme overrides in themes.css) ────────── */
   --surface-base:         oklch(0.14 0.006 260);  /* bottom container */
   --surface-raised:       oklch(0.17 0.007 260);  /* cards/panels */
diff --git a/app/desktop/src/views/TeamRunConsole.module.css b/app/desktop/src/views/TeamRunConsole.module.css
index 14b319344..4bf75ba61 100644
--- a/app/desktop/src/views/TeamRunConsole.module.css
+++ b/app/desktop/src/views/TeamRunConsole.module.css
@@ -102,7 +102,7 @@
 
 .input:focus {
   border-color: var(--color-primary, #3b82f6);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+  box-shadow: 0 0 0 2px var(--glass-tint-sky);
 }
 
 .primaryBtn {
@@ -366,7 +366,7 @@
 
 .textarea:focus {
   border-color: var(--color-primary, #3b82f6);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+  box-shadow: 0 0 0 2px var(--glass-tint-sky);
 }
 
 .startRunActions {