diff --git a/apps/mana/apps/web/src/lib/components/PwaUpdatePrompt.svelte b/apps/mana/apps/web/src/lib/components/PwaUpdatePrompt.svelte
index 76ef92e13..72e0c2e87 100644
--- a/apps/mana/apps/web/src/lib/components/PwaUpdatePrompt.svelte
+++ b/apps/mana/apps/web/src/lib/components/PwaUpdatePrompt.svelte
@@ -121,7 +121,7 @@
 
 	.update-icon {
 		flex-shrink: 0;
-		color: #6366f1;
+		color: hsl(var(--color-primary));
 	}
 
 	.update-text {
@@ -150,7 +150,7 @@
 	}
 
 	.update-btn {
-		background: #6366f1;
+		background: hsl(var(--color-primary));
 		border: none;
 		color: white;
 		padding: 5px 12px;
@@ -162,7 +162,8 @@
 	}
 
 	.update-btn:hover {
-		background: #5558e6;
+		background: hsl(var(--color-primary));
+		filter: brightness(0.9);
 	}
 
 	.dismiss-btn {
diff --git a/apps/mana/apps/web/src/lib/components/RecoveryCodeUnlockModal.svelte b/apps/mana/apps/web/src/lib/components/RecoveryCodeUnlockModal.svelte
index a492e2343..30d33a76f 100644
--- a/apps/mana/apps/web/src/lib/components/RecoveryCodeUnlockModal.svelte
+++ b/apps/mana/apps/web/src/lib/components/RecoveryCodeUnlockModal.svelte
@@ -113,7 +113,7 @@
 		position: fixed;
 		inset: 0;
 		z-index: 9999;
-		background: rgba(0, 0, 0, 0.6);
+		background: hsl(0 0% 0% / 0.6);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -173,7 +173,7 @@
 	.error {
 		margin: 0.75rem 0;
 		padding: 0.75rem 1rem;
-		background: rgba(239, 68, 68, 0.08);
+		background: hsl(var(--color-error) / 0.08);
 		border: 1px solid rgba(239, 68, 68, 0.3);
 		border-radius: 0.5rem;
 		font-size: 0.85rem;
diff --git a/apps/mana/apps/web/src/lib/components/SessionWarning.svelte b/apps/mana/apps/web/src/lib/components/SessionWarning.svelte
index 12bb9efc7..9bdc3fdd5 100644
--- a/apps/mana/apps/web/src/lib/components/SessionWarning.svelte
+++ b/apps/mana/apps/web/src/lib/components/SessionWarning.svelte
@@ -71,8 +71,8 @@
 		display: flex;
 		align-items: center;
 		gap: 12px;
-		background: rgba(245, 158, 11, 0.95);
-		color: #1e293b;
+		background: hsl(var(--color-warning) / 0.95);
+		color: hsl(0 0% 12%);
 		padding: 10px 20px;
 		border-radius: 10px;
 		font-size: 13px;
@@ -97,9 +97,9 @@
 	}
 
 	.refresh-btn {
-		background: rgba(0, 0, 0, 0.15);
+		background: hsl(0 0% 0% / 0.15);
 		border: none;
-		color: #1e293b;
+		color: hsl(0 0% 12%);
 		padding: 4px 12px;
 		border-radius: 6px;
 		font-size: 12px;
@@ -109,6 +109,6 @@
 	}
 
 	.refresh-btn:hover {
-		background: rgba(0, 0, 0, 0.25);
+		background: hsl(0 0% 0% / 0.25);
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/components/SuggestionToast.svelte b/apps/mana/apps/web/src/lib/components/SuggestionToast.svelte
index f77b6a7b1..de119fb2b 100644
--- a/apps/mana/apps/web/src/lib/components/SuggestionToast.svelte
+++ b/apps/mana/apps/web/src/lib/components/SuggestionToast.svelte
@@ -95,7 +95,7 @@
 
 	.toast-text {
 		font-size: 0.75rem;
-		color: #e5e7eb;
+		color: hsl(var(--color-foreground));
 		line-height: 1.3;
 	}
 
@@ -110,7 +110,7 @@
 		padding: 0.25rem 0.625rem;
 		border-radius: 0.375rem;
 		border: none;
-		background: #8b5cf6;
+		background: hsl(var(--color-primary));
 		color: white;
 		font-size: 0.6875rem;
 		font-weight: 600;
@@ -125,14 +125,14 @@
 	.toast-dismiss {
 		border: none;
 		background: transparent;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		font-size: 1rem;
 		cursor: pointer;
 		padding: 0.125rem 0.25rem;
 		line-height: 1;
 	}
 	.toast-dismiss:hover {
-		color: #ef4444;
+		color: hsl(var(--color-error));
 	}
 
 	@keyframes slide-up {
diff --git a/apps/mana/apps/web/src/lib/components/SyncConflictToast.svelte b/apps/mana/apps/web/src/lib/components/SyncConflictToast.svelte
index b35973bb5..512a750b7 100644
--- a/apps/mana/apps/web/src/lib/components/SyncConflictToast.svelte
+++ b/apps/mana/apps/web/src/lib/components/SyncConflictToast.svelte
@@ -179,7 +179,7 @@
 
 	.close:hover {
 		color: var(--text-primary, #111);
-		background: rgba(0, 0, 0, 0.05);
+		background: hsl(var(--color-surface-hover));
 	}
 
 	.body {
diff --git a/apps/mana/apps/web/src/lib/components/auth/AuthRequiredModal.svelte b/apps/mana/apps/web/src/lib/components/auth/AuthRequiredModal.svelte
index 34286478a..4c26db547 100644
--- a/apps/mana/apps/web/src/lib/components/auth/AuthRequiredModal.svelte
+++ b/apps/mana/apps/web/src/lib/components/auth/AuthRequiredModal.svelte
@@ -85,7 +85,7 @@
 		position: fixed;
 		inset: 0;
 		z-index: 9999;
-		background: rgba(0, 0, 0, 0.6);
+		background: hsl(0 0% 0% / 0.6);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -151,7 +151,7 @@
 
 	.btn-primary {
 		background: var(--primary, #6366f1);
-		color: #fff;
+		color: hsl(var(--color-primary-foreground));
 		border-color: var(--primary, #6366f1);
 	}