From 5502f85dd1e899711c37d38c276a7bcd84cb38c3 Mon Sep 17 00:00:00 2001
From: S4NKALP <sankalptharu50028@gmail.com>
Date: Thu, 14 May 2026 15:31:01 +0545
Subject: [PATCH] refactor(src/shared/styles): replace hardcoded CSS values
 with design token variables

Introduce consistent design tokens for radii and colors, replacing alpha() and hardcoded values with theme variables for easier theming and maintenance.

- New Features:   - Add CSS variable usage for radii (var(--radius-*)) and color tokens (@border-subtle, @text-main, @accent)
- Enhancements:
  - Replace hardcoded border, radius, and color definitions with variable references
  - Align styling with the project's theme system
- Bug Fixes:
  - No bug fixes included
---
 src/shared/styles/about.css               |   8 +-
 src/shared/styles/battery-widget.css      |  38 +--
 src/shared/styles/constant.css            |  28 ++-
 src/shared/styles/controlcenter.css       | 284 +++++++++++-----------
 src/shared/styles/dock.css                |  10 +-
 src/shared/styles/dropdown.css            |  14 +-
 src/shared/styles/launcher.css            |  34 +--
 src/shared/styles/lock.css                |  12 +-
 src/shared/styles/notification-center.css |  48 ++--
 src/shared/styles/notification.css        |  26 +-
 src/shared/styles/osd.css                 |   8 +-
 src/shared/styles/panel.css               |   6 +-
 src/shared/styles/password-dialog.css     |  38 +--
 src/shared/styles/player.css              |  48 ++--
 src/shared/styles/settings.css            |  16 +-
 src/shared/styles/switcher.css            |   6 +-
 src/shared/styles/tray.css                |   8 +-
 src/shared/styles/widgets.css             |  22 +-
 18 files changed, 340 insertions(+), 314 deletions(-)

diff --git a/src/shared/styles/about.css b/src/shared/styles/about.css
index 709515b..244cf8b 100644
--- a/src/shared/styles/about.css
+++ b/src/shared/styles/about.css
@@ -4,7 +4,7 @@
   box-shadow:
     inset 0 -0.5px 0 0.5px alpha(#555, 0.7),
     inset 0 0.5px 0 0.5px alpha(#777, 0.7);
-  border: 1px solid alpha(#111, 0.3);
+  border: 1px solid @border-subtle;
   border-top: none;
   border-radius: 1.25rem;
   padding: 2rem;
@@ -12,7 +12,7 @@
 
 #about-options {
   background-color: alpha(#333, 0.9);
-  border-radius: 15px;
+  border-radius: var(--radius-md);
   padding: 2rem;
 }
 
@@ -61,7 +61,7 @@
 
 #more-info-button {
   background-color: #888888;
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
   padding: 0px 10px;
   margin: 1px 2px;
   transition: all 200ms ease-in-out;
@@ -74,5 +74,5 @@
   font-size: 12px;
   margin: 0px;
   font-weight: 400;
-  color: #fff;
+  color: @text-main;
 }
diff --git a/src/shared/styles/battery-widget.css b/src/shared/styles/battery-widget.css
index 27035c3..4f703b7 100644
--- a/src/shared/styles/battery-widget.css
+++ b/src/shared/styles/battery-widget.css
@@ -1,9 +1,9 @@
 #battery-window {
   margin: 6px;
-  /* background-color: alpha(#fff, 0.09); */
-  border: 1px solid alpha(#111, 0.3);
-  box-shadow: inset 0 0 200px 0 alpha(#111, 0.3);
-  border-radius: 8px;
+  /* background-color: alpha(@text-main, 0.09); */
+  border: 1px solid @border-subtle;
+  box-shadow: inset 0 0 200px 0 @border-subtle;
+  border-radius: var(--radius-sm);
 }
 
 #battery-widget {
@@ -40,7 +40,7 @@
 
 .battery-status-section {
   /* background: rgba(255, 255, 255, 0.06); */
-  /* border-radius: 12px; */
+  /* border-radius: var(--radius-md); */
   padding: 2px;
   /* margin: 8px 0; */
   /* border: 1px solid rgba(255, 255, 255, 0.08); */
@@ -56,7 +56,7 @@
 #energy-mode-button-clickable {
   background: transparent;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   padding: 6px 12px;
   margin: 1px 0;
 }
@@ -66,7 +66,7 @@
 }
 
 #energy-mode-icon {
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   padding: 4px;
   margin-top: -2px;
   margin-bottom: -2px;
@@ -77,17 +77,17 @@
 }
 
 #energy-mode-icon.connected {
-  background-color: #007aff;
-  color: #ffffff;
+  background-color: @accent;
+  color: @text-main;
 }
 .battery-power-source {
   font-size: 12px;
   margin-bottom: -4px;
-  color: alpha(#ffffff, 0.5);
+  color: alpha(@text-main, 0.5);
 }
 .battery-section-title {
   font-size: 14px;
-  color: alpha(#ffffff, 0.7);
+  color: alpha(@text-main, 0.7);
   margin: 2px 0 0 8px;
 }
 .battery-power-mode {
@@ -96,18 +96,18 @@
 
 .battery-settings-button:hover {
   margin-top: -5px;
-  background: alpha(#ffffff, 0.1);
+  background: alpha(@text-main, 0.1);
   min-height: 30px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
 }
 .battery-settings-button {
   margin-top: -5px;
   min-height: 30px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
 }
 .battery-settings-button label {
   font-weight: 500;
-  color: alpha(#ffffff, 1);
+  color: alpha(@text-main, 1);
 }
 #energy-mode-button:first-child {
   margin-top: 0;
@@ -133,7 +133,7 @@
 #game-mode-button-clickable {
   background: transparent;
   border: none;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   padding: 6px 12px;
   margin: 1px 0;
   /* min-height: 36px; */
@@ -144,7 +144,7 @@
 }
 
 #game-mode-icon {
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   padding: 4px;
   margin-right: 8px;
   background-color: rgba(255, 255, 255, 0.1);
@@ -152,6 +152,6 @@
 }
 
 #game-mode-icon.connected {
-  background-color: #007aff;
-  color: #ffffff;
+  background-color: @accent;
+  color: @text-main;
 }
diff --git a/src/shared/styles/constant.css b/src/shared/styles/constant.css
index 0d4bfe4..44807eb 100644
--- a/src/shared/styles/constant.css
+++ b/src/shared/styles/constant.css
@@ -1,6 +1,32 @@
 @define-color bg alpha(#fff, 0.07);
 @define-color hover alpha(#fff, 0.1);
-
 @define-color border var(--outline);
 @define-color active alpha(#fff, 0.9);
 @define-color urgent alpha(var(--on-error), 0.7);
+
+/* New common colors */
+@define-color accent #007aff;
+@define-color accent-hover #0056cc;
+@define-color bg-lighter alpha(#fff, 0.12);
+@define-color bg-darker alpha(#000, 0.08);
+@define-color text-main #ffffff;
+@define-color text-secondary alpha(#fff, 0.6);
+@define-color text-dim #999;
+@define-color shadow-color alpha(#000, 0.3);
+
+/* Border and Shadow specific */
+@define-color border-subtle alpha(#111, 0.3);
+@define-color border-strong alpha(#111, 0.4);
+@define-color inner-shadow alpha(#000, 0.3);
+
+/* Constants */
+:vars {
+    --radius-xs: 4px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 20px;
+    --radius-full: 999px;
+    --transition-fast: 0.15s ease;
+    --transition-slow: 0.3s ease;
+}
\ No newline at end of file
diff --git a/src/shared/styles/controlcenter.css b/src/shared/styles/controlcenter.css
index 863966f..4f7d1a7 100644
--- a/src/shared/styles/controlcenter.css
+++ b/src/shared/styles/controlcenter.css
@@ -6,7 +6,7 @@
 
 #control-center-menu {
   background-color: transparent;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   box-shadow: none;
   margin: 0;
 }
@@ -14,18 +14,18 @@
 #separator {
   min-height: 0.09rem;
   margin: 3px 0;
-  background-color: alpha(#fff, 0.2);
-  border-radius: 8px;
+  background-color: alpha(@text-main, 0.2);
+  border-radius: var(--radius-sm);
 }
 
 /* #bluetooth-control-window { */
 /* #wifi-control-window, */
 #battery-control-window {
   margin: 6px;
-  /* background-color: alpha(#fff, 0.09); */
-  border: 1px solid alpha(#111, 0.3);
-  box-shadow: inset 0 0 200px 0 alpha(#111, 0.3);
-  border-radius: 15px;
+  /* background-color: alpha(@text-main, 0.09); */
+  border: 1px solid @border-subtle;
+  box-shadow: inset 0 0 200px 0 @border-subtle;
+  border-radius: var(--radius-md);
 }
 
 #bluetooth-title,
@@ -36,9 +36,9 @@
 
 #control-center-widgets {
   background-color: alpha(#010101, 0.01);
-  box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4);
-  /* border: 1px solid alpha(#111, 0.4); */
-  border-radius: 12px;
+  box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
+  /* border: 1px solid @border-strong; */
+  border-radius: var(--radius-md);
   padding: 0.5rem;
 }
 
@@ -46,10 +46,10 @@
 
 #wb-widget,
 #brightness-menu {
-  background-color: alpha(#000, 0.08);
-  box-shadow: inset 0 0 0 0.5px alpha(#aaa, 0.4);
-  border: 1px solid alpha(#111, 0.4);
-  border-radius: 12px;
+  background-color: @bg-darker;
+  box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
+  border: 1px solid @border-strong;
+  border-radius: var(--radius-md);
 }
 
 /* Widgets */
@@ -72,7 +72,7 @@
   font-size: 12px;
   margin-left: 5px;
   font-weight: 500;
-  color: #999;
+  color: @text-dim;
 }
 
 /* WiFi Password Dialog */
@@ -81,8 +81,8 @@
 }
 
 #wifi-dialog-background {
-  background-color: alpha(#fff, 0.05);
-  border-radius: 12px;
+  background-color: alpha(@text-main, 0.05);
+  border-radius: var(--radius-md);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 20px;
   min-width: 450px;
@@ -93,12 +93,12 @@
 }
 
 #wifi-dialog-icon {
-  color: #007aff;
+  color: @accent;
   margin-right: 4px;
 }
 
 #wifi-dialog-title {
-  color: #ffffff;
+  color: @text-main;
   font-size: 14px;
   font-weight: 500;
 }
@@ -115,7 +115,7 @@
 }
 
 #wifi-dialog-password-label {
-  color: #ffffff;
+  color: @text-main;
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 4px;
@@ -124,14 +124,14 @@
 #wifi-dialog-password-entry {
   background-color: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   padding: 8px 12px;
-  color: #ffffff;
+  color: @text-main;
   font-size: 13px;
 }
 
 #wifi-dialog-password-entry:focus {
-  border-color: #007aff;
+  border-color: @accent;
   box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
   background-color: rgba(255, 255, 255, 0.15);
 }
@@ -144,21 +144,21 @@
   background-color: transparent;
   border: none;
   padding: 4px;
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
   min-width: 24px;
   min-height: 24px;
 }
 
 #wifi-dialog-show-password-button:hover {
-  background-color: alpha(#fff, 0.1);
+  background-color: @hover;
 }
 
 #wifi-dialog-show-password-button image {
-  color: #ffffff;
+  color: @text-main;
 }
 
 #wifi-dialog-show-password-label {
-  color: #ffffff;
+  color: @text-main;
   font-size: 12px;
 }
 
@@ -168,7 +168,7 @@
 
 #wifi-dialog-cancel-button,
 #wifi-dialog-join-button {
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   font-size: 13px;
   font-weight: 500;
   min-width: 80px;
@@ -178,7 +178,7 @@
 #wifi-dialog-cancel-button {
   background-color: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  color: #ffffff;
+  color: @text-main;
 }
 
 #wifi-dialog-cancel-button:hover {
@@ -186,14 +186,14 @@
 }
 
 #wifi-dialog-join-button {
-  background-color: #007aff;
-  border: 1px solid #007aff;
-  color: #ffffff;
+  background-color: @accent;
+  border: 1px solid @accent;
+  color: @text-main;
 }
 
 #wifi-dialog-join-button:hover {
-  background-color: #0056cc;
-  border-color: #0056cc;
+  background-color: @accent-hover;
+  border-color: @accent-hover;
 }
 
 #wifi-dialog-join-button.disabled {
@@ -212,7 +212,7 @@
 #bluetooth-widget-title {
   font-size: 12px;
   font-weight: 500;
-  color: #fff;
+  color: @text-main;
 }
 
 /* #bluetooth-widget-top { */
@@ -221,7 +221,7 @@
 /* } */
 
 #device-icon {
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   padding: 5px;
   margin-bottom: 2.5px;
   margin-top: 2.5px;
@@ -230,7 +230,7 @@
 }
 
 #devices-title {
-  color: alpha(#fff, 0.6);
+  color: @text-secondary;
 }
 
 #device-icon.paired {
@@ -245,14 +245,14 @@
   min-width: 40px;
   min-height: 20px;
   background-color: #bababa;
-  border-radius: 15px;
+  border-radius: var(--radius-md);
   padding: 2px;
   transition: background-color 0.3s ease;
 }
 
 #toggle-button slider {
-  background-color: #fff;
-  border-radius: 50%;
+  background-color: @text-main;
+  border-radius: var(--radius-full);
   min-width: 16px;
   min-height: 8px;
   transition: background-color 0.1s cubic-bezier(0.5, 0.25, 0, 1.25);
@@ -263,7 +263,7 @@
 }
 
 /* #toggle-button:checked slider { */
-/*   background-color: #fff; */
+/*   background-color: @text-main; */
 /* } */
 /**/
 /* #toggle-button:checked image { */
@@ -271,14 +271,14 @@
 /* } */
 
 .menu {
-  background-color: alpha(#000, 0.08);
-  box-shadow: inset 0 0 0 0.5px alpha(#aaa, 0.4);
-  border: 1px solid alpha(#111, 0.4);
-  border-radius: 12px;
+  background-color: @bg-darker;
+  box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
+  border: 1px solid @border-strong;
+  border-radius: var(--radius-md);
   margin: 5px;
-  /* background-color: alpha(#999, 0.1); */
+  /* background-color: alpha(@text-dim, 0.1); */
   /* border: 0.5px solid alpha(#000, 0.4); */
-  /* border-radius: 8px; */
+  /* border-radius: var(--radius-sm); */
   padding: 1rem;
 }
 
@@ -303,7 +303,7 @@
 #vol-slider-box {
   /* margin-bottom: 2px; */
   margin-top: -10px;
-  /* border: 1px solid alpha(#fff, 1); */
+  /* border: 1px solid alpha(@text-main, 1); */
 }
 
 #volume-widget-slider {
@@ -325,12 +325,12 @@
 }
 
 #control-center-menu slider {
-  background: linear-gradient(135deg, #ffffff 0%, #f0f1f2 100%);
+  background: linear-gradient(135deg, @text-main 0%, #f0f1f2 100%);
   border-color: #000;
   min-width: 28px;
   min-height: 28px;
   margin: -2px;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   /* background-image: none; */
   /* background-color: transparent; */
   /* min-width: 4px; */
@@ -339,11 +339,11 @@
 }
 
 #control-center-menu slider:hover {
-  border-color: #999;
+  border-color: @text-dim;
   min-width: 30px;
   min-height: 30px;
   margin: -3px;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   /* background-image: none; */
   /* background-color: transparent; */
   /* min-width: 4px; */
@@ -354,42 +354,42 @@
 #control-center-menu scale {
   background-color: transparent;
   margin-top: 10px;
-  border-radius: 20px;
+  border-radius: var(--radius-xl);
 }
 
 #control-center-menu trough {
   min-width: 25px;
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   background-color: alpha(#666, 0.5);
   border: 1px solid alpha(#444, 0.3);
 }
 
 #control-center-menu highlight {
-  background: alpha(#fff, 0.8);
-  border-radius: 99px;
+  background: alpha(@text-main, 0.8);
+  border-radius: var(--radius-full);
 }
 
 #control-center-menu mark indicator {
   background: none;
   background-image: none;
-  color: alpha(#fff, 0.2);
+  color: alpha(@text-main, 0.2);
 }
 
 #control-center-menu mark label {
   background: none;
   background-image: none;
-  color: alpha(#fff, 0.2);
+  color: alpha(@text-main, 0.2);
 }
 
 /* Per-app volume control styles */
 #per-app-volume-control {
   min-height: 140px;
   min-width: 328px;
-  /* background-color: alpha(#000, 0.3); */
-  /* background-color: alpha(#999, 0.1); */
-  /* box-shadow: inset 0 0 200px 0 alpha(#111, 0.3); */
+  /* background-color: @shadow-color; */
+  /* background-color: alpha(@text-dim, 0.1); */
+  /* box-shadow: inset 0 0 200px 0 @border-subtle; */
   /* border: 0.5px solid alpha(#000, 0.4); */
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   padding: 1rem;
 
   /* padding: 1rem; */
@@ -402,37 +402,37 @@
 
 #back-button {
   padding: 8px 12px;
-  background-color: alpha(#fff, 0.1);
-  border-radius: 8px;
+  background-color: @hover;
+  border-radius: var(--radius-sm);
   border: none;
-  color: #fff;
+  color: @text-main;
   font-size: 13px;
   font-weight: 500;
   transition: background-color 0.2s ease;
 }
 
 #back-button:hover {
-  background-color: alpha(#fff, 0.18);
+  background-color: alpha(@text-main, 0.18);
 }
 
 /* Apple-style app volume items */
 .apple-app-volume-item {
   margin: 3px 0;
   padding: 16px;
-  background-color: alpha(#fff, 0.08);
-  border-radius: 12px;
-  border: 1px solid alpha(#fff, 0.12);
-  transition: background-color 0.2s ease;
+  background-color: alpha(@text-main, 0.08);
+  border-radius: var(--radius-md);
+  border: 1px solid alpha(@text-main, 0.12);
+  transition: background-color var(--transition-fast);
 }
 
 .apple-app-volume-item:hover {
-  background-color: alpha(#fff, 0.12);
+  background-color: alpha(@text-main, 0.12);
 }
 
 .apple-app-name {
   font-size: 14px;
   font-weight: 600;
-  color: #fff;
+  color: @text-main;
   margin-bottom: 4px;
   letter-spacing: -0.01em;
 }
@@ -449,22 +449,22 @@
   min-width: 28px;
   min-height: 6px;
   border-radius: 3px;
-  background-color: alpha(#fff, 0.25);
+  background-color: alpha(@text-main, 0.25);
   border: none;
   box-shadow: inset 0 1px 2px alpha(#000, 0.2);
 }
 
 #apple-volume-slider highlight {
-  background: linear-gradient(90deg, #007aff 0%, #0051d0 100%);
+  background: linear-gradient(90deg, @accent 0%, #0051d0 100%);
   border-radius: 3px;
   border: none;
-  box-shadow: 0 1px 3px alpha(#007aff, 0.3);
+  box-shadow: 0 1px 3px alpha(@accent, 0.3);
 }
 
 #apple-volume-slider slider {
   background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  /* border: 2px solid alpha(#007aff, 0.8); */
-  border-radius: 50%;
+  /* border: 2px solid alpha(@accent, 0.8); */
+  border-radius: var(--radius-full);
   min-width: 20px;
   min-height: 20px;
   margin: -10px;
@@ -475,11 +475,11 @@
 }
 
 #apple-volume-slider slider:hover {
-  background: linear-gradient(135deg, #ffffff 0%, #f0f1f2 100%);
-  border-color: #007aff;
+  background: linear-gradient(135deg, @text-main 0%, #f0f1f2 100%);
+  border-color: @accent;
   box-shadow:
     0 4px 12px alpha(#000, 0.2),
-    0 2px 6px alpha(#007aff, 0.3);
+    0 2px 6px alpha(@accent, 0.3);
   min-width: 22px;
   min-height: 22px;
   margin: -9px;
@@ -492,22 +492,22 @@
   margin: -9px;
   box-shadow:
     0 2px 6px alpha(#000, 0.25),
-    0 1px 3px alpha(#007aff, 0.4);
+    0 1px 3px alpha(@accent, 0.4);
 }
 
 /* Legacy app volume styles (fallback) */
 .app-volume-item {
   margin: 8px 0;
   padding: 8px;
-  background-color: alpha(#fff, 0.05);
-  border-radius: 6px;
-  border: 1px solid alpha(#fff, 0.1);
+  background-color: alpha(@text-main, 0.05);
+  border-radius: var(--radius-xs);
+  border: 1px solid alpha(@text-main, 0.1);
 }
 
 .app-name {
   font-size: 13px;
   font-weight: 500;
-  color: #fff;
+  color: @text-main;
   margin-bottom: 5px;
 }
 
@@ -518,50 +518,50 @@
 
 #app-volume-slider trough {
   min-width: 20px;
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   background-color: alpha(#666, 0.5);
   border: 1px solid alpha(#444, 0.3);
 }
 
 #app-volume-slider highlight {
   background: alpha(#0078d4, 0.8);
-  border-radius: 99px;
+  border-radius: var(--radius-full);
 }
 
 #app-volume-slider slider {
-  background-color: #fff;
+  background-color: @text-main;
   padding: 2px;
   min-width: 4px;
   min-height: 18px;
-  border-radius: 20px;
+  border-radius: var(--radius-xl);
 }
 
 /* Circle button for per-app volume */
 #per-app-volume-button {
-  background-color: alpha(#fff, 0.15);
-  border: 1px solid alpha(#999, 0.6);
+  background-color: alpha(@text-main, 0.15);
+  border: 1px solid alpha(@text-dim, 0.6);
   /* min-width: 33px; */
   /* min-height: 30px; */
-  border-radius: 50%;
+  border-radius: var(--radius-full);
 }
 
 #per-app-volume-button:hover {
-  background-color: alpha(#fff, 0.25);
-  /* border-color: #007aff; */
+  background-color: alpha(@text-main, 0.25);
+  /* border-color: @accent; */
   box-shadow: 0 4px 12px alpha(#000, 0.2);
 }
 
 #per-app-volume-button:active {
-  background-color: alpha(#fff, 0.2);
+  background-color: alpha(@text-main, 0.2);
   box-shadow: 0 1px 3px alpha(#000, 0.3);
 }
 
 #per-app-volume-icon {
-  background-color: alpha(#fff, 0.15);
+  background-color: alpha(@text-main, 0.15);
 
-  border: 2px solid alpha(#999, 0.6);
+  border: 2px solid alpha(@text-dim, 0.6);
 
-  border-radius: 50%;
+  border-radius: var(--radius-full);
 
   min-width: 30px;
 }
@@ -578,40 +578,40 @@
   min-width: 28px;
   min-height: 3px;
   border-radius: 1.5px;
-  background-color: alpha(#fff, 0.3);
+  background-color: alpha(@text-main, 0.3);
   border: none;
   box-shadow: inset 0 1px 1px alpha(#000, 0.1);
 }
 
 #apple-seek-bar highlight {
-  background: #007aff;
+  background: @accent;
   border-radius: 1.5px;
   border: none;
-  box-shadow: 0 0 2px alpha(#007aff, 0.4);
+  box-shadow: 0 0 2px alpha(@accent, 0.4);
 }
 
 #apple-seek-bar slider {
   background: #ffffff;
-  border: 1px solid alpha(#007aff, 0.8);
-  border-radius: 50%;
+  border: 1px solid alpha(@accent, 0.8);
+  border-radius: var(--radius-full);
   min-width: 12px;
   min-height: 12px;
   margin: -4.5px;
   box-shadow:
     0 1px 3px alpha(#000, 0.2),
-    0 0 0 1px alpha(#fff, 0.8);
+    0 0 0 1px alpha(@text-main, 0.8);
   transition: all 0.1s ease;
 }
 
 #apple-seek-bar slider:hover {
-  background: #ffffff;
-  border-color: #007aff;
+  background: @text-main;
+  border-color: @accent;
   min-width: 14px;
   min-height: 14px;
   margin: -5.5px;
   box-shadow:
     0 2px 6px alpha(#000, 0.25),
-    0 0 0 2px alpha(#007aff, 0.3);
+    0 0 0 2px alpha(@accent, 0.3);
 }
 
 #apple-seek-bar slider:active {
@@ -621,7 +621,7 @@
   margin: -5px;
   box-shadow:
     0 1px 3px alpha(#000, 0.3),
-    0 0 0 2px alpha(#007aff, 0.5);
+    0 0 0 2px alpha(@accent, 0.5);
 }
 
 /* macOS-style expanded player - more compact */
@@ -681,7 +681,7 @@
 #macos-player-title {
   font-weight: 600;
   font-size: 16px;
-  color: #ffffff;
+  color: @text-main;
   margin-bottom: 2px;
 }
 
@@ -689,14 +689,14 @@
   font-weight: 400;
   margin-top: -2px;
   font-size: 13px;
-  color: alpha(#999, 0.8);
+  color: alpha(@text-dim, 0.8);
 }
 
 #macos-player-album {
   font-weight: 400;
   margin-top: -4px;
   font-size: 13px;
-  color: alpha(#999, 0.8);
+  color: alpha(@text-dim, 0.8);
   margin-bottom: 8px;
 }
 
@@ -712,12 +712,12 @@
 
   min-height: 2px;
   border-radius: 2px;
-  background-color: alpha(#fff, 0.25);
+  background-color: alpha(@text-main, 0.25);
   border: none;
 }
 
 #macos-seek-bar highlight {
-  background: #ffffff;
+  background: @text-main;
   border-radius: 2px;
   border: none;
 }
@@ -743,7 +743,7 @@
 #macos-position-label,
 #macos-length-label {
   font-size: 11px;
-  color: alpha(#999, 0.9);
+  color: alpha(@text-dim, 0.9);
   font-weight: 400;
 }
 
@@ -756,15 +756,15 @@
 #macos-control-button {
   background: transparent;
   border: none;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   min-width: 28px;
   /* Slightly smaller */
   opacity: 0.7;
   min-height: 28px;
   padding: 5px;
   /* Reduced padding */
-  color: #ffffff;
-  transition: all 0.15s ease;
+  color: @text-main;
+  transition: all var(--transition-fast) ease;
 }
 
 #macos-control-button:hover {
@@ -774,15 +774,15 @@
 #macos-play-button {
   background: transparent;
   border: none;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   min-width: 36px;
   /* Slightly smaller */
   opacity: 0.7;
   min-height: 36px;
   padding: 7px;
   /* Reduced padding */
-  color: #ffffff;
-  transition: all 0.15s ease;
+  color: @text-main;
+  transition: all var(--transition-fast) ease;
 }
 
 #macos-play-button:hover {
@@ -796,9 +796,9 @@
 }
 
 .macos-switcher-dot {
-  background: alpha(#fff, 0.3);
+  background: alpha(@text-main, 0.3);
   /* border: none; */
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   min-width: 12px;
   /* Smaller dots */
   min-height: 12px;
@@ -808,12 +808,12 @@
 }
 
 .macos-switcher-dot:hover {
-  background: alpha(#fff, 0.5);
+  background: alpha(@text-main, 0.5);
 }
 
 .macos-switcher-dot.active {
-  background: #ffffff;
-  box-shadow: 0 0 0 1px alpha(#fff, 0.3);
+  background: @text-main;
+  box-shadow: 0 0 0 1px alpha(@text-main, 0.3);
   /* Smaller glow */
 }
 
@@ -822,7 +822,7 @@
 .compact-app-volume-item {
   padding-bottom: 5px;
   padding-right: 14px;
-  border-bottom: 1px solid alpha(#fff, 0.1);
+  border-bottom: 1px solid @hover;
 }
 
 #app-icon {
@@ -851,7 +851,7 @@
 
   min-height: 2px;
   border-radius: 2px;
-  background-color: alpha(#fff, 0.25);
+  background-color: alpha(@text-main, 0.25);
   border: none;
 }
 
@@ -883,18 +883,18 @@
 #wifi-connections,
 #bluetooth-connections {
   /* background-color: rgba(255, 255, 255, 0.08); */
-  background-color: alpha(#fff, 0.05);
-  box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4);
-  border: 1px solid alpha(#111, 0.4);
-  border-radius: 8px;
+  background-color: alpha(@text-main, 0.05);
+  box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
+  border: 1px solid @border-strong;
+  border-radius: var(--radius-sm);
   /* padding: 0.5rem; */
-  /* border-radius: 12px; */
+  /* border-radius: var(--radius-md); */
   padding: 10px;
 }
 
 /* WiFi network slots - macOS style */
 #wifi-network-slot button {
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   padding: 4px 4px;
   /* min-width: 280px; */
   margin: 2px 0;
@@ -910,12 +910,12 @@
 }
 
 #wifi-connections #device-icon.connected {
-  background-color: #007aff;
-  color: #ffffff;
+  background-color: @accent;
+  color: @text-main;
 }
 
 #wifi-network-name {
-  color: #ffffff;
+  color: @text-main;
   font-size: 14px;
   font-weight: 500;
 }
@@ -932,7 +932,7 @@
   padding: 8px 6px;
   margin-bottom: -12px;
   margin-top: -6px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   /* transition: background-color 0.2s ease; */
 }
 
@@ -946,7 +946,7 @@
 
 #device-button {
   /* background-color: #000; */
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
 }
 
 .device-slot:hover {
@@ -968,19 +968,19 @@
   padding-left: 5px;
   margin-top: -2px;
   font-weight: bold;
-  color: #ffffff;
+  color: @text-main;
 }
 
 .wifi-icon-box {
   background-color: #aaaaaa;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   padding: 2px;
   /* margin-right: 8px; */
 }
 
 .wifi-icon-box-connected {
-  background-color: #007aff;
-  border-radius: 50%;
+  background-color: @accent;
+  border-radius: var(--radius-full);
   padding: 2px;
   /* margin-right: 8px; */
 }
diff --git a/src/shared/styles/dock.css b/src/shared/styles/dock.css
index 639cf06..8294c75 100644
--- a/src/shared/styles/dock.css
+++ b/src/shared/styles/dock.css
@@ -3,8 +3,8 @@
     padding: 4px 4px;
     margin: 4px 4px;
     border: none;
-    border-radius: 16px;
-    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+    border-radius: var(--radius-lg);
+    transition: all var(--transition-fast) cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 #dock.shown {
@@ -54,13 +54,13 @@
 #dock_item_icon {
     border-radius: 13px;
     opacity: 0.7;
-    transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+    transition: all var(--transition-fast) cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
 /* #dock_item_indicator { */
 /*   transition: all 0.15s ease-out; */
 /*   min-height: 4px; */
-/*   border-radius: 4px; */
+/*   border-radius: var(--radius-xs); */
 /* } */
 
 #dock_item {
@@ -82,7 +82,7 @@
     min-height: 50px;
     margin: 0px 4px;
     border-radius: 2px;
-    background-color: #2b5ea7;
+    background-color: @accent;
 }
 
 .dock_separator.hidden {
diff --git a/src/shared/styles/dropdown.css b/src/shared/styles/dropdown.css
index 2f036ad..aa726ba 100644
--- a/src/shared/styles/dropdown.css
+++ b/src/shared/styles/dropdown.css
@@ -6,16 +6,16 @@
 }
 
 #dropdown-options {
-  background-color: alpha(#000, 0.3);
-  box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4);
-  border: 1px solid alpha(#111, 0.4);
+  background-color: @shadow-color;
+  box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
+  border: 1px solid @border-strong;
   border-radius: 0.75rem;
   padding: 0.5rem;
 }
 
 #dropdown-option {
   background-color: transparent;
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
   padding: 0px 10px;
   margin: 1px 2px;
   transition: all 0ms ease-in-out;
@@ -30,7 +30,7 @@
 #dropdown-option-label {
   font-size: 13px;
   margin: 0px;
-  color: #fff;
+  color: @text-main;
   font-weight: 400;
 }
 
@@ -39,7 +39,7 @@
 }
 
 #dropdown-option:hover #dropdown-option-keybind {
-  color: #fff;
+  color: @text-main;
 }
 
 #dropdown-option-keybind {
@@ -51,7 +51,7 @@
 
 #dropdown-divider-box {
   background-color: transparent;
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
   padding: 0px 10px;
   margin: 2px;
 }
diff --git a/src/shared/styles/launcher.css b/src/shared/styles/launcher.css
index 236d78d..1af94a7 100644
--- a/src/shared/styles/launcher.css
+++ b/src/shared/styles/launcher.css
@@ -1,7 +1,7 @@
 #launcher {
-    background-color: alpha(#000, 0.3);
+    background-color: @shadow-color;
     padding: 0;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     min-width: 640px;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
@@ -17,7 +17,7 @@
 #close-button,
 #config-button {
     background-color: transparent;
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
     padding: 6px;
     transition: all 0.15s ease;
 }
@@ -27,27 +27,27 @@
 #config-button:hover,
 #config-button:focus {
     background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
 }
 
 #close-button.focused,
 #config-button.focused {
     background-color: rgba(0, 122, 255, 0.2);
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
     box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.4);
 }
 
 #close-button.focused #close-label {
-    color: #007aff;
+    color: @accent;
 }
 
 #config-button.focused #config-label {
-    color: #007aff;
+    color: @accent;
 }
 
 #close-button:active {
     background-color: rgba(255, 255, 255, 0.2);
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
 }
 
 #close-label {
@@ -61,7 +61,7 @@
 
 #config-button:active {
     background-color: rgba(255, 255, 255, 0.2);
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
 }
 
 #config-label {
@@ -134,11 +134,11 @@
 }
 
 #launcher-result-item {
-    border-radius: 8px;
+    border-radius: var(--radius-sm);
     padding: 12px 16px;
     margin: 2px 0;
     min-height: 64px;
-    transition: all 0.15s ease;
+    transition: all var(--transition-fast);
     background: transparent;
 }
 
@@ -156,8 +156,8 @@
 #launcher-result-item:selected,
 #launcher-result-item:hover,
 #launcher-result-item.selected {
-    border-radius: 8px;
-    background-color: rgba(0, 122, 255, 0.8);
+    border-radius: var(--radius-sm);
+    background-color: alpha(@accent, 0.8);
     padding: 12px 16px;
     margin: 2px 0;
 }
@@ -187,7 +187,7 @@
     min-width: 56px;
     min-height: 56px;
     margin-right: 16px;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
 }
 
 #result-item-title {
@@ -218,13 +218,13 @@
     background: rgba(255, 255, 255, 0.05);
     color: rgba(255, 255, 255, 0.9);
     padding: 12px;
-    border-radius: 8px;
+    border-radius: var(--radius-sm);
     margin-bottom: 8px;
     font-size: 14px;
 }
 
 #network-password-entry:focus {
-    border: 1px solid rgba(0, 122, 255, 0.6);
+    border: 1px solid alpha(@accent, 0.6);
     background: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
+    box-shadow: 0 0 0 3px alpha(@accent, 0.2);
 }
diff --git a/src/shared/styles/lock.css b/src/shared/styles/lock.css
index 930f614..a707be7 100644
--- a/src/shared/styles/lock.css
+++ b/src/shared/styles/lock.css
@@ -11,8 +11,8 @@
   transition: all 0.7s ease-in-out;
 }
 #password-entry {
-  background-color: alpha(#fff, 0.4);
-  border-radius: 20px;
+  background-color: alpha(@text-main, 0.4);
+  border-radius: var(--radius-xl);
   color: white;
   min-width: 220px;
   min-height: 40px;
@@ -33,7 +33,7 @@
 }
 #lock-date label {
   background-color: transparent;
-  color: alpha(#fff, 0.6);
+  color: alpha(@text-main, 0.6);
   border: none;
   font-size: 30px;
   margin-top: 80px;
@@ -41,7 +41,7 @@
 }
 #lock-clock label {
   background-color: transparent;
-  color: alpha(#fff, 0.6);
+  color: alpha(@text-main, 0.6);
   border: none;
   font-size: 120px;
   margin-top: -20px;
@@ -50,7 +50,7 @@
 
 #face-icon image {
   margin-bottom: 10px;
-  border-radius: 99px;
+  border-radius: var(--radius-full);
 }
 #face-icon {
   padding-bottom: 10px;
@@ -61,6 +61,6 @@
 }
 #unlock-text {
   font-size: 15px;
-  color: alpha(#fff, 0.6);
+  color: alpha(@text-main, 0.6);
   font-weight: bold;
 }
diff --git a/src/shared/styles/notification-center.css b/src/shared/styles/notification-center.css
index 0c041d3..d7c0f3f 100644
--- a/src/shared/styles/notification-center.css
+++ b/src/shared/styles/notification-center.css
@@ -1,8 +1,8 @@
 #noti-center-box {
   background-color: transparent;
 
-  /* border: 1px solid alpha(#111, 0.3); */
-  border-radius: 20px;
+  /* border: 1px solid @border-subtle; */
+  border-radius: var(--radius-xl);
   margin-right: 10px;
   /* padding: 20px; */
   /* margin: 6px; */
@@ -14,7 +14,7 @@
   min-height: 25px;
   min-width: 70px;
   border: 1px solid #525155;
-  border-radius: 15px;
+  border-radius: var(--radius-md);
   margin-top: 10px;
 }
 
@@ -23,7 +23,7 @@
 }
 
 #noti-clear-button:hover {
-  background-color: alpha(#fff, 0.09);
+  background-color: alpha(@text-main, 0.09);
 }
 
 /* Expandable notification group styles */
@@ -35,13 +35,13 @@
 #single-notification-content {
   background-color: alpha(#1c2328, 0.05);
   border: 1.5px solid #525155;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   padding: 12px;
   transition: all 0.2s ease;
 }
 
 #single-notification-content:hover {
-  background-color: alpha(#999, 0.9);
+  background-color: alpha(@text-dim, 0.9);
   border: 1.5px solid #525155;
 }
 
@@ -55,7 +55,7 @@
 #stack-shadow-bottom {
   background-color: alpha(#1c2328, 0.05);
   border-top: 1px solid #525155;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   opacity: 1;
   min-height: 16px;
   margin-left: 20px;
@@ -68,7 +68,7 @@
   background-color: alpha(#1c2328, 0.05);
 
   border-top: 1px solid #525155;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   opacity: 1;
   min-height: 20px;
   margin-left: 10px;
@@ -81,7 +81,7 @@
   background-color: alpha(#1c2328, 0.05);
 
   border: 1.2px solid #525155;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   padding: 12px;
   transition: all 0.2s ease;
 }
@@ -104,7 +104,7 @@
 #notification-content-collapsed {
   background-color: alpha(#000, 0.05);
   border: 1px solid #525155;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   padding: 12px;
   margin: 2px 0;
   transition: all 0.2s ease;
@@ -117,7 +117,7 @@
 
 /* Notification count badge */
 #notification-count-label {
-  background-color: alpha(#fff, 0.2);
+  background-color: alpha(@text-main, 0.2);
   color: rgba(255, 255, 255, 0.8);
   border-radius: 10px;
   padding: 2px 6px;
@@ -136,7 +136,7 @@
 }
 
 #notification-group-title {
-  color: #ffffff;
+  color: @text-main;
   font-weight: bold;
   font-size: 14px;
 }
@@ -144,23 +144,23 @@
 #notification-show-less {
   background-color: transparent;
   color: rgba(255, 255, 255, 0.7);
-  border: 1px solid alpha(#fff, 0.2);
-  border-radius: 6px;
+  border: 1px solid alpha(@text-main, 0.2);
+  border-radius: var(--radius-xs);
   padding: 2px 8px;
   font-size: 11px;
   margin-right: 8px;
 }
 
 #notification-show-less:hover {
-  background-color: alpha(#999, 0.7);
+  background-color: alpha(@text-dim, 0.7);
   color: rgba(255, 255, 255, 0.9);
 }
 
 #notification-close-all {
   background-color: transparent;
   color: rgba(255, 255, 255, 0.7);
-  border: 1px solid alpha(#fff, 0.2);
-  border-radius: 6px;
+  border: 1px solid alpha(@text-main, 0.2);
+  border-radius: var(--radius-xs);
   padding: 2px 8px;
   font-size: 12px;
   min-width: 24px;
@@ -191,7 +191,7 @@
 .stacked-notification-item {
   background-color: alpha(#000, 0.05);
   border: 1px solid #525155;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
@@ -226,7 +226,7 @@
 /* Make expanded notifications clickable with subtle hover effect */
 #expanded-notification-list:hover {
   background-color: alpha(#111, 0.9);
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   transition: background-color 0.2s ease;
 }
 
@@ -239,13 +239,13 @@
   background-color: alpha(#1c2328, 0.05);
   font-size: 12px;
   margin: 10px;
-  border-radius: 15px;
+  border-radius: var(--radius-md);
 }
 
 #notification-close-all {
   margin: 10px 10px 10px 0;
   background-color: alpha(#1c2328, 0.05);
-  border-radius: 15px;
+  border-radius: var(--radius-md);
 }
 
 #notif-close-button {
@@ -270,7 +270,7 @@
   min-height: 40px;
   padding: 10px;
   border: 1px solid #525155;
-  border-radius: 12px;
+  border-radius: var(--radius-md);
 }
 
 #notification-centre-notifs:last-child {
@@ -284,13 +284,13 @@
 #notification-close-header {
   min-width: 23px;
   min-height: 23px;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
 }
 #notification-close:hover {
   background-color: alpha(#666, 0.8);
   min-width: 23px;
   min-height: 23px;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
 }
 #notification-close-summery:hover .notification-close-header button {
   background-color: transparent;
diff --git a/src/shared/styles/notification.css b/src/shared/styles/notification.css
index 04d4d46..9333e67 100644
--- a/src/shared/styles/notification.css
+++ b/src/shared/styles/notification.css
@@ -1,29 +1,29 @@
 #notification {
   padding: 10px;
-  background-color: alpha(#fff, 0.03);
-  border-radius: 8px;
+  background-color: alpha(@text-main, 0.03);
+  border-radius: var(--radius-sm);
   margin-top: 10px;
   margin-right: 10px;
   /* margin: 5px; */
 }
 
 #notification-close-button {
-  background-color: alpha(#999, 0.3);
-  border-radius: 8px;
+  background-color: alpha(@text-dim, 0.3);
+  border-radius: var(--radius-sm);
 }
 #notification-close-button:hover {
-  background-color: alpha(#2369ff, 0.9);
+  background-color: alpha(@accent, 0.9);
 }
 
 #notification-action-buttons button {
-  background-color: alpha(#999, 0.3);
+  background-color: alpha(@text-dim, 0.3);
   padding: 4px;
-  border-radius: 7px;
-  transition: background-color 0.1s ease;
+  border-radius: var(--radius-sm);
+  transition: background-color var(--transition-fast);
 }
 
 #notification-action-buttons button:hover {
-  background-color: alpha(#2369ff, 0.9);
+  background-color: alpha(@accent, 0.9);
 }
 
 #notification-action-buttons button:active {
@@ -35,11 +35,11 @@
 }
 
 #notification-icon {
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
 }
 
 #notification-image {
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   color: var(--on-surface);
 }
 
@@ -64,9 +64,9 @@
 
 #notif-close-button {
   background-color: var(--surface);
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   padding: 4px;
-  transition: background-color 0.1s ease;
+  transition: background-color var(--transition-fast);
 }
 
 #notif-close-button:hover,
diff --git a/src/shared/styles/osd.css b/src/shared/styles/osd.css
index 4c4d8eb..c45f1e7 100644
--- a/src/shared/styles/osd.css
+++ b/src/shared/styles/osd.css
@@ -1,10 +1,10 @@
 #osd-container {
-    background-color: alpha(#fff, 0.09);
+    background-color: alpha(@text-main, 0.09);
     padding: 12px 20px;
     margin: 70px;
     min-width: 180px;
     min-height: 200px;
-    border-radius: 16px;
+    border-radius: var(--radius-lg);
 }
 
 #osd-container scale {
@@ -16,11 +16,11 @@
     min-height: 15px;
     margin-right: 4px;
     transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    border-radius: 16px;
+    border-radius: var(--radius-lg);
 }
 
 #osd-container trough highlight {
-    border-radius: 100px;
+    border-radius: var(--radius-full);
     background: var(--primary);
     transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
diff --git a/src/shared/styles/panel.css b/src/shared/styles/panel.css
index 997e153..e583c08 100644
--- a/src/shared/styles/panel.css
+++ b/src/shared/styles/panel.css
@@ -33,7 +33,7 @@
 #tray-button {
     margin: 5px 0;
     padding: 0 2px;
-    border-radius: 8px;
+    border-radius: var(--radius-sm);
 }
 
 #menubar label,
@@ -45,7 +45,7 @@
 #global-menu {
     margin: 5px 2px;
     padding: 0 5px;
-    border-radius: 5px;
+    border-radius: var(--radius-xs);
 }
 
 #date-time {
@@ -55,7 +55,7 @@
 #workspaces>button {
     margin: 6px 0;
     padding: 0 16px;
-    border-radius: 8px;
+    border-radius: var(--radius-sm);
     min-width: 12px;
     border: 1px solid @border;
 }
diff --git a/src/shared/styles/password-dialog.css b/src/shared/styles/password-dialog.css
index 6223027..85b7253 100644
--- a/src/shared/styles/password-dialog.css
+++ b/src/shared/styles/password-dialog.css
@@ -3,8 +3,8 @@
 }
 
 #wifi-dialog-background {
-  background-color: alpha(#fff, 0.05);
-  border-radius: 12px;
+  background-color: alpha(@text-main, 0.05);
+  border-radius: var(--radius-md);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 20px;
   min-width: 450px;
@@ -15,12 +15,12 @@
 }
 
 #wifi-dialog-icon {
-  color: #007aff;
+  color: @accent;
   margin-right: 4px;
 }
 
 #wifi-dialog-title {
-  color: #ffffff;
+  color: @text-main;
   font-size: 14px;
   font-weight: 500;
 }
@@ -37,7 +37,7 @@
 }
 
 #wifi-dialog-password-label {
-  color: #ffffff;
+  color: @text-main;
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 4px;
@@ -46,14 +46,14 @@
 #wifi-dialog-password-entry {
   background-color: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   padding: 8px 12px;
-  color: #ffffff;
+  color: @text-main;
   font-size: 13px;
 }
 
 #wifi-dialog-password-entry:focus {
-  border-color: #007aff;
+  border-color: @accent;
   box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
   background-color: rgba(255, 255, 255, 0.15);
 }
@@ -66,21 +66,21 @@
   background-color: transparent;
   border: none;
   padding: 4px;
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
   min-width: 24px;
   min-height: 24px;
 }
 
 #wifi-dialog-show-password-button:hover {
-  background-color: alpha(#fff, 0.1);
+  background-color: alpha(@text-main, 0.1);
 }
 
 #wifi-dialog-show-password-button image {
-  color: #ffffff;
+  color: @text-main;
 }
 
 #wifi-dialog-show-password-label {
-  color: #ffffff;
+  color: @text-main;
   font-size: 12px;
 }
 
@@ -90,7 +90,7 @@
 
 #wifi-dialog-cancel-button,
 #wifi-dialog-join-button {
-  border-radius: 6px;
+  border-radius: var(--radius-xs);
   font-size: 13px;
   font-weight: 500;
   min-width: 80px;
@@ -100,7 +100,7 @@
 #wifi-dialog-cancel-button {
   background-color: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  color: #ffffff;
+  color: @text-main;
 }
 
 #wifi-dialog-cancel-button:hover {
@@ -108,14 +108,14 @@
 }
 
 #wifi-dialog-join-button {
-  background-color: #007aff;
-  border: 1px solid #007aff;
-  color: #ffffff;
+  background-color: @accent;
+  border: 1px solid @accent;
+  color: @text-main;
 }
 
 #wifi-dialog-join-button:hover {
-  background-color: #0056cc;
-  border-color: #0056cc;
+  background-color: @accent-hover;
+  border-color: @accent-hover;
 }
 
 #wifi-dialog-join-button.disabled {
diff --git a/src/shared/styles/player.css b/src/shared/styles/player.css
index 437084b..777e807 100644
--- a/src/shared/styles/player.css
+++ b/src/shared/styles/player.css
@@ -1,5 +1,5 @@
 #player-stack-button {
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
   min-width: 7px;
   min-height: 7px;
   margin: 10px 3px;
@@ -17,40 +17,40 @@
 }
 
 #player-stack-button.active {
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
   background-color: rgb(221.25, 221.25, 223.65);
 }
 
 #outer-player-box {
   min-height: 110px;
   min-width: 320px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   margin: 0 6px;
-  background-color: alpha(#000, 0.3);
-  box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4);
+  background-color: @shadow-color;
+  box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
 }
 
 #outer-player-box-c {
   min-height: 55px;
   min-width: 245px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   /* margin: 0 6px; */
-  /* background-color: alpha(#000, 0.3); */
-  /* box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4); */
+  /* background-color: @shadow-color; */
+  /* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
 }
 #outer-no-player-box-c {
   min-height: 55px;
   min-width: 345px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   /* margin: 0 6px; */
-  /* background-color: alpha(#000, 0.3); */
-  /* box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4); */
+  /* background-color: @shadow-color; */
+  /* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
 }
 #box-c {
-  background-color: alpha(#000, 0.08);
-  box-shadow: inset 0 0 0 0.5px alpha(#aaa, 0.4);
-  border: 1px solid alpha(#111, 0.4);
-  border-radius: 12px;
+  background-color: @bg-darker;
+  box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
+  border: 1px solid @border-strong;
+  border-radius: var(--radius-md);
   margin-top: 0.5rem;
   margin-left: 4px;
   margin-right: 4px;
@@ -58,11 +58,11 @@
 
   min-height: 50px;
   min-width: 330px;
-  /* border-radius: 8px; */
+  /* border-radius: var(--radius-sm); */
   /* margin: 0 6px 10px; */
   /* border: 0.5px solid alpha(#000, 0.4); */
-  /* background-color: alpha(#999, 0.1); */
-  /* box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4); */
+  /* background-color: alpha(@text-dim, 0.1); */
+  /* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
 }
 #player-box:disabled highlight,
 #player-box:disabled progress {
@@ -98,7 +98,7 @@
 
 #player-artist-c {
   margin-top: -5px;
-  color: #999;
+  color: @text-dim;
   font-size: 12px;
 }
 #player-artist,
@@ -142,7 +142,7 @@
   margin-bottom: 10px;
   background-size: cover;
   margin-left: 10px;
-  border-radius: 5px;
+  border-radius: var(--radius-xs);
 }
 .album-image {
   min-width: 70px;
@@ -162,17 +162,17 @@
 #seek-bar scale {
   background-color: transparent;
   margin-top: 10px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
 }
 
 #seek-bar trough {
   min-width: 10px;
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   background-color: alpha(#666, 0.5);
   border: 1px solid alpha(#444, 0.3);
 }
 
 #seek-bar highlight {
-  background: alpha(#fff, 0.8);
-  border-radius: 99px;
+  background: alpha(@text-main, 0.8);
+  border-radius: var(--radius-full);
 }
diff --git a/src/shared/styles/settings.css b/src/shared/styles/settings.css
index 4f61e87..dfb2d12 100644
--- a/src/shared/styles/settings.css
+++ b/src/shared/styles/settings.css
@@ -1,6 +1,6 @@
 #settings-window {
     background-color: var(--background);
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     border: 1px solid var(--border);
     min-width: 850px;
     min-height: 600px;
@@ -19,7 +19,7 @@
 
 #settings-sidebar-button {
     padding: 10px 15px;
-    border-radius: 8px;
+    border-radius: var(--radius-sm);
     margin-bottom: 2px;
 }
 
@@ -53,7 +53,7 @@
 
 #settings-row {
     padding: 12px 15px;
-    border-radius: 8px;
+    border-radius: var(--radius-sm);
     background-color: rgba(255, 255, 255, 0.03);
     margin-bottom: 2px;
 }
@@ -71,7 +71,7 @@
 #settings-switch {
     background-color: rgba(255, 255, 255, 0.1);
     padding: 6px 12px;
-    border-radius: 20px;
+    border-radius: var(--radius-xl);
     min-width: 50px;
     transition: all 0.2s ease;
 }
@@ -84,7 +84,7 @@
 #settings-entry {
     background-color: rgba(255, 255, 255, 0.05);
     padding: 8px 12px;
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
     border: 1px solid var(--border);
     min-width: 200px;
     color: var(--foreground);
@@ -97,7 +97,7 @@
 #settings-combo {
     background-color: rgba(255, 255, 255, 0.05);
     padding: 4px 8px;
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
     border: 1px solid var(--border);
     min-width: 150px;
     color: var(--foreground);
@@ -113,7 +113,7 @@
 
 #settings-list-tag {
     background-color: rgba(255, 255, 255, 0.08);
-    border-radius: 15px;
+    border-radius: var(--radius-md);
     padding: 4px 10px;
     margin-right: 5px;
     margin-bottom: 5px;
@@ -141,6 +141,6 @@
     background-color: rgba(255, 255, 255, 0.03);
     border: 1px dashed var(--border);
     padding: 6px 12px;
-    border-radius: 6px;
+    border-radius: var(--radius-xs);
     font-size: 13px;
 }
\ No newline at end of file
diff --git a/src/shared/styles/switcher.css b/src/shared/styles/switcher.css
index 8691d05..17101a5 100644
--- a/src/shared/styles/switcher.css
+++ b/src/shared/styles/switcher.css
@@ -1,6 +1,6 @@
 #application-switcher-container {
     background-color: var(--shadow);
-    border-radius: 20px;
+    border-radius: var(--radius-xl);
     padding: 24px;
 }
 
@@ -17,7 +17,7 @@
 
 #window-button {
     background-color: transparent;
-    border-radius: 12px;
+    border-radius: var(--radius-md);
 }
 
 #window-button.active {
@@ -39,7 +39,7 @@
 }
 
 #switcher-icon-box {
-    border-radius: 12px;
+    border-radius: var(--radius-md);
     padding: 4px;
 }
 
diff --git a/src/shared/styles/tray.css b/src/shared/styles/tray.css
index d10b0ef..8979f2c 100644
--- a/src/shared/styles/tray.css
+++ b/src/shared/styles/tray.css
@@ -1,7 +1,7 @@
 tooltip {
   border: #474747 solid 1px;
   border-radius: 0.75rem;
-  background-color: alpha(#fff, 0.05);
+  background-color: alpha(@text-main, 0.05);
 }
 
 @keyframes tooltipShow {
@@ -23,7 +23,7 @@ menu {
   border: #474747 solid 1px;
   border-radius: 0.75rem;
   transition: all 100ms ease-in-out;
-  background-color: alpha(#fff, 0.05);
+  background-color: alpha(@text-main, 0.05);
 }
 
 menu > menuitem {
@@ -39,12 +39,12 @@ menu > menuitem:last-child {
 menu > menuitem:hover {
   transition: all 20ms ease-in-out;
   font-size: 13px;
-  border-radius: 4px;
+  border-radius: var(--radius-xs);
   color: #222;
   background-color: alpha(#2369ff, 1);
 }
 
 menu > menuitem:hover > label {
-  color: #fff;
+  color: @text-main;
   font-weight: 400;
 }
diff --git a/src/shared/styles/widgets.css b/src/shared/styles/widgets.css
index acd217c..1a8058c 100644
--- a/src/shared/styles/widgets.css
+++ b/src/shared/styles/widgets.css
@@ -2,8 +2,8 @@
   margin: 5px 5px 20px 5px;
   min-width: 170px;
   min-height: 170px;
-  border-radius: 18px;
-  transition: all 0.5s ease-in-out;
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-slow);
   background: #202020;
 }
 
@@ -92,7 +92,7 @@
   margin: 5px 20px 20px 10px;
   min-width: 170px;
   min-height: 170px;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
 }
 
 #calendar-widget {
@@ -113,7 +113,7 @@
 #calendar-day-header {
   font-size: 12px;
   font-weight: 600;
-  color: #ffffff;
+  color: @text-main;
   min-width: 18px;
   min-height: 10px;
 }
@@ -130,7 +130,7 @@
   font-size: 12px;
   margin: 1.4px 0px 1.4px 0px;
   font-weight: 500;
-  color: #ffffff;
+  color: @text-main;
   min-width: 18px;
   min-height: 10px;
 }
@@ -148,7 +148,7 @@
   font-weight: 700;
   color: #191919;
   background-color: var(--blue-dim);
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   min-width: 18px;
   min-height: 16px;
   padding: 2px;
@@ -174,12 +174,12 @@
   padding: 5px;
   margin-top: 10px;
   font-size: 30px;
-  color: alpha(#fff, 0.9);
+  color: alpha(@text-main, 0.9);
   font-weight: 600;
 }
 
 #date label {
-  color: alpha(#fff, 0.9);
+  color: alpha(@text-main, 0.9);
 
   margin-top: -10px;
   font-size: 90px;
@@ -195,7 +195,7 @@
   margin: 5px 10px 20px 5px;
   min-width: 170px;
   min-height: 170px;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
 }
 
 /* System Info Widget CSS  */
@@ -204,7 +204,7 @@
   margin: 5px 5px 5px 5px;
   min-width: 170px;
   min-height: 170px;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
 }
 
 #ram-progress {
@@ -252,7 +252,7 @@
 #info-value {
   font-size: 12px;
   font-weight: 600;
-  color: #ffffff;
+  color: @text-main;
 }
 
 #info-container {