diff --git a/apps/mana/apps/web/src/lib/modules/calendar/views/DetailView.svelte b/apps/mana/apps/web/src/lib/modules/calendar/views/DetailView.svelte
index f19b95aa5..4ac39fd76 100644
--- a/apps/mana/apps/web/src/lib/modules/calendar/views/DetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/calendar/views/DetailView.svelte
@@ -225,7 +225,7 @@
 	.prop-icon {
 		display: flex;
 		align-items: center;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		flex-shrink: 0;
 		width: 1rem;
 	}
@@ -241,7 +241,7 @@
 		gap: 0.25rem;
 	}
 	.time-sep {
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.75rem;
 	}
 	.allday-label {
@@ -249,7 +249,7 @@
 		align-items: center;
 		gap: 0.375rem;
 		font-size: 0.75rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 	}
 	:global(.detail-view .prop-input.wide) {
@@ -272,7 +272,7 @@
 		background: color-mix(in srgb, var(--tag-color) 12%, transparent);
 		border: none;
 		font-size: 0.6875rem;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: opacity 0.15s;
 	}
@@ -284,11 +284,8 @@
 		height: 6px;
 		border-radius: 9999px;
 	}
-	:global(.dark) .tag-pill {
-		color: #9ca3af;
-	}
 	.recurrence {
 		font-size: 0.75rem;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/modules/contacts/components/pages/ContactPage.svelte b/apps/mana/apps/web/src/lib/modules/contacts/components/pages/ContactPage.svelte
index c5d74f5b2..21fa4d7a2 100644
--- a/apps/mana/apps/web/src/lib/modules/contacts/components/pages/ContactPage.svelte
+++ b/apps/mana/apps/web/src/lib/modules/contacts/components/pages/ContactPage.svelte
@@ -371,16 +371,11 @@
 	.contact-count {
 		font-size: 0.75rem;
 		font-weight: 500;
-		color: #9ca3af;
-		background: rgba(0, 0, 0, 0.05);
+		color: hsl(var(--color-muted-foreground));
+		background: hsl(var(--color-surface-hover));
 		padding: 0.125rem 0.5rem;
 		border-radius: 9999px;
 	}
-	:global(.dark) .contact-count {
-		background: rgba(255, 255, 255, 0.1);
-		color: #6b7280;
-	}
-
 	.page-content {
 		padding: 0.5rem 0.75rem;
 	}
@@ -392,7 +387,7 @@
 		justify-content: center;
 		gap: 0.5rem;
 		min-height: 200px;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.8125rem;
 	}
 
@@ -404,17 +399,13 @@
 		font-weight: 700;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		padding: 0.25rem 0.5rem;
 		position: sticky;
 		top: 0;
-		background: #fffef5;
+		background: hsl(var(--color-card));
 		z-index: 1;
 	}
-	:global(.dark) .letter-header {
-		background: #252220;
-	}
-
 	.contact-row {
 		display: flex;
 		align-items: center;
@@ -425,12 +416,8 @@
 		transition: background 0.15s;
 	}
 	.contact-row:hover {
-		background: rgba(0, 0, 0, 0.03);
+		background: hsl(var(--color-surface-hover));
 	}
-	:global(.dark) .contact-row:hover {
-		background: rgba(255, 255, 255, 0.04);
-	}
-
 	.avatar {
 		width: 2rem;
 		height: 2rem;
@@ -463,21 +450,18 @@
 	.contact-name {
 		font-size: 0.8125rem;
 		font-weight: 500;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-	:global(.dark) .contact-name {
-		color: #f3f4f6;
-	}
 	:global(.favorite-star) {
-		color: #f59e0b;
+		color: hsl(var(--color-warning));
 		flex-shrink: 0;
 	}
 	.contact-subtitle {
 		font-size: 0.6875rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -531,10 +515,7 @@
 		transition: background 0.15s;
 	}
 	.profile-card:hover {
-		background: rgba(0, 0, 0, 0.02);
-	}
-	:global(.dark) .profile-card:hover {
-		background: rgba(255, 255, 255, 0.03);
+		background: hsl(var(--color-surface-hover));
 	}
 	.profile-avatar {
 		width: 4.5rem;
@@ -558,26 +539,20 @@
 	.profile-name {
 		font-size: 1.125rem;
 		font-weight: 700;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		margin-bottom: 0.75rem;
 	}
-	:global(.dark) .profile-name {
-		color: #f3f4f6;
-	}
 	.profile-detail {
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
 		font-size: 0.8125rem;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		padding: 0.25rem 0;
 	}
-	:global(.dark) .profile-detail {
-		color: #9ca3af;
-	}
 	.profile-hint {
 		margin-top: 1rem;
 		font-size: 0.6875rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/modules/contacts/views/DetailView.svelte b/apps/mana/apps/web/src/lib/modules/contacts/views/DetailView.svelte
index 478d0fba5..a50d0a440 100644
--- a/apps/mana/apps/web/src/lib/modules/contacts/views/DetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/contacts/views/DetailView.svelte
@@ -307,8 +307,8 @@
 		width: 56px;
 		height: 56px;
 		border-radius: 9999px;
-		background: rgba(0, 0, 0, 0.06);
-		color: #6b7280;
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-muted-foreground));
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -316,10 +316,6 @@
 		font-weight: 600;
 		flex-shrink: 0;
 	}
-	:global(.dark) .avatar-large {
-		background: rgba(255, 255, 255, 0.08);
-		color: #9ca3af;
-	}
 	.name-fields {
 		flex: 1;
 		display: flex;
@@ -333,23 +329,15 @@
 		border: 1px solid transparent;
 		background: transparent;
 		outline: none;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		padding: 0.125rem 0.25rem;
 		border-radius: 0.25rem;
 		transition: border-color 0.15s;
 	}
 	.name-input:hover,
 	.name-input:focus {
-		border-color: rgba(0, 0, 0, 0.1);
+		border-color: hsl(var(--color-border));
 	}
-	:global(.dark) .name-input {
-		color: #f3f4f6;
-	}
-	:global(.dark) .name-input:hover,
-	:global(.dark) .name-input:focus {
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
 	.fields {
 		display: flex;
 		flex-direction: column;
@@ -362,7 +350,7 @@
 	}
 	.field-icon {
 		flex-shrink: 0;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		display: flex;
 		align-items: center;
 		padding-top: 0.375rem;
@@ -376,20 +364,13 @@
 		border-radius: 0.25rem;
 		border: 1px solid transparent;
 		background: transparent;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		outline: none;
 		transition: border-color 0.15s;
 	}
 	.field-input:hover,
 	.field-input:focus {
-		border-color: rgba(0, 0, 0, 0.1);
-	}
-	:global(.dark) .field-input {
-		color: #e5e7eb;
-	}
-	:global(.dark) .field-input:hover,
-	:global(.dark) .field-input:focus {
-		border-color: rgba(255, 255, 255, 0.1);
+		border-color: hsl(var(--color-border));
 	}
 	.field-input.small {
 		max-width: 5rem;
@@ -419,7 +400,7 @@
 		background: color-mix(in srgb, var(--tag-color) 12%, transparent);
 		border: none;
 		font-size: 0.6875rem;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 	}
 	.tag-pill:hover {
@@ -430,7 +411,4 @@
 		height: 6px;
 		border-radius: 9999px;
 	}
-	:global(.dark) .tag-pill {
-		color: #9ca3af;
-	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/modules/cycles/components/CycleCalendar.svelte b/apps/mana/apps/web/src/lib/modules/cycles/components/CycleCalendar.svelte
index e38ee82af..51c8c78bd 100644
--- a/apps/mana/apps/web/src/lib/modules/cycles/components/CycleCalendar.svelte
+++ b/apps/mana/apps/web/src/lib/modules/cycles/components/CycleCalendar.svelte
@@ -193,7 +193,7 @@
 		text-align: center;
 		font-size: 0.8125rem;
 		font-weight: 600;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		background: transparent;
 		border: none;
 		padding: 0.25rem;
@@ -204,19 +204,16 @@
 	.cal-title:hover {
 		background: rgba(236, 72, 153, 0.08);
 	}
-	:global(.dark) .cal-title {
-		color: #f3f4f6;
-	}
 	.cal-nav {
 		width: 1.75rem;
 		height: 1.75rem;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		border: 1px solid rgba(0, 0, 0, 0.08);
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.375rem;
 		background: transparent;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		font-size: 1rem;
 		line-height: 1;
 		cursor: pointer;
@@ -226,10 +223,6 @@
 		color: #ec4899;
 		border-color: #ec4899;
 	}
-	:global(.dark) .cal-nav {
-		border-color: rgba(255, 255, 255, 0.08);
-	}
-
 	.cal-weekdays {
 		display: grid;
 		grid-template-columns: repeat(7, 1fr);
@@ -240,13 +233,9 @@
 		font-size: 0.5625rem;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: #c0bfba;
+		color: hsl(var(--color-muted-foreground));
 		font-weight: 600;
 	}
-	:global(.dark) .cal-weekday {
-		color: #6b7280;
-	}
-
 	.cal-grid {
 		display: grid;
 		grid-template-columns: repeat(7, 1fr);
@@ -262,7 +251,7 @@
 		border: 1px solid transparent;
 		border-radius: 0.375rem;
 		background: color-mix(in srgb, var(--phase-color) 10%, transparent);
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		font-size: 0.6875rem;
 		cursor: pointer;
 		transition: all 0.15s;
@@ -272,9 +261,6 @@
 	.cal-day:hover {
 		background: color-mix(in srgb, var(--phase-color) 24%, transparent);
 	}
-	:global(.dark) .cal-day {
-		color: #e5e7eb;
-	}
 	.cal-day.out {
 		opacity: 0.35;
 	}
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 eeb25c6b0..f7364e745 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
@@ -155,53 +155,38 @@
 		gap: 0.375rem;
 		align-items: center;
 		padding-bottom: 0.75rem;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+		border-bottom: 1px solid hsl(var(--color-border));
 	}
-	:global(.dark) .sm-create {
-		border-bottom-color: rgba(255, 255, 255, 0.08);
-	}
-
 	.sm-input {
 		flex: 1;
 		min-width: 0;
 		padding: 0.375rem 0.5rem;
 		border-radius: 0.375rem;
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
 		font-size: 0.75rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		outline: none;
 		font-family: inherit;
 	}
 	.sm-input:focus {
 		border-color: #ec4899;
 	}
-	:global(.dark) .sm-input {
-		border-color: rgba(255, 255, 255, 0.1);
-		color: #f3f4f6;
-	}
-
 	.sm-select {
 		padding: 0.375rem 0.5rem;
 		border-radius: 0.375rem;
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
 		font-size: 0.6875rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		outline: none;
 		font-family: inherit;
 	}
-	:global(.dark) .sm-select {
-		border-color: rgba(255, 255, 255, 0.1);
-		color: #f3f4f6;
-		color-scheme: dark;
-	}
-
 	.sm-add {
 		padding: 0.375rem 0.75rem;
 		border-radius: 0.375rem;
 		background: #ec4899;
-		color: white;
+		color: hsl(var(--color-primary-foreground));
 		border: none;
 		font-size: 0.6875rem;
 		font-weight: 500;
@@ -231,10 +216,7 @@
 		align-items: center;
 		gap: 0.625rem;
 		padding: 0.5rem 0.25rem;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.04);
-	}
-	:global(.dark) .sm-row {
-		border-bottom-color: rgba(255, 255, 255, 0.04);
+		border-bottom: 1px solid hsl(var(--color-border));
 	}
 	.sm-row.editing {
 		background: rgba(236, 72, 153, 0.06);
@@ -257,15 +239,12 @@
 	}
 	.sm-name {
 		font-size: 0.8125rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		font-weight: 500;
 	}
-	:global(.dark) .sm-name {
-		color: #e5e7eb;
-	}
 	.sm-cat {
 		font-size: 0.625rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		margin-top: 0.125rem;
 	}
 
@@ -279,26 +258,19 @@
 		padding: 0.25rem 0.5rem;
 		border-radius: 0.25rem;
 		font-size: 0.625rem;
-		border: 1px solid rgba(0, 0, 0, 0.08);
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.sm-btn:hover {
-		color: #374151;
-		background: rgba(0, 0, 0, 0.04);
-	}
-	:global(.dark) .sm-btn {
-		border-color: rgba(255, 255, 255, 0.08);
-	}
-	:global(.dark) .sm-btn:hover {
-		color: #e5e7eb;
-		background: rgba(255, 255, 255, 0.05);
+		color: hsl(var(--color-foreground));
+		background: hsl(var(--color-surface-hover));
 	}
 	.sm-btn.primary {
 		background: #ec4899;
-		color: white;
+		color: hsl(var(--color-primary-foreground));
 		border-color: #ec4899;
 	}
 	.sm-btn.primary:hover {
@@ -306,15 +278,15 @@
 		background: #ec4899;
 	}
 	.sm-btn.danger:hover {
-		color: #ef4444;
-		background: rgba(239, 68, 68, 0.08);
-		border-color: rgba(239, 68, 68, 0.3);
+		color: hsl(var(--color-error));
+		background: hsl(var(--color-error) / 0.08);
+		border-color: hsl(var(--color-error) / 0.3);
 	}
 
 	.sm-empty {
 		padding: 2rem 0;
 		text-align: center;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.8125rem;
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolDetailView.svelte b/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolDetailView.svelte
index db9095439..9f23b99f2 100644
--- a/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolDetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolDetailView.svelte
@@ -304,7 +304,7 @@
 	.back-btn {
 		background: transparent;
 		border: none;
-		color: #6366f1;
+		color: hsl(var(--color-primary));
 		font-size: 0.75rem;
 		cursor: pointer;
 		padding: 0.25rem 0;
@@ -315,7 +315,7 @@
 
 	.saved-hint {
 		font-size: 0.625rem;
-		color: #22c55e;
+		color: hsl(var(--color-success));
 		font-weight: 500;
 		animation: fade-in 0.2s ease-out;
 	}
@@ -332,33 +332,28 @@
 
 	.meta-btn {
 		background: transparent;
-		border: 1px solid rgba(0, 0, 0, 0.08);
-		color: #6b7280;
+		border: 1px solid hsl(var(--color-border));
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.6875rem;
 		padding: 0.25rem 0.625rem;
 		border-radius: 0.25rem;
 		cursor: pointer;
 	}
 	.meta-btn:hover {
-		border-color: #6366f1;
-		color: #6366f1;
+		border-color: hsl(var(--color-primary));
+		color: hsl(var(--color-primary));
 	}
-	:global(.dark) .meta-btn {
-		border-color: rgba(255, 255, 255, 0.08);
-		color: #9ca3af;
-	}
-
 	.del-btn {
 		background: transparent;
-		border: 1px solid rgba(239, 68, 68, 0.3);
-		color: #ef4444;
+		border: 1px solid hsl(var(--color-error) / 0.3);
+		color: hsl(var(--color-error));
 		font-size: 0.6875rem;
 		padding: 0.25rem 0.625rem;
 		border-radius: 0.25rem;
 		cursor: pointer;
 	}
 	.del-btn:hover {
-		background: rgba(239, 68, 68, 0.08);
+		background: hsl(var(--color-error) / 0.08);
 	}
 
 	/* Merge panel */
@@ -369,39 +364,34 @@
 		flex-wrap: wrap;
 		padding: 0.5rem 0.625rem;
 		border-radius: 0.375rem;
-		background: rgba(99, 102, 241, 0.05);
-		border: 1px solid rgba(99, 102, 241, 0.2);
+		background: hsl(var(--color-primary) / 0.05);
+		border: 1px solid hsl(var(--color-primary) / 0.3);
 	}
 	.merge-label {
 		font-size: 0.6875rem;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 	}
 	.merge-select {
 		background: transparent;
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.25rem;
 		padding: 0.1875rem 0.375rem;
 		font-size: 0.6875rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		outline: none;
 		font-family: inherit;
 	}
-	:global(.dark) .merge-select {
-		border-color: rgba(255, 255, 255, 0.12);
-		color: #f3f4f6;
-		color-scheme: dark;
-	}
 	.merge-confirm {
 		padding: 0.1875rem 0.625rem;
 		border-radius: 0.25rem;
 		border: none;
-		background: #6366f1;
-		color: white;
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
 		font-size: 0.6875rem;
 		cursor: pointer;
 	}
 	.merge-confirm:disabled {
-		background: rgba(99, 102, 241, 0.3);
+		background: hsl(var(--color-primary) / 0.3);
 		cursor: not-allowed;
 	}
 	.merge-cancel {
@@ -409,12 +399,12 @@
 		border-radius: 0.25rem;
 		border: none;
 		background: transparent;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.6875rem;
 		cursor: pointer;
 	}
 	.merge-cancel:hover {
-		color: #374151;
+		color: hsl(var(--color-foreground));
 	}
 
 	.sym-header {
@@ -435,15 +425,11 @@
 
 	.count-badge {
 		font-size: 0.625rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		padding: 0.125rem 0.5rem;
 		border-radius: 9999px;
-		background: rgba(0, 0, 0, 0.04);
+		background: hsl(var(--color-surface-hover));
 	}
-	:global(.dark) .count-badge {
-		background: rgba(255, 255, 255, 0.06);
-	}
-
 	.palette {
 		display: flex;
 		gap: 0.375rem;
@@ -458,13 +444,9 @@
 		padding: 0;
 	}
 	.palette-swatch.active {
-		border-color: #374151;
+		border-color: hsl(var(--color-foreground));
 		transform: scale(1.1);
 	}
-	:global(.dark) .palette-swatch.active {
-		border-color: #f3f4f6;
-	}
-
 	.section {
 		display: flex;
 		flex-direction: column;
@@ -475,33 +457,24 @@
 		font-size: 0.5625rem;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: #c0bfba;
+		color: hsl(var(--color-muted-foreground));
 		font-weight: 600;
 	}
-	:global(.dark) .section-label {
-		color: #4b5563;
-	}
-
 	.meaning-input {
 		background: transparent;
-		border: 1px solid rgba(0, 0, 0, 0.08);
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.375rem;
 		padding: 0.5rem;
 		font-size: 0.75rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		outline: none;
 		resize: vertical;
 		font-family: inherit;
 		line-height: 1.5;
 	}
 	.meaning-input:focus {
-		border-color: #6366f1;
+		border-color: hsl(var(--color-primary));
 	}
-	:global(.dark) .meaning-input {
-		border-color: rgba(255, 255, 255, 0.08);
-		color: #f3f4f6;
-	}
-
 	/* Bars */
 	.bars {
 		display: flex;
@@ -519,14 +492,11 @@
 		font-weight: 500;
 	}
 	.bar-track {
-		background: rgba(0, 0, 0, 0.04);
+		background: hsl(var(--color-surface-hover));
 		border-radius: 9999px;
 		height: 6px;
 		overflow: hidden;
 	}
-	:global(.dark) .bar-track {
-		background: rgba(255, 255, 255, 0.06);
-	}
 	.bar-fill {
 		height: 100%;
 		border-radius: 9999px;
@@ -534,7 +504,7 @@
 	}
 	.bar-count {
 		font-size: 0.625rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		text-align: right;
 	}
 
@@ -547,8 +517,8 @@
 	.cooc-chip {
 		padding: 0.125rem 0.5rem;
 		border-radius: 9999px;
-		background: rgba(99, 102, 241, 0.08);
-		color: #6366f1;
+		background: hsl(var(--color-primary) / 0.08);
+		color: hsl(var(--color-primary));
 		font-size: 0.6875rem;
 		border: 1px solid transparent;
 		cursor: pointer;
@@ -556,8 +526,8 @@
 		transition: all 0.15s;
 	}
 	.cooc-chip:hover {
-		background: rgba(99, 102, 241, 0.18);
-		border-color: #6366f1;
+		background: hsl(var(--color-primary) / 0.18);
+		border-color: hsl(var(--color-primary));
 	}
 	.cooc-count {
 		font-size: 0.5625rem;
@@ -588,12 +558,8 @@
 		cursor: default;
 	}
 	.dream-ref:not(:disabled):hover {
-		background: rgba(0, 0, 0, 0.03);
+		background: hsl(var(--color-surface-hover));
 	}
-	:global(.dark) .dream-ref:not(:disabled):hover {
-		background: rgba(255, 255, 255, 0.04);
-	}
-
 	.ref-dot {
 		width: 6px;
 		height: 6px;
@@ -601,12 +567,8 @@
 		flex-shrink: 0;
 	}
 	.ref-dot.empty {
-		background: rgba(0, 0, 0, 0.08);
+		background: hsl(var(--color-border));
 	}
-	:global(.dark) .ref-dot.empty {
-		background: rgba(255, 255, 255, 0.08);
-	}
-
 	.ref-content {
 		display: flex;
 		justify-content: space-between;
@@ -617,29 +579,21 @@
 
 	.ref-title {
 		font-size: 0.75rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-	:global(.dark) .ref-title {
-		color: #e5e7eb;
-	}
-
 	.ref-date {
 		font-size: 0.625rem;
-		color: #c0bfba;
+		color: hsl(var(--color-muted-foreground));
 		flex-shrink: 0;
 		margin-left: 0.5rem;
 	}
-	:global(.dark) .ref-date {
-		color: #4b5563;
-	}
-
 	.empty {
 		padding: 2rem 0;
 		text-align: center;
 		font-size: 0.8125rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolsView.svelte b/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolsView.svelte
index 717f1dafa..628668094 100644
--- a/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolsView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/dreams/views/SymbolsView.svelte
@@ -164,20 +164,15 @@
 	.search-input {
 		padding: 0.3rem 0.5rem;
 		border-radius: 0.375rem;
-		border: 1px solid rgba(0, 0, 0, 0.08);
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
 		font-size: 0.75rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		outline: none;
 	}
 	.search-input:focus {
-		border-color: #6366f1;
+		border-color: hsl(var(--color-primary));
 	}
-	:global(.dark) .search-input {
-		border-color: rgba(255, 255, 255, 0.08);
-		color: #f3f4f6;
-	}
-
 	.sort-tabs {
 		display: flex;
 		gap: 0.25rem;
@@ -186,25 +181,21 @@
 	.sort-tab {
 		padding: 0.1875rem 0.5rem;
 		border-radius: 9999px;
-		border: 1px solid rgba(0, 0, 0, 0.08);
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
 		font-size: 0.625rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.sort-tab:hover {
-		color: #6366f1;
+		color: hsl(var(--color-primary));
 	}
 	.sort-tab.active {
-		background: #6366f1;
-		color: white;
-		border-color: #6366f1;
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
+		border-color: hsl(var(--color-primary));
 	}
-	:global(.dark) .sort-tab {
-		border-color: rgba(255, 255, 255, 0.08);
-	}
-
 	.cloud {
 		display: flex;
 		flex-wrap: wrap;
@@ -225,7 +216,7 @@
 		gap: 0.375rem;
 		padding: 0.25rem 0.625rem;
 		border-radius: 9999px;
-		border: 1px solid rgba(0, 0, 0, 0.06);
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
 		color: var(--sym-color);
 		cursor: pointer;
@@ -248,10 +239,6 @@
 	.sym-chip.no-meaning:hover {
 		opacity: 1;
 	}
-	:global(.dark) .sym-chip {
-		border-color: rgba(255, 255, 255, 0.08);
-	}
-
 	.sym-dot {
 		width: 6px;
 		height: 6px;
@@ -266,19 +253,15 @@
 
 	.sym-count {
 		font-size: 0.625rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		font-weight: 400;
 	}
 
 	.sym-meta {
 		font-size: 0.625rem;
-		color: #c0bfba;
+		color: hsl(var(--color-muted-foreground));
 		font-weight: 400;
 	}
-	:global(.dark) .sym-meta {
-		color: #4b5563;
-	}
-
 	.sym-badge {
 		display: inline-flex;
 		align-items: center;
@@ -286,20 +269,16 @@
 		width: 13px;
 		height: 13px;
 		border-radius: 9999px;
-		background: rgba(0, 0, 0, 0.06);
-		color: #9ca3af;
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.5625rem;
 		font-weight: 700;
 		margin-left: 0.125rem;
 	}
-	:global(.dark) .sym-badge {
-		background: rgba(255, 255, 255, 0.08);
-	}
-
 	.empty {
 		padding: 2rem 0;
 		text-align: center;
 		font-size: 0.8125rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/modules/memoro/views/DetailView.svelte b/apps/mana/apps/web/src/lib/modules/memoro/views/DetailView.svelte
index 2ebaef15f..4e9c1bae8 100644
--- a/apps/mana/apps/web/src/lib/modules/memoro/views/DetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/memoro/views/DetailView.svelte
@@ -157,31 +157,27 @@
 		background: transparent;
 		cursor: pointer;
 		padding: 0.125rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		flex-shrink: 0;
 		transition:
 			color 0.15s,
 			transform 0.15s;
 	}
 	.pin-btn:hover {
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 	}
 	.pin-btn.pinned {
-		color: #f59e0b;
+		color: hsl(var(--color-warning));
 	}
 	.transcript {
 		font-size: 0.8125rem;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		line-height: 1.5;
 		padding: 0.5rem;
 		border-radius: 0.375rem;
-		background: rgba(0, 0, 0, 0.02);
+		background: hsl(var(--color-surface-hover));
 		white-space: pre-wrap;
 		max-height: 12rem;
 		overflow-y: auto;
 	}
-	:global(.dark) .transcript {
-		background: rgba(255, 255, 255, 0.03);
-		color: #9ca3af;
-	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/modules/places/views/DetailView.svelte b/apps/mana/apps/web/src/lib/modules/places/views/DetailView.svelte
index 9647e4b30..f605750a8 100644
--- a/apps/mana/apps/web/src/lib/modules/places/views/DetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/places/views/DetailView.svelte
@@ -282,17 +282,13 @@
 		width: 48px;
 		height: 48px;
 		border-radius: 9999px;
-		background: rgba(0, 0, 0, 0.06);
-		color: #6b7280;
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-muted-foreground));
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
 	}
-	:global(.dark) .place-avatar {
-		background: rgba(255, 255, 255, 0.08);
-		color: #9ca3af;
-	}
 	.name-fields {
 		flex: 1;
 		min-width: 0;
@@ -304,32 +300,20 @@
 		border: 1px solid transparent;
 		background: transparent;
 		outline: none;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		padding: 0.125rem 0.25rem;
 		border-radius: 0.25rem;
 		transition: border-color 0.15s;
 	}
 	.name-input:hover,
 	.name-input:focus {
-		border-color: rgba(0, 0, 0, 0.1);
+		border-color: hsl(var(--color-border));
 	}
-	:global(.dark) .name-input {
-		color: #f3f4f6;
-	}
-	:global(.dark) .name-input:hover,
-	:global(.dark) .name-input:focus {
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
 	.map-container {
 		border-radius: 0.5rem;
 		overflow: hidden;
-		border: 1px solid rgba(0, 0, 0, 0.08);
+		border: 1px solid hsl(var(--color-border));
 	}
-	:global(.dark) .map-container {
-		border-color: rgba(255, 255, 255, 0.08);
-	}
-
 	.fields {
 		display: flex;
 		flex-direction: column;
@@ -343,7 +327,7 @@
 	}
 	.field-label {
 		font-size: 0.75rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		min-width: 5.5rem;
 		padding-top: 0.375rem;
 	}
@@ -356,7 +340,7 @@
 		border-radius: 0.25rem;
 		border: 1px solid transparent;
 		background: transparent;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		outline: none;
 		text-align: right;
 		transition: border-color 0.15s;
@@ -365,17 +349,7 @@
 	.field-input:focus,
 	.field-select:hover,
 	.field-select:focus {
-		border-color: rgba(0, 0, 0, 0.1);
-	}
-	:global(.dark) .field-input,
-	:global(.dark) .field-select {
-		color: #e5e7eb;
-	}
-	:global(.dark) .field-input:hover,
-	:global(.dark) .field-input:focus,
-	:global(.dark) .field-select:hover,
-	:global(.dark) .field-select:focus {
-		border-color: rgba(255, 255, 255, 0.1);
+		border-color: hsl(var(--color-border));
 	}
 	.field-input.small {
 		max-width: 6rem;
@@ -401,7 +375,7 @@
 		background: color-mix(in srgb, var(--tag-color) 12%, transparent);
 		border: none;
 		font-size: 0.6875rem;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 	}
 	.tag-pill:hover {
@@ -412,10 +386,6 @@
 		height: 6px;
 		border-radius: 9999px;
 	}
-	:global(.dark) .tag-pill {
-		color: #9ca3af;
-	}
-
 	.log-list {
 		display: flex;
 		flex-direction: column;
@@ -425,9 +395,9 @@
 	.log-row {
 		display: flex;
 		justify-content: space-between;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 	}
 	.log-accuracy {
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/modules/questions/views/DetailView.svelte b/apps/mana/apps/web/src/lib/modules/questions/views/DetailView.svelte
index 73e320aba..6bdf44903 100644
--- a/apps/mana/apps/web/src/lib/modules/questions/views/DetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/questions/views/DetailView.svelte
@@ -190,11 +190,7 @@
 		font-size: 0.6875rem;
 		padding: 0.125rem 0.5rem;
 		border-radius: 0.25rem;
-		background: rgba(0, 0, 0, 0.04);
-		color: #6b7280;
-	}
-	:global(.dark) .tag {
-		background: rgba(255, 255, 255, 0.06);
-		color: #9ca3af;
+		background: hsl(var(--color-surface-hover));
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/modules/skilltree/views/DetailView.svelte b/apps/mana/apps/web/src/lib/modules/skilltree/views/DetailView.svelte
index 93f17951a..88b4f665c 100644
--- a/apps/mana/apps/web/src/lib/modules/skilltree/views/DetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/skilltree/views/DetailView.svelte
@@ -199,39 +199,33 @@
 	.xp-level {
 		font-size: 0.8125rem;
 		font-weight: 500;
-		color: #374151;
-	}
-	:global(.dark) .xp-level {
-		color: #e5e7eb;
+		color: hsl(var(--color-foreground));
 	}
 	.xp-numbers {
 		font-size: 0.75rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 	.xp-bar {
 		height: 6px;
 		border-radius: 3px;
-		background: rgba(0, 0, 0, 0.08);
+		background: hsl(var(--color-border));
 		overflow: hidden;
 	}
-	:global(.dark) .xp-bar {
-		background: rgba(255, 255, 255, 0.1);
-	}
 	.xp-fill {
 		height: 100%;
 		border-radius: 3px;
-		background: #8b5cf6;
+		background: hsl(var(--color-primary));
 		transition: width 0.3s ease;
 	}
 	.xp-total {
 		font-size: 0.6875rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 	.level-up {
 		padding: 0.375rem 0.75rem;
 		border-radius: 0.375rem;
-		background: #8b5cf6;
-		color: white;
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
 		font-size: 0.8125rem;
 		font-weight: 500;
 		text-align: center;
@@ -246,29 +240,21 @@
 		font-size: 0.8125rem;
 		padding: 0.25rem 0.375rem;
 		border-radius: 0.25rem;
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		outline: none;
 	}
-	:global(.dark) .xp-input {
-		color: #e5e7eb;
-		border-color: rgba(255, 255, 255, 0.1);
-	}
 	.xp-desc-input {
 		flex: 1;
 		font-size: 0.8125rem;
 		padding: 0.25rem 0.375rem;
 		border-radius: 0.25rem;
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		outline: none;
 	}
-	:global(.dark) .xp-desc-input {
-		color: #e5e7eb;
-		border-color: rgba(255, 255, 255, 0.1);
-	}
 	.xp-btn {
 		display: flex;
 		align-items: center;
@@ -276,8 +262,8 @@
 		padding: 0.25rem 0.5rem;
 		border-radius: 0.25rem;
 		border: none;
-		background: #8b5cf6;
-		color: white;
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground));
 		font-size: 0.75rem;
 		cursor: pointer;
 		white-space: nowrap;
diff --git a/apps/mana/apps/web/src/lib/modules/times/views/DetailView.svelte b/apps/mana/apps/web/src/lib/modules/times/views/DetailView.svelte
index 7a7740d0b..af756ce3c 100644
--- a/apps/mana/apps/web/src/lib/modules/times/views/DetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/times/views/DetailView.svelte
@@ -242,7 +242,7 @@
 <style>
 	.time-range {
 		font-size: 0.75rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 	.duration-inputs {
 		display: flex;
@@ -262,22 +262,15 @@
 		border-radius: 0.25rem;
 		border: 1px solid transparent;
 		background: transparent;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		outline: none;
 	}
 	.dur-input:hover,
 	.dur-input:focus {
-		border-color: rgba(0, 0, 0, 0.1);
+		border-color: hsl(var(--color-border));
 	}
 	.dur-unit {
 		font-size: 0.6875rem;
-		color: #9ca3af;
-	}
-	:global(.dark) .dur-input {
-		color: #e5e7eb;
-	}
-	:global(.dark) .dur-input:hover,
-	:global(.dark) .dur-input:focus {
-		border-color: rgba(255, 255, 255, 0.1);
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
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 c0e73b57c..3fd399113 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
@@ -151,15 +151,12 @@
 <style>
 	.edit-bar {
 		padding: 0.5rem 0.75rem;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+		border-bottom: 1px solid hsl(var(--color-border));
 		display: flex;
 		flex-direction: column;
 		gap: 0.375rem;
 		animation: slideDown 0.2s ease-out;
 	}
-	:global(.dark) .edit-bar {
-		border-bottom-color: rgba(255, 255, 255, 0.08);
-	}
 	@keyframes slideDown {
 		from {
 			opacity: 0;
@@ -188,28 +185,17 @@
 		border-radius: 0.25rem;
 		border: none;
 		background: transparent;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.icon-btn:hover {
-		background: rgba(0, 0, 0, 0.06);
-		color: #374151;
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-foreground));
 	}
 	.icon-btn.active {
 		background: var(--color-primary, #8b5cf6);
-		color: white;
-	}
-	:global(.dark) .icon-btn {
-		color: #6b7280;
-	}
-	:global(.dark) .icon-btn:hover {
-		background: rgba(255, 255, 255, 0.1);
-		color: #e5e7eb;
-	}
-	:global(.dark) .icon-btn.active {
-		background: var(--color-primary, #8b5cf6);
-		color: white;
+		color: hsl(var(--color-primary-foreground));
 	}
 	.filter-toggle {
 		display: flex;
@@ -218,7 +204,7 @@
 		padding: 0.25rem 0.5rem;
 		border: none;
 		background: transparent;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		font-size: 0.6875rem;
 		font-weight: 500;
@@ -227,10 +213,7 @@
 		transition: color 0.15s;
 	}
 	.filter-toggle:hover {
-		color: #374151;
-	}
-	:global(.dark) .filter-toggle:hover {
-		color: #e5e7eb;
+		color: hsl(var(--color-foreground));
 	}
 	.filter-toggle-arrow {
 		font-size: 0.625rem;
@@ -255,7 +238,7 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 	.filter-pills {
 		display: flex;
@@ -265,42 +248,29 @@
 	.filter-pill {
 		padding: 0.1875rem 0.5rem;
 		border-radius: 9999px;
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.6875rem;
 		font-weight: 500;
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.filter-pill:hover {
-		border-color: rgba(0, 0, 0, 0.2);
-		color: #374151;
+		border-color: hsl(var(--color-border-strong));
+		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));
-		color: white;
-	}
-	:global(.dark) .filter-pill {
-		border-color: rgba(255, 255, 255, 0.1);
-		color: #9ca3af;
-	}
-	:global(.dark) .filter-pill:hover {
-		border-color: rgba(255, 255, 255, 0.2);
-		color: #e5e7eb;
-	}
-	:global(.dark) .filter-pill.active {
-		background: var(--pill-color, var(--color-primary, #8b5cf6));
-		border-color: var(--pill-color, var(--color-primary, #8b5cf6));
-		color: white;
+		color: hsl(var(--color-primary-foreground));
 	}
 	.completed-toggle {
 		display: flex;
 		align-items: center;
 		gap: 0.375rem;
 		font-size: 0.6875rem;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 	}
 	.completed-toggle input {
@@ -309,9 +279,6 @@
 		accent-color: var(--color-primary, #8b5cf6);
 		cursor: pointer;
 	}
-	:global(.dark) .completed-toggle {
-		color: #9ca3af;
-	}
 	.actions-row {
 		justify-content: flex-end;
 	}
@@ -324,24 +291,16 @@
 		border-radius: 0.25rem;
 		border: none;
 		background: transparent;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.action-btn:hover {
-		background: rgba(0, 0, 0, 0.06);
-		color: #374151;
-	}
-	:global(.dark) .action-btn:hover {
-		background: rgba(255, 255, 255, 0.1);
-		color: #e5e7eb;
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-foreground));
 	}
 	.delete-btn:hover {
-		color: #ef4444;
-		background: rgba(239, 68, 68, 0.08);
-	}
-	:global(.dark) .delete-btn:hover {
-		color: #ef4444;
-		background: rgba(239, 68, 68, 0.15);
+		color: hsl(var(--color-error));
+		background: hsl(var(--color-error) / 0.08);
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/modules/todo/components/pages/TodoPage.svelte b/apps/mana/apps/web/src/lib/modules/todo/components/pages/TodoPage.svelte
index 79cb51cd0..4ab4dfeba 100644
--- a/apps/mana/apps/web/src/lib/modules/todo/components/pages/TodoPage.svelte
+++ b/apps/mana/apps/web/src/lib/modules/todo/components/pages/TodoPage.svelte
@@ -324,28 +324,21 @@
 	.page-title {
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		outline: none;
 		border-radius: 0.125rem;
 	}
 	.page-title[contenteditable='true'] {
 		cursor: text;
 	}
-	:global(.dark) .page-title {
-		color: #f3f4f6;
-	}
 	.task-count {
 		font-size: 0.75rem;
 		font-weight: 500;
-		color: #9ca3af;
-		background: rgba(0, 0, 0, 0.05);
+		color: hsl(var(--color-muted-foreground));
+		background: hsl(var(--color-surface-hover));
 		padding: 0.125rem 0.5rem;
 		border-radius: 9999px;
 	}
-	:global(.dark) .task-count {
-		background: rgba(255, 255, 255, 0.1);
-		color: #6b7280;
-	}
 	.page-content {
 		padding: 0.75rem 1rem;
 	}
@@ -361,15 +354,12 @@
 	.completed-section {
 		margin-top: 1rem;
 		padding-top: 0.75rem;
-		border-top: 1px solid rgba(0, 0, 0, 0.06);
-	}
-	:global(.dark) .completed-section {
-		border-top-color: rgba(255, 255, 255, 0.08);
+		border-top: 1px solid hsl(var(--color-border));
 	}
 	.completed-label {
 		font-size: 0.6875rem;
 		font-weight: 500;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 		margin-bottom: 0.5rem;
@@ -384,28 +374,19 @@
 	}
 	.inline-create-icon {
 		flex-shrink: 0;
-		color: #d1d5db;
+		color: hsl(var(--color-muted-foreground) / 0.5);
 		display: flex;
 		align-items: center;
 	}
-	:global(.dark) .inline-create-icon {
-		color: #4b5563;
-	}
 	.inline-create-input {
 		flex: 1;
 		border: none;
 		background: transparent;
 		font-size: 0.8125rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		outline: none;
 	}
 	.inline-create-input::placeholder {
-		color: #c0bfba;
-	}
-	:global(.dark) .inline-create-input {
-		color: #f3f4f6;
-	}
-	:global(.dark) .inline-create-input::placeholder {
-		color: #4b5563;
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/modules/todo/views/DetailView.svelte b/apps/mana/apps/web/src/lib/modules/todo/views/DetailView.svelte
index 44eb4fb0d..61153f1c0 100644
--- a/apps/mana/apps/web/src/lib/modules/todo/views/DetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/todo/views/DetailView.svelte
@@ -344,17 +344,14 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: white;
+		color: hsl(var(--color-primary-foreground));
 		transition:
 			background 0.15s,
 			border-color 0.15s;
 	}
-	:global(.dark) .checkbox {
-		border-color: #4b5563;
-	}
 	.checkbox.checked {
-		background: #22c55e;
-		border-color: #22c55e;
+		background: hsl(var(--color-success));
+		border-color: hsl(var(--color-success));
 	}
 	.checkbox.small {
 		width: 14px;
@@ -363,7 +360,7 @@
 	}
 	:global(.detail-view .title-input.completed) {
 		text-decoration: line-through;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.schedule-fields {
@@ -382,30 +379,26 @@
 		gap: 0.25rem;
 		padding: 0.25rem 0.5rem;
 		border-radius: 0.25rem;
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		background: transparent;
 		font-size: 0.75rem;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 	}
 	.schedule-btn:hover {
-		background: rgba(0, 0, 0, 0.04);
-	}
-	:global(.dark) .schedule-btn {
-		border-color: rgba(255, 255, 255, 0.1);
-		color: #9ca3af;
+		background: hsl(var(--color-surface-hover));
 	}
 	.unschedule-btn {
 		border: none;
 		background: transparent;
 		cursor: pointer;
 		padding: 0.125rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		display: flex;
 		align-items: center;
 	}
 	.unschedule-btn:hover {
-		color: #ef4444;
+		color: hsl(var(--color-error));
 	}
 
 	.tags-list {
@@ -422,7 +415,7 @@
 		background: color-mix(in srgb, var(--tag-color) 12%, transparent);
 		border: none;
 		font-size: 0.6875rem;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 	}
 	.tag-pill:hover {
@@ -433,10 +426,6 @@
 		height: 6px;
 		border-radius: 9999px;
 	}
-	:global(.dark) .tag-pill {
-		color: #9ca3af;
-	}
-
 	.subtask-list {
 		display: flex;
 		flex-direction: column;
@@ -455,20 +444,14 @@
 		transition: background 0.15s;
 	}
 	.subtask-item:hover {
-		background: rgba(0, 0, 0, 0.04);
-	}
-	:global(.dark) .subtask-item:hover {
-		background: rgba(255, 255, 255, 0.04);
+		background: hsl(var(--color-surface-hover));
 	}
 	.subtask-title {
 		font-size: 0.8125rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 	}
 	.subtask-title.completed {
 		text-decoration: line-through;
-		color: #9ca3af;
-	}
-	:global(.dark) .subtask-title {
-		color: #e5e7eb;
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>