diff --git a/src/styles/window/battery.css b/src/styles/window/battery.css
index 6b09bd2..cfb8cdc 100644
--- a/src/styles/window/battery.css
+++ b/src/styles/window/battery.css
@@ -6,21 +6,21 @@
   font-size: apply(font-lg);
   font-weight: bold;
 
-  color: @fg-a95;
+  color: @glass-text;
   margin: 6px 10px;
 }
 
 .battery-power-source {
   font-size: 0.9em;
   font-weight: 500;
-  color: @fg-a80;
+  color: @glass-text-secondary;
   margin: 0px 12px;
 }
 
 .battery-section-title {
   font-size: 0.9em;
   font-weight: 500;
-  color: @fg-a90;
+  color: @glass-text;
   margin: 8px 12px 4px 12px;
 }
 
@@ -32,7 +32,7 @@
   font-size: apply(font-lg);
   margin-right: 8px;
   font-weight: 500;
-  color: @fg-a95;
+  color: @glass-text;
 }
 
 #energy-mode-button-clickable {
@@ -44,11 +44,11 @@
 }
 
 #energy-mode-button-clickable:hover {
-  background: @fg-a10;
+  background: @glass-hover;
 }
 
 #energy-mode-button-clickable:hover #energy-mode-icon {
-  background-color: @fg-a25;
+  background-color: @glass-active;
 }
 
 #energy-mode-icon {
@@ -58,18 +58,18 @@
   margin-bottom: -2px;
   margin-right: 6px;
   margin-left: -6px;
-  background-color: @fg-a10;
-  color: @fg-a70;
+  background-color: @glass-hover;
+  color: @glass-text-secondary;
 }
 
 .battery-power-source {
   font-size: apply(font-sm);
   margin-bottom: -4px;
-  color: @fg-a50;
+  color: @glass-text-secondary;
 }
 .battery-section-title {
   font-size: apply(font-base);
-  color: @fg-a70;
+  color: @glass-text-secondary;
   margin: 2px 0 0 8px;
 }
 .battery-power-mode {
@@ -78,7 +78,7 @@
 
 .battery-settings-button:hover {
   margin-top: -5px;
-  background: @fg-a10;
+  background: @glass-hover;
   min-height: 30px;
   border-radius: apply(radius-sm);
 }
@@ -97,12 +97,12 @@
 #energy-mode-button {
   margin-top: -8px;
   margin-bottom: 4px;
-  color: @fg-a85;
+  color: @glass-text-secondary;
 }
 .gamemode-button {
   font-size: apply(font-sm);
   margin-left: -6px;
-  color: @fg-a85;
+  color: @glass-text-secondary;
 }
 
 #game-mode-button {
@@ -121,27 +121,27 @@
 }
 
 #game-mode-button-clickable:hover {
-  background: @fg-a10;
+  background: @glass-hover;
 }
 
 #game-mode-button-clickable:hover #game-mode-icon {
-  background-color: @fg-a25;
+  background-color: @glass-active;
 }
 
 #game-mode-icon {
   border-radius: apply(radius-full);
   padding: 4px;
   margin-right: 8px;
-  background-color: @fg-a10;
-  color: @fg-a70;
+  background-color: @glass-hover;
+  color: @glass-text-secondary;
 }
 
 #energy-mode-icon.connected {
-  background-color: @primary;
+  background-color: @glass-accent;
   color: @on-primary;
 }
 
 #game-mode-icon.connected {
-  background-color: @primary;
+  background-color: @glass-accent;
   color: @on-primary;
 }
diff --git a/src/styles/window/dock.css b/src/styles/window/dock.css
index f32da60..73217d7 100644
--- a/src/styles/window/dock.css
+++ b/src/styles/window/dock.css
@@ -5,10 +5,6 @@
     margin: 0;
 }
 
-#dock-canvas-box {
-    padding: 0px 50px 5px 50px;
-    background: transparent;
-}
 
 #dock-outer-box {
     background: transparent;
diff --git a/src/styles/window/lock.css b/src/styles/window/lock.css
index c0141f9..1671e78 100644
--- a/src/styles/window/lock.css
+++ b/src/styles/window/lock.css
@@ -7,14 +7,14 @@
 }
 
 #lock-notch-stack {
-    background-color: #000000;
+    background-color: @shadow;
     border-radius: 0 0 apply(radius-lg) apply(radius-lg);
     min-width: 200px;
     min-height: 34px;
 }
 
 #lock-notch-corner {
-    background-color: #000000;
+    background-color: @shadow;
     border-radius: 0;
     min-width: 20px;
     min-height: 20px;
@@ -34,7 +34,7 @@
 #indicator-box #bt-button *,
 #indicator-box #network-button *,
 #indicator-box #battery-button * {
-  color: @fg-a60;
+  color: @glass-text-secondary;
 }
 
 #indicator-box #bt-button:hover,
@@ -46,7 +46,7 @@
 #indicator-box #bt-button:hover *,
 #indicator-box #network-button:hover *,
 #indicator-box #battery-button:hover * {
-  color: @fg-a60;
+  color: @glass-text-secondary;
 }
 #container-box {
   min-height: 50px;
@@ -54,7 +54,7 @@
   transition: all 0.7s ease-in-out;
 }
 #password-entry {
-  background-color: @fg-a40;
+  background-color: @glass-surface-2;
   border-radius: apply(radius-xl);
   color: white;
   min-width: 220px;
@@ -76,7 +76,7 @@
 }
 #lock-date label {
   background-color: transparent;
-  color: @fg-a60;
+  color: @glass-text-secondary;
   border: none;
   font-size: 30px;
   margin-top: 80px;
@@ -84,7 +84,7 @@
 }
 #lock-clock label {
   background-color: transparent;
-  color: @fg-a60;
+  color: @glass-text-secondary;
   border: none;
   font-size: 120px;
   margin-top: -20px;
@@ -104,6 +104,6 @@
 }
 #unlock-text {
   font-size: 15px;
-  color: @fg-a60;
+  color: @glass-text-secondary;
   font-weight: bold;
 }
diff --git a/src/styles/window/osd.css b/src/styles/window/osd.css
index 53f7b94..fdfa185 100644
--- a/src/styles/window/osd.css
+++ b/src/styles/window/osd.css
@@ -1,10 +1,11 @@
 #osd-container {
-    background-color: @bg-a50;
+    background-color: @glass-popup;
     padding: 12px 20px;
     margin: 70px;
     min-width: 180px;
     min-height: 200px;
     border-radius: apply(radius-lg);
+    border: 1px solid @glass-border-soft;
 }
 
 #osd-container scale {
@@ -12,7 +13,7 @@
 }
 
 #osd-container trough {
-    background: var(--surface);
+    background: @glass-surface-1;
     min-height: 15px;
     margin-right: 4px;
     transition: all apply(transition-slower) cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -21,6 +22,6 @@
 
 #osd-container trough highlight {
     border-radius: apply(radius-full);
-    background: var(--primary);
+    background: @glass-accent;
     transition: all apply(transition-slower) cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
diff --git a/src/styles/window/panel.css b/src/styles/window/panel.css
index 9b73782..44b3c69 100644
--- a/src/styles/window/panel.css
+++ b/src/styles/window/panel.css
@@ -1,5 +1,5 @@
 #panel {
-    background-color: @bg-a50;
+    background-color: @glass-panel;
     margin: -4px 0;
     transition: all 120ms ease-in-out;
 }
@@ -15,7 +15,7 @@
 #global-menu:hover,
 #global-menu.active,
 #workspaces>button:hover {
-    background-color: @primary;
+    background-color: @glass-accent;
     color: @on-primary;
 }
 
@@ -52,7 +52,7 @@
 }
 
 #workspaces>button.active {
-    background-color: alpha(@foreground, 0.4);
+    background-color: @glass-active;
 }
 
 #workspaces>button.active label {
@@ -60,7 +60,7 @@
 }
 
 #workspaces>button.active:hover {
-    background-color: @primary;
+    background-color: @glass-accent;
 }
 
 #workspaces>button.active:hover label {
@@ -68,7 +68,7 @@
 }
 
 #workspaces>button.urgent {
-    background-color: alpha(@error, 0.7);
+    background-color: @glass-error;
 }
 
 
@@ -92,7 +92,7 @@
 }
 
 #panel-notch-stack {
-    background-color: #000000;
+    background-color: @shadow;
     border-radius: 0 0 apply(radius-lg) apply(radius-lg);
     min-width: 200px;
     min-height: 34px;
@@ -100,7 +100,7 @@
 
 
 #panel-notch-corner {
-    background-color: #000000;
+    background-color: @shadow;
     border-radius: 0;
     min-width: 20px;
     min-height: 20px;
@@ -150,14 +150,14 @@
 #notch-indicator-icon {
     min-width: 16px;
     min-height: 16px;
-    color: @on-surface-variant;
+    color: @glass-text-secondary;
     margin-left: 2px;
 }
 
 #notch-indicator-label {
     font-size: apply(font-xs);
     font-weight: 600;
-    color: @on-surface-variant;
+    color: @glass-text-secondary;
     letter-spacing: 0.5px;
     margin-right: 2px;
 }
diff --git a/src/styles/window/screencapture.css b/src/styles/window/screencapture.css
index 400fdfc..a094a41 100644
--- a/src/styles/window/screencapture.css
+++ b/src/styles/window/screencapture.css
@@ -1,6 +1,6 @@
 #sc-toolbar {
-    background-color: @bg-a50;
-    border: 1px solid @border-subtle;
+    background-color: @glass-popup;
+    border: 1px solid @glass-border;
     border-radius: apply(radius-sm);
     padding: 5px 6px 5px 8px;
 }
@@ -15,7 +15,7 @@
 }
 
 #sc-close-btn:hover {
-    background-color: @error-a70;
+    background-color: @glass-error;
     color: @on-error;
     padding: 3px 6px;
 }
@@ -41,18 +41,18 @@
 }
 
 #sc-tool-btn:hover {
-    background-color: @bg-hover;
+    background-color: @glass-hover;
 }
 
 #sc-tool-btn.active {
-    background-color: @bg-active;
+    background-color: @glass-active;
 }
 
 
 #sc-separator {
     min-width: 1px;
     min-height: 18px;
-    background-color: @border-subtle;
+    background-color: @glass-divider;
     margin: 5px 8px;
 }
 
@@ -66,7 +66,7 @@
 }
 
 #sc-options-btn:hover {
-    background-color: @bg-hover;
+    background-color: @glass-hover;
 }
 
 #sc-options-label {
@@ -77,7 +77,7 @@
 
 #sc-options-arrow {
     font-size: apply(font-xs);
-    color: @text-dim;
+    color: @glass-text-secondary;
     margin-left: 2px;
 }
 
@@ -85,7 +85,7 @@
 #sc-action-btn {
     padding: 5px 20px;
     border-radius: apply(radius-full);
-    background-color: @primary;
+    background-color: @glass-accent;
     color: @on-primary;
     font-size: apply(font-sm);
     font-weight: 600;
@@ -102,12 +102,11 @@
 }
 
 #sc-action-btn:hover {
-    background-color: @primary-a80;
-    box-shadow: 0 2px 12px @primary-a50;
+    background-color: alpha(@glass-accent, 0.8);
 }
 
 #sc-action-btn.recording {
-    background-color: @error;
+    background-color: @glass-error;
     color: @on-error;
 }
 
@@ -116,17 +115,15 @@
 }
 
 #sc-action-btn.recording:hover {
-    background-color: @error-a70;
-    box-shadow: 0 2px 12px @error-a40;
+    background-color: alpha(@glass-error, 0.8);
 }
 
 
 #sc-menu {
-    background-color: @bg-a90;
-    border: 1px solid @border-subtle;
+    background-color: @glass-menu;
+    border: 1px solid @glass-border;
     border-radius: apply(radius-md);
     padding: 4px 0;
-    box-shadow: 0 8px 32px @shadow-a40;
 }
 
 #sc-menu-item {
@@ -137,13 +134,13 @@
 }
 
 #sc-menu-item:hover {
-    background-color: @bg-hover;
+    background-color: @glass-hover;
 }
 
 #sc-menu-section {
     font-size: apply(font-xs);
     font-weight: 700;
-    color: @text-muted;
+    color: @glass-text-secondary;
     padding: 8px 16px 2px 16px;
     letter-spacing: 0.5px;
 }
@@ -151,24 +148,24 @@
 /* Dim hint on the right of submenu parent items (Timer / Microphone) */
 .sc-menu-hint {
     font-size: apply(font-xs);
-    color: @text-dim;
+    color: @glass-text-secondary;
     margin-left: 12px;
 }
 
 #sc-menu-sep {
-    background-color: @border-subtle;
+    background-color: @glass-divider;
     min-height: 1px;
     margin: 4px 10px;
 }
 
 
 .sc-switch {
-    background-color: @fg-a25;
+    background-color: @glass-border;
     border-radius: apply(radius-full);
     transition: background-color apply(transition-slow) ease;
 }
 
 .sc-switch.checked {
-    background-color: @primary;
-    color: @fg-a90;
+    background-color: @glass-accent;
+    color: @on-primary;
 }
diff --git a/src/styles/window/settings.css b/src/styles/window/settings.css
index e18df39..13215f1 100644
--- a/src/styles/window/settings.css
+++ b/src/styles/window/settings.css
@@ -1,7 +1,7 @@
 #settings-window {
-    background-color: @bg-a50;
+    background-color: @glass-card;
     border-radius: apply(radius-md);
-    border: 1px solid @outline-a40;
+    border: 1px solid @glass-border;
     min-width: 850px;
     min-height: 600px;
 }
@@ -11,10 +11,10 @@
 }
 
 #settings-sidebar {
-    background-color: @bg-a95;
+    background-color: @glass-surface-2;
     padding: 20px 10px;
     min-width: 200px;
-    border-right: 1px solid @outline-a40;
+    border-right: 1px solid @glass-divider;
 }
 
 #settings-sidebar-button {
@@ -24,7 +24,7 @@
 }
 
 #settings-sidebar-button:hover {
-    background-color: @primary;
+    background-color: @glass-accent;
     color: @on-primary;
 }
 
@@ -34,7 +34,7 @@
 }
 
 #settings-sidebar-button.active {
-    background-color: @primary;
+    background-color: @glass-accent;
 }
 
 #settings-sidebar-button.active Label {
@@ -60,12 +60,12 @@
 #settings-row {
     padding: 12px 15px;
     border-radius: apply(radius-sm);
-    background-color: @fg-a03;
+    background-color: @glass-hover;
     margin-bottom: 2px;
 }
 
 #settings-row:hover {
-    background-color: @fg-a10;
+    background-color: @glass-active;
 }
 
 #settings-row-label {
@@ -75,47 +75,47 @@
 
 #settings-row-description {
     font-size: apply(font-sm);
-    color: @fg-a60;
+    color: @glass-text-secondary;
 }
 
 #settings-switch {
     min-width: 40px;
     min-height: 22px;
-    background-color: @fg-a30;
+    background-color: @glass-border;
     border-radius: apply(radius-full);
     padding: 3px;
     transition: background-color apply(transition-slow) ease;
 }
 
 #settings-switch.active {
-    background-color: @primary;
-    color: @fg-a90;
+    background-color: @glass-accent;
+    color: @on-primary;
 }
 
 #settings-entry {
-    background-color: @bg-a70;
+    background-color: @glass-surface-1;
     padding: 8px 12px;
     border-radius: apply(radius-xs);
-    border: 1px solid @outline-a40;
+    border: 1px solid @glass-border;
     min-width: 200px;
     color: @foreground;
 }
 
 #settings-entry:focus {
-    border-color: @primary;
+    border-color: @glass-ring;
 }
 
 #settings-combo {
-    background-color: @bg-a70;
+    background-color: @glass-surface-1;
     padding: 4px 8px;
     border-radius: apply(radius-xs);
-    border: 1px solid @outline-a40;
+    border: 1px solid @glass-border;
     min-width: 150px;
     color: @foreground;
 }
 
 #settings-combo:hover {
-    background-color: @fg-a10;
+    background-color: @glass-active;
 }
 
 #settings-list-tags {
@@ -123,7 +123,7 @@
 }
 
 #settings-list-tag {
-    background-color: @fg-a08;
+    background-color: @glass-hover;
     border-radius: apply(radius-md);
     padding: 4px 10px;
     margin-right: 5px;
@@ -131,7 +131,7 @@
 }
 
 #settings-list-tag:hover {
-    background-color: @fg-a15;
+    background-color: @glass-active;
 }
 
 #settings-list-tag Label {
@@ -139,18 +139,18 @@
 }
 
 #settings-list-tag-close {
-    color: @fg-a60;
+    color: @glass-text-secondary;
     font-size: apply(font-2xs);
     margin-left: 3px;
 }
 
 #settings-list-tag-close:hover {
-    color: @primary;
+    color: @glass-accent;
 }
 
 #settings-list-entry {
-    background-color: @fg-a03;
-    border: 1px dashed @outline-a40;
+    background-color: @glass-hover;
+    border: 1px dashed @glass-border;
     padding: 6px 12px;
     border-radius: apply(radius-xs);
     font-size: apply(font-md);
diff --git a/src/styles/window/spotlight.css b/src/styles/window/spotlight.css
index b4e799c..87dd781 100644
--- a/src/styles/window/spotlight.css
+++ b/src/styles/window/spotlight.css
@@ -2,8 +2,8 @@
     margin: 8px;
     padding: 5px;
     border-radius: apply(radius-lg);
-    background-color: @bg-a80;
-    border: 1px solid @outline-a40;
+    background-color: @glass-popup;
+    border: 1px solid @glass-border;
 }
 
 .spotlight-scroll-clip {
@@ -18,7 +18,7 @@
     padding: 8px;
     border: solid 1px transparent;
     border-radius: apply(radius-md);
-    background-color: @fg-a12;
+    background-color: @glass-hover;
     transition: background-color apply(transition-medium) ease-in-out;
 }
 
@@ -26,20 +26,20 @@
     padding: 8px;
     border: solid 1px transparent;
     border-radius: apply(radius-md);
-    background-color: @fg-a12;
+    background-color: @glass-hover;
     transition: border apply(transition-fast) ease-in-out,
                 background-color apply(transition-medium) ease-in-out;
 }
 
 .app-slot:hover {
-    border-color: @outline-a40;
-    background-color: @fg-a18;
+    border-color: @glass-border;
+    background-color: @glass-active;
 }
 
 .app-slot:focus,
 .app-slot.selected {
-    border-color: @primary-a40;
-    background-color: @primary-a20;
+    border-color: @glass-ring;
+    background-color: @glass-selected;
 }
 
 .app-title {
@@ -49,12 +49,12 @@
 }
 
 .app-description {
-    color: @text-dim;
+    color: @glass-text-secondary;
     font-size: apply(font-sm);
 }
 
 .calc-expression {
-    color: @text-dim;
+    color: @glass-text-secondary;
     font-size: apply(font-base);
 }
 
@@ -71,7 +71,7 @@
 }
 
 .power-menu-description {
-    color: @text-muted;
+    color: @glass-text-secondary;
     font-size: apply(font-sm);
 }
 
diff --git a/src/styles/window/switcher.css b/src/styles/window/switcher.css
index ec4108d..9d96b59 100644
--- a/src/styles/window/switcher.css
+++ b/src/styles/window/switcher.css
@@ -1,7 +1,8 @@
 #app-switcher-container {
-    background-color: @bg-a50;
+    background-color: @glass-popup;
     border-radius: apply(radius-xl);
     padding: 16px 24px;
+    border: 1px solid @glass-border;
 }
 
 #app-switcher-view {
@@ -16,11 +17,11 @@
 }
 
 #app-switcher-button.hovered {
-    background-color: @fg-a10;
+    background-color: @glass-hover;
 }
 
 #app-switcher-button.selected {
-    background-color: @primary-a30;
+    background-color: @glass-selected;
 }
 
 #app-switcher-icon-box {