diff --git a/scripts/run-sonar.mjs b/scripts/run-sonar.mjs
index 5e0bdb4..bc747f8 100644
--- a/scripts/run-sonar.mjs
+++ b/scripts/run-sonar.mjs
@@ -15,7 +15,7 @@ try {
   console.log(`🔍 Running SonarQube scanner on ${SONAR_HOST}...`);
 
   execSync(
-    `sonar-scanner -Dsonar.host.url="${SONAR_HOST}" -Dsonar.token="${SONAR_TOKEN}"`,
+    `sonar-scanner -Dsonar.host.url="${SONAR_HOST}" -Dsonar.token="${SONAR_TOKEN}" -Dsonar.login="${SONAR_TOKEN}"`,
     { stdio: "inherit" },
   );
 
diff --git a/src/app/components/open-calendar/open-calendar.scss b/src/app/components/open-calendar/open-calendar.scss
index 3d319a4..0e688e8 100644
--- a/src/app/components/open-calendar/open-calendar.scss
+++ b/src/app/components/open-calendar/open-calendar.scss
@@ -44,7 +44,7 @@
   align-items: center;
   padding: 0.25rem 0.75rem;
   border-radius: var(--p-border-radius);
-  background: var(--p-surface-100);
+  background: var(--c-surface-muted);
 }
 
 .calendar__stat-label {
@@ -60,16 +60,16 @@
 }
 
 .calendar__stat.balance-positive {
-  background: var(--p-green-50);
+  background: var(--c-positive-bg);
   .calendar__stat-value {
-    color: var(--p-green-600);
+    color: var(--c-positive-color);
   }
 }
 
 .calendar__stat.balance-negative {
-  background: var(--p-red-50);
+  background: var(--c-negative-bg);
   .calendar__stat-value {
-    color: var(--p-red-600);
+    color: var(--c-negative-color);
   }
 }
 
@@ -99,7 +99,7 @@
   font-size: 0.75rem;
   text-transform: uppercase;
   color: var(--p-text-muted-color);
-  background: var(--p-surface-50);
+  background: var(--c-surface-subtle);
 }
 
 .calendar__days {
@@ -129,7 +129,7 @@
 }
 
 .calendar__day--other-month {
-  background: var(--p-surface-50);
+  background: var(--c-surface-subtle);
 
   .calendar__day-number {
     color: var(--p-text-muted-color);
@@ -217,7 +217,7 @@
   font-size: 0.625rem;
   padding: 0.25rem 0.375rem;
   border-radius: var(--p-border-radius-sm);
-  background: var(--p-surface-100);
+  background: var(--c-surface-muted);
   margin-bottom: 0.25rem;
 }
 
@@ -235,21 +235,21 @@
 }
 
 .calendar__hours--complete {
-  background: var(--p-green-50);
+  background: var(--c-positive-bg);
   .calendar__hours-worked {
-    color: var(--p-green-600);
+    color: var(--c-positive-color);
   }
 }
 
 .calendar__hours--over {
-  background: var(--p-blue-50);
+  background: var(--c-over-bg);
   .calendar__hours-worked {
-    color: var(--p-blue-600);
+    color: var(--c-over-color);
   }
 }
 
 .calendar__day--non-work {
-  background: var(--p-surface-50);
+  background: var(--c-surface-subtle);
 
   .calendar__day-number {
     color: var(--p-text-muted-color);
@@ -328,7 +328,7 @@
 }
 
 .calendar__task--no-task {
-  background: var(--p-surface-100);
+  background: var(--c-surface-muted);
   border-left-color: var(--p-text-muted-color);
   color: var(--p-text-muted-color);
   font-style: italic;
@@ -357,7 +357,7 @@
 }
 
 .calendar__weekday--summary {
-  background: var(--p-surface-100);
+  background: var(--c-surface-muted);
   font-size: 0.625rem;
   display: flex;
   align-items: center;
@@ -370,7 +370,7 @@
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
-  background: var(--p-surface-50);
+  background: var(--c-surface-subtle);
   border-bottom: 1px solid var(--p-surface-border);
   font-size: 0.75rem;
   gap: 0.125rem;
@@ -392,18 +392,18 @@
 }
 
 .calendar__week-summary--complete {
-  background: var(--p-green-50);
+  background: var(--c-positive-bg);
 
   .calendar__week-worked {
-    color: var(--p-green-600);
+    color: var(--c-positive-color);
   }
 }
 
 .calendar__week-summary--over {
-  background: var(--p-blue-50);
+  background: var(--c-over-bg);
 
   .calendar__week-worked {
-    color: var(--p-blue-600);
+    color: var(--c-over-color);
   }
 }
 
@@ -426,7 +426,7 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.75rem 1rem;
-    background: var(--p-surface-100);
+    background: var(--c-surface-muted);
     border-radius: var(--p-border-radius);
     font-size: 1rem;
   }
diff --git a/src/app/components/open-day-override-dialog/open-day-override-dialog.scss b/src/app/components/open-day-override-dialog/open-day-override-dialog.scss
index 0f4ee5c..969a55f 100644
--- a/src/app/components/open-day-override-dialog/open-day-override-dialog.scss
+++ b/src/app/components/open-day-override-dialog/open-day-override-dialog.scss
@@ -9,7 +9,7 @@
   align-items: center;
   gap: 0.75rem;
   padding: 1rem;
-  background: var(--p-surface-50);
+  background: var(--c-surface-subtle);
   border-radius: var(--p-border-radius);
   font-size: 1rem;
   font-weight: 500;
@@ -63,9 +63,9 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem;
-  background: var(--p-primary-50);
+  background: var(--c-primary-bg);
   border-radius: var(--p-border-radius);
-  color: var(--p-primary-700);
+  color: var(--c-primary-color);
   font-size: 0.875rem;
 
   i {
@@ -118,7 +118,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
-  background: var(--p-surface-100);
+  background: var(--c-surface-muted);
   border-radius: var(--p-border-radius);
   border-left: 4px solid var(--p-primary-color);
 }
diff --git a/src/app/components/open-time-entry-dialog/open-time-entry-dialog.scss b/src/app/components/open-time-entry-dialog/open-time-entry-dialog.scss
index c7d8e68..ea721c2 100644
--- a/src/app/components/open-time-entry-dialog/open-time-entry-dialog.scss
+++ b/src/app/components/open-time-entry-dialog/open-time-entry-dialog.scss
@@ -43,7 +43,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
-  background: var(--p-surface-50);
+  background: var(--c-surface-subtle);
   border-radius: var(--p-border-radius);
 }
 
diff --git a/src/app/components/open-work-config-dialog/open-work-config-dialog.scss b/src/app/components/open-work-config-dialog/open-work-config-dialog.scss
index d59700d..a343e32 100644
--- a/src/app/components/open-work-config-dialog/open-work-config-dialog.scss
+++ b/src/app/components/open-work-config-dialog/open-work-config-dialog.scss
@@ -44,7 +44,7 @@
   align-items: center;
   gap: 0.75rem;
   padding: 0.5rem 0.75rem;
-  background: var(--p-surface-50);
+  background: var(--c-surface-subtle);
   border-radius: var(--p-border-radius);
   transition: all 0.2s;
 
@@ -57,8 +57,8 @@
   }
 
   &--last {
-    background: var(--p-primary-50);
-    border: 1px solid var(--p-primary-200);
+    background: var(--c-primary-bg);
+    border: 1px solid var(--c-primary-border);
   }
 }
 
@@ -90,14 +90,14 @@
 .work-config__auto-label {
   font-size: 0.875rem;
   font-weight: 600;
-  color: var(--p-primary-600);
+  color: var(--c-primary-color);
 }
 
 .work-config__auto-badge {
   font-size: 0.625rem;
   padding: 0.125rem 0.375rem;
-  background: var(--p-primary-100);
-  color: var(--p-primary-700);
+  background: var(--c-primary-bg);
+  color: var(--c-primary-color);
   border-radius: 9999px;
   text-transform: uppercase;
   font-weight: 600;
@@ -109,10 +109,10 @@
   align-items: flex-start;
   gap: 0.5rem;
   padding: 0.75rem;
-  background: var(--p-blue-50);
+  background: var(--c-info-bg);
   border-radius: var(--p-border-radius);
   font-size: 0.75rem;
-  color: var(--p-blue-700);
+  color: var(--c-info-color);
 
   i {
     margin-top: 0.125rem;
diff --git a/src/styles.scss b/src/styles.scss
index 244c8d4..c96edd5 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -9,11 +9,41 @@
 
 html {
   font-size: 14px;
+
+  /* Custom semantic colors - Light mode */
+  --c-positive-bg: var(--p-green-50);
+  --c-positive-color: var(--p-green-600);
+  --c-negative-bg: var(--p-red-50);
+  --c-negative-color: var(--p-red-600);
+  --c-over-bg: var(--p-blue-50);
+  --c-over-color: var(--p-blue-600);
+  --c-info-bg: var(--p-blue-50);
+  --c-info-color: var(--p-blue-700);
+  --c-primary-bg: var(--p-primary-50);
+  --c-primary-color: var(--p-primary-600);
+  --c-primary-border: var(--p-primary-200);
+  --c-surface-subtle: var(--p-surface-50);
+  --c-surface-muted: var(--p-surface-100);
 }
 
 html.my-app-dark {
   background-color: var(--p-surface-900);
   color: var(--p-surface-0);
+
+  /* Custom semantic colors - Dark mode */
+  --c-positive-bg: color-mix(in srgb, var(--p-green-500) 15%, transparent);
+  --c-positive-color: var(--p-green-400);
+  --c-negative-bg: color-mix(in srgb, var(--p-red-500) 15%, transparent);
+  --c-negative-color: var(--p-red-400);
+  --c-over-bg: color-mix(in srgb, var(--p-blue-500) 15%, transparent);
+  --c-over-color: var(--p-blue-400);
+  --c-info-bg: color-mix(in srgb, var(--p-blue-500) 15%, transparent);
+  --c-info-color: var(--p-blue-400);
+  --c-primary-bg: color-mix(in srgb, var(--p-primary-500) 15%, transparent);
+  --c-primary-color: var(--p-primary-400);
+  --c-primary-border: color-mix(in srgb, var(--p-primary-500) 30%, transparent);
+  --c-surface-subtle: color-mix(in srgb, var(--p-surface-0) 3%, transparent);
+  --c-surface-muted: color-mix(in srgb, var(--p-surface-0) 8%, transparent);
 }
 
 body {