diff --git a/apps/mana/apps/web/src/lib/modules/cycles/components/SymptomManager.svelte b/apps/mana/apps/web/src/lib/modules/cycles/components/SymptomManager.svelte
index f7364e745..8b6ec5cd8 100644
--- a/apps/mana/apps/web/src/lib/modules/cycles/components/SymptomManager.svelte
+++ b/apps/mana/apps/web/src/lib/modules/cycles/components/SymptomManager.svelte
@@ -115,7 +115,7 @@
 						{:else}
 							<span
 								class="sm-dot"
-								style="background: {sym.color ?? 'var(--color-muted-foreground, #9ca3af)'}"
+								style="background: {sym.color ?? 'hsl(var(--color-muted-foreground))'}"
 							></span>
 							<div class="sm-info">
 								<span class="sm-name">{sym.name}</span>
diff --git a/apps/mana/apps/web/src/lib/modules/habits/ListView.svelte b/apps/mana/apps/web/src/lib/modules/habits/ListView.svelte
index b6d43bb8d..322cedb01 100644
--- a/apps/mana/apps/web/src/lib/modules/habits/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/habits/ListView.svelte
@@ -305,15 +305,15 @@
 		gap: 0.125rem;
 		padding: 0.5rem 0.25rem;
 		border-radius: 0.75rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.04));
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 		cursor: pointer;
 		transition:
 			transform 0.15s,
 			box-shadow 0.15s;
 		user-select: none;
 		touch-action: manipulation;
-		color: var(--color-foreground, #fff);
+		color: hsl(var(--color-foreground));
 	}
 
 	.tally-item:hover {
@@ -355,7 +355,7 @@
 
 	.tally-name {
 		font-size: 0.625rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		text-overflow: ellipsis;
 		overflow: hidden;
 		white-space: nowrap;
@@ -373,7 +373,7 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		padding: 0.25rem 0;
 	}
 
@@ -393,7 +393,7 @@
 	}
 
 	.log-name {
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		flex: 1;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -401,28 +401,28 @@
 	}
 
 	.log-time {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-variant-numeric: tabular-nums;
 		flex-shrink: 0;
 	}
 
 	.add-btn {
-		border: 2px dashed var(--color-border, rgba(255, 255, 255, 0.15));
+		border: 2px dashed hsl(var(--color-border));
 		background: transparent;
 	}
 	.add-btn:hover {
-		border-color: var(--color-primary, #6366f1);
-		color: var(--color-primary, #6366f1);
+		border-color: hsl(var(--color-primary));
+		color: hsl(var(--color-primary));
 	}
 
 	.add-icon {
 		font-size: 1.25rem;
 		font-weight: 300;
 		line-height: 1;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 	.add-btn:hover .add-icon {
-		color: var(--color-primary, #6366f1);
+		color: hsl(var(--color-primary));
 	}
 
 	/* ── Create Form ──────────────────────────────── */
@@ -432,8 +432,8 @@
 		gap: 0.5rem;
 		padding: 0.75rem;
 		border-radius: 0.75rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.06));
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 	}
 
 	.create-row {
@@ -463,25 +463,25 @@
 		overflow-y: auto;
 		border-radius: 0.5rem;
 		padding: 0.5rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.03));
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 	}
 
 	.create-input {
 		flex: 1;
 		background: transparent;
 		border: none;
-		border-bottom: 2px solid var(--color-border, rgba(255, 255, 255, 0.15));
-		color: var(--color-foreground);
+		border-bottom: 2px solid hsl(var(--color-border));
+		color: hsl(var(--color-foreground));
 		font-size: 0.875rem;
 		padding: 0.375rem 0;
 		outline: none;
 	}
 	.create-input:focus {
-		border-color: var(--color-primary, #6366f1);
+		border-color: hsl(var(--color-primary));
 	}
 	.create-input::placeholder {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.color-row {
@@ -502,7 +502,7 @@
 	}
 	.color-dot.selected {
 		border-color: white;
-		box-shadow: 0 0 0 1px var(--color-primary, #6366f1);
+		box-shadow: 0 0 0 1px hsl(var(--color-primary));
 	}
 
 	.create-actions {
@@ -523,14 +523,14 @@
 
 	.btn-cancel {
 		background: transparent;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 	.btn-cancel:hover {
-		background: var(--color-muted, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
 	}
 
 	.btn-create {
-		background: var(--color-primary, #6366f1);
+		background: hsl(var(--color-primary));
 		color: white;
 	}
 	.btn-create:hover:not(:disabled) {
@@ -544,7 +544,7 @@
 	/* ── Empty / Misc ─────────────────────────────── */
 	.empty {
 		text-align: center;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.875rem;
 		padding: 2rem 0;
 		display: flex;
@@ -556,7 +556,7 @@
 	.empty-add-btn {
 		padding: 0.5rem 1rem;
 		border-radius: 0.5rem;
-		background: var(--color-primary, #6366f1);
+		background: hsl(var(--color-primary));
 		color: white;
 		border: none;
 		font-size: 0.8125rem;
diff --git a/apps/mana/apps/web/src/lib/modules/habits/components/DayTimeline.svelte b/apps/mana/apps/web/src/lib/modules/habits/components/DayTimeline.svelte
index 324a3f1aa..599451a1a 100644
--- a/apps/mana/apps/web/src/lib/modules/habits/components/DayTimeline.svelte
+++ b/apps/mana/apps/web/src/lib/modules/habits/components/DayTimeline.svelte
@@ -73,7 +73,7 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		padding: 0 0.25rem;
 	}
 
@@ -89,7 +89,7 @@
 		gap: 0.5rem;
 		padding: 0.5rem 0.75rem;
 		border-radius: 0.5rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.04));
+		background: hsl(var(--color-muted));
 		font-size: 0.875rem;
 	}
 
@@ -107,19 +107,19 @@
 	}
 
 	.entry-title {
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-weight: 500;
 	}
 
 	.entry-time {
 		margin-left: auto;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.8125rem;
 		font-variant-numeric: tabular-nums;
 	}
 
 	.entry-note {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.8125rem;
 		font-style: italic;
 	}
diff --git a/apps/mana/apps/web/src/lib/modules/habits/components/HabitBoard.svelte b/apps/mana/apps/web/src/lib/modules/habits/components/HabitBoard.svelte
index fff1b4bcc..4c13c8499 100644
--- a/apps/mana/apps/web/src/lib/modules/habits/components/HabitBoard.svelte
+++ b/apps/mana/apps/web/src/lib/modules/habits/components/HabitBoard.svelte
@@ -73,16 +73,16 @@
 		gap: 0.25rem;
 		aspect-ratio: 1;
 		border-radius: 1rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.04));
-		border: 2px dashed var(--color-border, rgba(255, 255, 255, 0.15));
-		color: var(--color-muted-foreground);
+		background: hsl(var(--color-muted));
+		border: 2px dashed hsl(var(--color-border));
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 
 	.add-tile:hover {
-		border-color: var(--color-primary, #6366f1);
-		color: var(--color-primary, #6366f1);
+		border-color: hsl(var(--color-primary));
+		color: hsl(var(--color-primary));
 		background: rgba(99, 102, 241, 0.06);
 	}
 
diff --git a/apps/mana/apps/web/src/lib/modules/habits/components/HabitDetail.svelte b/apps/mana/apps/web/src/lib/modules/habits/components/HabitDetail.svelte
index 1160e0dd3..b917f2ce2 100644
--- a/apps/mana/apps/web/src/lib/modules/habits/components/HabitDetail.svelte
+++ b/apps/mana/apps/web/src/lib/modules/habits/components/HabitDetail.svelte
@@ -209,14 +209,14 @@
 		height: 2rem;
 		border-radius: 0.5rem;
 		background: transparent;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		border: none;
 		cursor: pointer;
 		transition: background 0.15s;
 	}
 	.back-btn:hover,
 	.edit-btn:hover {
-		background: var(--color-muted, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
 	}
 
 	.header-info {
@@ -234,7 +234,7 @@
 	.header-title {
 		font-size: 1.25rem;
 		font-weight: 700;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 	}
 
 	.stats-grid {
@@ -249,34 +249,34 @@
 		align-items: center;
 		padding: 0.75rem;
 		border-radius: 0.75rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.04));
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 	}
 
 	.stat-value {
 		font-size: 1.5rem;
 		font-weight: 700;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-variant-numeric: tabular-nums;
 	}
 
 	.stat-label {
 		font-size: 0.75rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		margin-top: 0.125rem;
 	}
 
 	.week-chart {
 		padding: 1rem;
 		border-radius: 0.75rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.04));
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 	}
 
 	.chart-title {
 		font-size: 0.75rem;
 		font-weight: 600;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		margin-bottom: 0.75rem;
 	}
 
@@ -315,13 +315,13 @@
 	.bar-count {
 		font-size: 0.6875rem;
 		font-weight: 600;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-variant-numeric: tabular-nums;
 	}
 
 	.bar-day {
 		font-size: 0.625rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		text-transform: uppercase;
 	}
 
@@ -358,7 +358,7 @@
 	.section-title {
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 	}
 
 	.day-group {
@@ -372,7 +372,7 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		padding: 0.25rem 0;
 	}
 
@@ -382,19 +382,19 @@
 		gap: 0.5rem;
 		padding: 0.375rem 0.5rem;
 		border-radius: 0.375rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.03));
+		background: hsl(var(--color-muted));
 	}
 
 	.log-time {
 		font-size: 0.8125rem;
 		font-weight: 500;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-variant-numeric: tabular-nums;
 	}
 
 	.log-note {
 		font-size: 0.8125rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-style: italic;
 		flex: 1;
 	}
@@ -407,7 +407,7 @@
 		height: 1.25rem;
 		border-radius: 0.25rem;
 		background: transparent;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		border: none;
 		cursor: pointer;
 		opacity: 0;
@@ -418,7 +418,7 @@
 		opacity: 1;
 	}
 	.log-delete:hover {
-		color: var(--color-destructive, #ef4444);
+		color: hsl(var(--color-error));
 		background: rgba(239, 68, 68, 0.1);
 	}
 
@@ -426,7 +426,7 @@
 		display: flex;
 		gap: 0.5rem;
 		padding-top: 0.5rem;
-		border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+		border-top: 1px solid hsl(var(--color-border));
 	}
 
 	.action-btn {
@@ -434,18 +434,18 @@
 		border-radius: 0.5rem;
 		font-size: 0.8125rem;
 		font-weight: 500;
-		background: var(--color-surface, rgba(255, 255, 255, 0.06));
-		color: var(--color-muted-foreground);
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-muted-foreground));
+		border: 1px solid hsl(var(--color-border));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.action-btn:hover {
-		background: var(--color-muted, rgba(255, 255, 255, 0.1));
+		background: hsl(var(--color-muted));
 	}
 
 	.action-btn.danger {
-		color: var(--color-destructive, #ef4444);
+		color: hsl(var(--color-error));
 		border-color: rgba(239, 68, 68, 0.2);
 	}
 	.action-btn.danger:hover {
@@ -453,7 +453,7 @@
 	}
 
 	.empty-text {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.875rem;
 		text-align: center;
 		padding: 1.5rem 0;
diff --git a/apps/mana/apps/web/src/lib/modules/habits/components/HabitForm.svelte b/apps/mana/apps/web/src/lib/modules/habits/components/HabitForm.svelte
index 255bd4dc9..5dfaa0992 100644
--- a/apps/mana/apps/web/src/lib/modules/habits/components/HabitForm.svelte
+++ b/apps/mana/apps/web/src/lib/modules/habits/components/HabitForm.svelte
@@ -202,8 +202,8 @@
 		gap: 0.75rem;
 		padding: 1rem;
 		border-radius: 1rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.06));
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 	}
 
 	.form-row {
@@ -232,17 +232,17 @@
 		flex: 1;
 		background: transparent;
 		border: none;
-		border-bottom: 2px solid var(--color-border, rgba(255, 255, 255, 0.15));
-		color: var(--color-foreground);
+		border-bottom: 2px solid hsl(var(--color-border));
+		color: hsl(var(--color-foreground));
 		font-size: 1rem;
 		padding: 0.5rem 0;
 		outline: none;
 	}
 	.title-input:focus {
-		border-color: var(--color-primary, #6366f1);
+		border-color: hsl(var(--color-primary));
 	}
 	.title-input::placeholder {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.icon-picker-wrapper {
@@ -250,8 +250,8 @@
 		overflow-y: auto;
 		border-radius: 0.5rem;
 		padding: 0.5rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.03));
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 	}
 
 	.color-picker {
@@ -273,7 +273,7 @@
 	}
 	.color-swatch.selected {
 		border-color: white;
-		box-shadow: 0 0 0 2px var(--color-primary, #6366f1);
+		box-shadow: 0 0 0 2px hsl(var(--color-primary));
 	}
 
 	.target-label {
@@ -281,22 +281,22 @@
 		align-items: center;
 		gap: 0.5rem;
 		font-size: 0.875rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.target-input {
 		width: 4rem;
 		background: transparent;
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.5rem;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-size: 0.875rem;
 		padding: 0.375rem 0.5rem;
 		outline: none;
 		text-align: center;
 	}
 	.target-input:focus {
-		border-color: var(--color-primary, #6366f1);
+		border-color: hsl(var(--color-primary));
 	}
 
 	.schedule-section {
@@ -309,7 +309,7 @@
 		align-items: center;
 		gap: 0.5rem;
 		font-size: 0.875rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 	}
 	.schedule-days {
@@ -320,20 +320,20 @@
 		width: 2rem;
 		height: 2rem;
 		border-radius: 50%;
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.6875rem;
 		font-weight: 500;
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.day-btn:hover {
-		border-color: var(--color-primary, #6366f1);
+		border-color: hsl(var(--color-primary));
 	}
 	.day-btn.active {
-		background: var(--color-primary, #6366f1);
-		border-color: var(--color-primary, #6366f1);
+		background: hsl(var(--color-primary));
+		border-color: hsl(var(--color-primary));
 		color: white;
 	}
 
@@ -356,14 +356,14 @@
 
 	.btn-cancel {
 		background: transparent;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 	.btn-cancel:hover {
-		background: var(--color-muted, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
 	}
 
 	.btn-save {
-		background: var(--color-primary, #6366f1);
+		background: hsl(var(--color-primary));
 		color: white;
 	}
 	.btn-save:hover:not(:disabled) {
diff --git a/apps/mana/apps/web/src/lib/modules/photos/ListView.svelte b/apps/mana/apps/web/src/lib/modules/photos/ListView.svelte
index 861158456..8a2937eaa 100644
--- a/apps/mana/apps/web/src/lib/modules/photos/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/photos/ListView.svelte
@@ -259,9 +259,9 @@
 		justify-content: center;
 		gap: 0.5rem;
 		background: rgba(99, 102, 241, 0.15);
-		border: 2px dashed var(--color-primary, #6366f1);
+		border: 2px dashed hsl(var(--color-primary));
 		border-radius: 0.75rem;
-		color: var(--color-primary, #6366f1);
+		color: hsl(var(--color-primary));
 		font-size: 0.875rem;
 		font-weight: 600;
 		pointer-events: none;
@@ -272,7 +272,7 @@
 		display: flex;
 		gap: 0.75rem;
 		font-size: 0.75rem;
-		color: var(--color-muted-foreground, rgba(255, 255, 255, 0.4));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	/* ── Upload Button ─────────────────────────────── */
@@ -283,17 +283,17 @@
 		gap: 0.5rem;
 		padding: 0.625rem;
 		border-radius: 0.5rem;
-		border: 2px dashed var(--color-border, rgba(255, 255, 255, 0.15));
+		border: 2px dashed hsl(var(--color-border));
 		background: transparent;
-		color: var(--color-muted-foreground, rgba(255, 255, 255, 0.5));
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.8125rem;
 		font-weight: 500;
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.upload-btn:hover {
-		border-color: var(--color-primary, #6366f1);
-		color: var(--color-primary, #6366f1);
+		border-color: hsl(var(--color-primary));
+		color: hsl(var(--color-primary));
 		background: rgba(99, 102, 241, 0.05);
 	}
 
@@ -315,7 +315,7 @@
 		aspect-ratio: 1;
 		border-radius: 0.375rem;
 		overflow: hidden;
-		background: var(--color-surface, rgba(255, 255, 255, 0.04));
+		background: hsl(var(--color-muted));
 	}
 	.upload-thumb img {
 		width: 100%;
@@ -327,7 +327,7 @@
 		outline-offset: -2px;
 	}
 	.upload-thumb.error {
-		outline: 2px solid var(--color-destructive, #ef4444);
+		outline: 2px solid hsl(var(--color-error));
 		outline-offset: -2px;
 	}
 
@@ -370,7 +370,7 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: var(--color-muted-foreground, rgba(255, 255, 255, 0.4));
+		color: hsl(var(--color-muted-foreground));
 		margin-bottom: 0.5rem;
 	}
 
@@ -385,7 +385,7 @@
 		cursor: pointer;
 	}
 	.album-row:hover {
-		background: var(--color-surface, rgba(255, 255, 255, 0.05));
+		background: hsl(var(--color-muted));
 	}
 
 	.album-icon {
@@ -395,8 +395,8 @@
 		width: 1.75rem;
 		height: 1.75rem;
 		border-radius: 0.375rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.06));
-		color: var(--color-muted-foreground);
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-muted-foreground));
 		flex-shrink: 0;
 	}
 
@@ -408,7 +408,7 @@
 	.album-name {
 		font-size: 0.8125rem;
 		font-weight: 500;
-		color: var(--color-foreground, rgba(255, 255, 255, 0.8));
+		color: hsl(var(--color-foreground));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -416,7 +416,7 @@
 
 	.album-desc {
 		font-size: 0.6875rem;
-		color: var(--color-muted-foreground, rgba(255, 255, 255, 0.3));
+		color: hsl(var(--color-muted-foreground));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -424,7 +424,7 @@
 
 	.album-badge {
 		font-size: 0.625rem;
-		color: var(--color-muted-foreground, rgba(255, 255, 255, 0.3));
+		color: hsl(var(--color-muted-foreground));
 		flex-shrink: 0;
 	}
 
@@ -432,7 +432,7 @@
 		padding: 2rem 0;
 		text-align: center;
 		font-size: 0.8125rem;
-		color: var(--color-muted-foreground, rgba(255, 255, 255, 0.3));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	@keyframes spin {
diff --git a/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumCard.svelte b/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumCard.svelte
index a48c8e930..e7e97c44e 100644
--- a/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumCard.svelte
+++ b/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumCard.svelte
@@ -33,7 +33,7 @@
 		aspect-ratio: 4/3;
 		overflow: hidden;
 		border-radius: 0.75rem;
-		background-color: var(--color-muted, #f1f5f9);
+		background-color: hsl(var(--color-muted));
 		cursor: pointer;
 		border: none;
 		padding: 0;
@@ -60,12 +60,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: var(--color-muted-foreground, #64748b);
-		background: linear-gradient(
-			135deg,
-			var(--color-muted, #f1f5f9) 0%,
-			var(--color-accent, #e2e8f0) 100%
-		);
+		color: hsl(var(--color-muted-foreground));
+		background: linear-gradient(135deg, hsl(var(--color-muted)) 0%, hsl(var(--color-accent)) 100%);
 	}
 
 	.album-overlay {
diff --git a/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumGrid.svelte b/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumGrid.svelte
index 100224744..6a03e2a82 100644
--- a/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumGrid.svelte
+++ b/apps/mana/apps/web/src/lib/modules/photos/components/albums/AlbumGrid.svelte
@@ -39,8 +39,8 @@
 	.spinner {
 		width: 32px;
 		height: 32px;
-		border: 3px solid var(--color-border, #e2e8f0);
-		border-top-color: var(--color-primary, #6366f1);
+		border: 3px solid hsl(var(--color-border));
+		border-top-color: hsl(var(--color-primary));
 		border-radius: 50%;
 		animation: spin 1s linear infinite;
 	}
diff --git a/apps/mana/apps/web/src/lib/modules/photos/components/gallery/PhotoGrid.svelte b/apps/mana/apps/web/src/lib/modules/photos/components/gallery/PhotoGrid.svelte
index 7d5d3d263..8555b3d23 100644
--- a/apps/mana/apps/web/src/lib/modules/photos/components/gallery/PhotoGrid.svelte
+++ b/apps/mana/apps/web/src/lib/modules/photos/components/gallery/PhotoGrid.svelte
@@ -87,8 +87,8 @@
 	.spinner {
 		width: 32px;
 		height: 32px;
-		border: 3px solid var(--color-border, #e2e8f0);
-		border-top-color: var(--color-primary, #6366f1);
+		border: 3px solid hsl(var(--color-border));
+		border-top-color: hsl(var(--color-primary));
 		border-radius: 50%;
 		animation: spin 1s linear infinite;
 	}
diff --git a/apps/mana/apps/web/src/lib/modules/places/ListView.svelte b/apps/mana/apps/web/src/lib/modules/places/ListView.svelte
index 6c2406bb5..a251d7a9b 100644
--- a/apps/mana/apps/web/src/lib/modules/places/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/places/ListView.svelte
@@ -273,8 +273,8 @@
 		gap: 0.25rem;
 		padding: 0.5rem;
 		border-radius: 0.75rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.04));
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 	}
 
 	.tracking-row {
@@ -289,9 +289,9 @@
 		gap: 0.375rem;
 		padding: 0.375rem 0.75rem;
 		border-radius: 9999px;
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-size: 0.75rem;
 		font-weight: 500;
 		cursor: pointer;
@@ -323,7 +323,7 @@
 
 	.tracking-coords {
 		font-size: 0.6875rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-variant-numeric: tabular-nums;
 	}
 
@@ -341,9 +341,9 @@
 		flex: 1;
 		padding: 0.375rem 0.625rem;
 		border-radius: 0.5rem;
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-size: 0.8125rem;
 		outline: none;
 	}
@@ -353,7 +353,7 @@
 	}
 
 	.search-input::placeholder {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	/* ── Quick Create ─────────────────────────── */
@@ -366,9 +366,9 @@
 		flex: 1;
 		padding: 0.375rem 0.625rem;
 		border-radius: 0.5rem;
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-size: 0.8125rem;
 		outline: none;
 	}
@@ -378,15 +378,15 @@
 	}
 
 	.create-input::placeholder {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.create-btn {
 		padding: 0.375rem 0.5rem;
 		border-radius: 0.5rem;
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		cursor: pointer;
 		display: flex;
 		align-items: center;
@@ -419,7 +419,7 @@
 		border-radius: 0.5rem;
 		border: none;
 		background: transparent;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		cursor: pointer;
 		text-align: left;
 		transition: background 0.15s;
@@ -427,7 +427,7 @@
 	}
 
 	.place-item:hover {
-		background: var(--color-surface, rgba(255, 255, 255, 0.04));
+		background: hsl(var(--color-muted));
 	}
 
 	.place-icon {
@@ -465,7 +465,7 @@
 		align-items: center;
 		gap: 0.375rem;
 		font-size: 0.6875rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.category-badge {
@@ -500,14 +500,14 @@
 	.visit-count {
 		font-size: 0.6875rem;
 		font-weight: 600;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-variant-numeric: tabular-nums;
 	}
 
 	/* ── Empty ────────────────────────────────── */
 	.empty {
 		text-align: center;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.8125rem;
 		padding: 2rem 0;
 	}
diff --git a/apps/mana/apps/web/src/lib/modules/todo/components/pages/PageEditBar.svelte b/apps/mana/apps/web/src/lib/modules/todo/components/pages/PageEditBar.svelte
index 3fd399113..10789b435 100644
--- a/apps/mana/apps/web/src/lib/modules/todo/components/pages/PageEditBar.svelte
+++ b/apps/mana/apps/web/src/lib/modules/todo/components/pages/PageEditBar.svelte
@@ -194,7 +194,7 @@
 		color: hsl(var(--color-foreground));
 	}
 	.icon-btn.active {
-		background: var(--color-primary, #8b5cf6);
+		background: hsl(var(--color-primary));
 		color: hsl(var(--color-primary-foreground));
 	}
 	.filter-toggle {
@@ -261,8 +261,8 @@
 		color: hsl(var(--color-foreground));
 	}
 	.filter-pill.active {
-		background: var(--pill-color, var(--color-primary, #8b5cf6));
-		border-color: var(--pill-color, var(--color-primary, #8b5cf6));
+		background: var(--pill-color, hsl(var(--color-primary)));
+		border-color: var(--pill-color, hsl(var(--color-primary)));
 		color: hsl(var(--color-primary-foreground));
 	}
 	.completed-toggle {
@@ -276,7 +276,7 @@
 	.completed-toggle input {
 		width: 14px;
 		height: 14px;
-		accent-color: var(--color-primary, #8b5cf6);
+		accent-color: hsl(var(--color-primary));
 		cursor: pointer;
 	}
 	.actions-row {
diff --git a/apps/mana/apps/web/src/lib/modules/todo/components/pages/PagePicker.svelte b/apps/mana/apps/web/src/lib/modules/todo/components/pages/PagePicker.svelte
index 138bf2dbb..e0e75686a 100644
--- a/apps/mana/apps/web/src/lib/modules/todo/components/pages/PagePicker.svelte
+++ b/apps/mana/apps/web/src/lib/modules/todo/components/pages/PagePicker.svelte
@@ -111,7 +111,7 @@
 		margin-top: 0.25rem;
 	}
 	:global(.picker .custom-icon) {
-		color: var(--color-primary, #8b5cf6);
-		background: color-mix(in srgb, var(--color-primary, #8b5cf6) 10%, transparent);
+		color: hsl(var(--color-primary));
+		background: hsl(var(--color-primary) / 0.1);
 	}
 </style>
diff --git a/apps/mana/apps/web/src/routes/(app)/habits/+page.svelte b/apps/mana/apps/web/src/routes/(app)/habits/+page.svelte
index 1cdadaa43..a297d49ac 100644
--- a/apps/mana/apps/web/src/routes/(app)/habits/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/habits/+page.svelte
@@ -87,7 +87,7 @@
 	.habits-title {
 		font-size: 1.5rem;
 		font-weight: 700;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 	}
 
 	.habits-stats {
@@ -95,7 +95,7 @@
 		gap: 1rem;
 		margin-top: 0.25rem;
 		font-size: 0.875rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.board-section {
@@ -111,11 +111,11 @@
 	.section-title {
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 	}
 
 	.loading {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		text-align: center;
 		padding: 3rem 0;
 	}
diff --git a/apps/mana/apps/web/src/routes/(app)/habits/[id]/+page.svelte b/apps/mana/apps/web/src/routes/(app)/habits/[id]/+page.svelte
index df4bea81d..a834af9b3 100644
--- a/apps/mana/apps/web/src/routes/(app)/habits/[id]/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/habits/[id]/+page.svelte
@@ -55,21 +55,21 @@
 	.not-found {
 		text-align: center;
 		padding: 3rem 0;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.not-found button {
 		margin-top: 1rem;
 		padding: 0.5rem 1rem;
 		border-radius: 0.5rem;
-		background: var(--color-primary, #6366f1);
+		background: hsl(var(--color-primary));
 		color: white;
 		border: none;
 		cursor: pointer;
 	}
 
 	.loading {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		text-align: center;
 		padding: 3rem 0;
 	}
diff --git a/apps/mana/apps/web/src/routes/(app)/notes/+page.svelte b/apps/mana/apps/web/src/routes/(app)/notes/+page.svelte
index 390e9c9f8..ab248f2a8 100644
--- a/apps/mana/apps/web/src/routes/(app)/notes/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/notes/+page.svelte
@@ -94,7 +94,7 @@
 							type="button"
 							class="color-dot"
 							class:selected={newColor === c}
-							style:background={c ?? 'var(--color-muted-foreground)'}
+							style:background={c ?? 'hsl(var(--color-muted-foreground))'}
 							style:opacity={c ? 1 : 0.4}
 							onclick={() => (newColor = c)}
 						></button>
@@ -181,11 +181,11 @@
 	.notes-title {
 		font-size: 1.5rem;
 		font-weight: 700;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 	}
 	.notes-stats {
 		font-size: 0.875rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		margin-top: 0.25rem;
 	}
 
@@ -196,25 +196,25 @@
 
 	.search-input {
 		flex: 1;
-		background: var(--color-surface, rgba(255, 255, 255, 0.04));
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.5rem;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-size: 0.875rem;
 		padding: 0.5rem 0.75rem;
 		outline: none;
 	}
 	.search-input:focus {
-		border-color: var(--color-primary, #6366f1);
+		border-color: hsl(var(--color-primary));
 	}
 	.search-input::placeholder {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.add-btn {
 		padding: 0.5rem 1rem;
 		border-radius: 0.5rem;
-		background: var(--color-primary, #6366f1);
+		background: hsl(var(--color-primary));
 		color: white;
 		border: none;
 		font-size: 0.875rem;
@@ -233,27 +233,27 @@
 		gap: 0.5rem;
 		padding: 1rem;
 		border-radius: 0.75rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.06));
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 	}
 
 	.create-title {
 		background: transparent;
 		border: none;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-size: 1rem;
 		font-weight: 600;
 		padding: 0.25rem 0;
 		outline: none;
 	}
 	.create-title::placeholder {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.create-content {
 		background: transparent;
 		border: none;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-size: 0.875rem;
 		padding: 0.25rem 0;
 		outline: none;
@@ -262,7 +262,7 @@
 		font-family: inherit;
 	}
 	.create-content::placeholder {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.create-footer {
@@ -288,7 +288,7 @@
 	}
 	.color-dot.selected {
 		border-color: white;
-		box-shadow: 0 0 0 1px var(--color-primary, #6366f1);
+		box-shadow: 0 0 0 1px hsl(var(--color-primary));
 	}
 
 	.create-actions {
@@ -306,13 +306,13 @@
 	}
 	.btn-cancel {
 		background: transparent;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 	.btn-cancel:hover {
-		background: var(--color-muted, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
 	}
 	.btn-save {
-		background: var(--color-primary, #6366f1);
+		background: hsl(var(--color-primary));
 		color: white;
 	}
 	.btn-save:hover {
@@ -329,7 +329,7 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.notes-grid {
@@ -344,8 +344,8 @@
 		gap: 0.375rem;
 		padding: 0.75rem;
 		border-radius: 0.75rem;
-		background: var(--color-surface, rgba(255, 255, 255, 0.04));
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 		border-top: 3px solid transparent;
 		text-decoration: none;
 		transition:
@@ -354,14 +354,14 @@
 		min-height: 6rem;
 	}
 	.note-card:hover {
-		background: var(--color-muted, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
 		transform: translateY(-1px);
 	}
 
 	.card-title {
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -369,7 +369,7 @@
 
 	.card-preview {
 		font-size: 0.8125rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		display: -webkit-box;
 		-webkit-line-clamp: 3;
 		-webkit-box-orient: vertical;
@@ -379,14 +379,14 @@
 
 	.card-meta {
 		font-size: 0.6875rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		opacity: 0.7;
 		margin-top: auto;
 	}
 
 	.empty {
 		text-align: center;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.875rem;
 		padding: 3rem 0;
 		display: flex;
@@ -396,7 +396,7 @@
 	}
 
 	.loading {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		text-align: center;
 		padding: 3rem 0;
 	}
diff --git a/apps/mana/apps/web/src/routes/(app)/notes/[id]/+page.svelte b/apps/mana/apps/web/src/routes/(app)/notes/[id]/+page.svelte
index 4d201099b..58f44a2d8 100644
--- a/apps/mana/apps/web/src/routes/(app)/notes/[id]/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/notes/[id]/+page.svelte
@@ -131,7 +131,7 @@
 						type="button"
 						class="color-dot"
 						class:selected={note.color === c}
-						style:background={c ?? 'var(--color-muted-foreground)'}
+						style:background={c ?? 'hsl(var(--color-muted-foreground))'}
 						style:opacity={c ? 1 : 0.4}
 						onclick={() => handleColorChange(c)}
 					></button>
@@ -178,18 +178,18 @@
 		height: 2rem;
 		border-radius: 0.5rem;
 		background: transparent;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		border: none;
 		cursor: pointer;
 	}
 	.back-btn:hover {
-		background: var(--color-muted, rgba(255, 255, 255, 0.08));
+		background: hsl(var(--color-muted));
 	}
 
 	.header-meta {
 		flex: 1;
 		font-size: 0.8125rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.header-actions {
@@ -219,20 +219,20 @@
 	.detail-title {
 		background: transparent;
 		border: none;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-size: 1.5rem;
 		font-weight: 700;
 		padding: 0;
 		outline: none;
 	}
 	.detail-title::placeholder {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.detail-content {
 		background: transparent;
 		border: none;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-size: 0.9375rem;
 		line-height: 1.6;
 		padding: 0;
@@ -243,7 +243,7 @@
 		flex: 1;
 	}
 	.detail-content::placeholder {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.detail-footer {
@@ -251,7 +251,7 @@
 		justify-content: space-between;
 		align-items: center;
 		padding-top: 0.75rem;
-		border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
+		border-top: 1px solid hsl(var(--color-border));
 	}
 
 	.color-row {
@@ -272,7 +272,7 @@
 	}
 	.color-dot.selected {
 		border-color: white;
-		box-shadow: 0 0 0 1px var(--color-primary, #6366f1);
+		box-shadow: 0 0 0 1px hsl(var(--color-primary));
 	}
 
 	.danger-actions {
@@ -285,7 +285,7 @@
 		font-size: 0.8125rem;
 		font-weight: 500;
 		background: transparent;
-		color: var(--color-destructive, #ef4444);
+		color: hsl(var(--color-error));
 		border: 1px solid rgba(239, 68, 68, 0.2);
 		cursor: pointer;
 	}
@@ -300,13 +300,13 @@
 	.loading {
 		text-align: center;
 		padding: 3rem 0;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 	.not-found button {
 		margin-top: 1rem;
 		padding: 0.5rem 1rem;
 		border-radius: 0.5rem;
-		background: var(--color-primary, #6366f1);
+		background: hsl(var(--color-primary));
 		color: white;
 		border: none;
 		cursor: pointer;
diff --git a/apps/mana/apps/web/src/routes/(app)/photos/+page.svelte b/apps/mana/apps/web/src/routes/(app)/photos/+page.svelte
index ac9dbd6f6..cbba8eca2 100644
--- a/apps/mana/apps/web/src/routes/(app)/photos/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/photos/+page.svelte
@@ -110,8 +110,8 @@
 
 	.error-message {
 		padding: 1rem;
-		background-color: var(--color-destructive);
-		color: var(--color-destructive-foreground);
+		background-color: hsl(var(--color-error));
+		color: white;
 		border-radius: var(--radius-md);
 		margin-bottom: 1rem;
 	}
diff --git a/apps/mana/apps/web/src/routes/(app)/photos/upload/+page.svelte b/apps/mana/apps/web/src/routes/(app)/photos/upload/+page.svelte
index b73b15491..01207c5aa 100644
--- a/apps/mana/apps/web/src/routes/(app)/photos/upload/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/photos/upload/+page.svelte
@@ -194,15 +194,15 @@
 		aspect-ratio: 1;
 		border-radius: var(--radius-md);
 		overflow: hidden;
-		background: var(--color-muted);
+		background: hsl(var(--color-muted));
 	}
 
 	.file-item.success {
-		outline: 2px solid var(--color-success, #22c55e);
+		outline: 2px solid hsl(var(--color-success));
 	}
 
 	.file-item.error {
-		outline: 2px solid var(--color-destructive);
+		outline: 2px solid hsl(var(--color-error));
 	}
 
 	.file-preview {
@@ -236,7 +236,7 @@
 		padding: 0.5rem;
 		border-radius: 50%;
 		background: rgba(255, 255, 255, 0.9);
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		border: none;
 		cursor: pointer;
 	}
@@ -271,11 +271,11 @@
 	}
 
 	.status-icon.success {
-		background: var(--color-success, #22c55e);
+		background: hsl(var(--color-success));
 	}
 
 	.status-icon.error {
-		background: var(--color-destructive);
+		background: hsl(var(--color-error));
 	}
 
 	.file-name {