diff --git a/apps/mana/apps/web/src/lib/components/DetailViewShell.svelte b/apps/mana/apps/web/src/lib/components/DetailViewShell.svelte
index 02dd3026c..22f9fd56f 100644
--- a/apps/mana/apps/web/src/lib/components/DetailViewShell.svelte
+++ b/apps/mana/apps/web/src/lib/components/DetailViewShell.svelte
@@ -91,7 +91,7 @@
 		padding: 2rem 0;
 		text-align: center;
 		font-size: 0.8125rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	/* Title input — used by consumer body via :global */
@@ -101,7 +101,7 @@
 		border: 1px solid transparent;
 		background: transparent;
 		outline: none;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		padding: 0.125rem 0;
 		border-radius: 0.25rem;
 		transition: border-color 0.15s;
@@ -109,16 +109,8 @@
 	}
 	:global(.detail-view .title-input:hover),
 	:global(.detail-view .title-input:focus) {
-		border-color: rgba(0, 0, 0, 0.1);
+		border-color: hsl(var(--color-border));
 	}
-	:global(.dark .detail-view .title-input) {
-		color: #f3f4f6;
-	}
-	:global(.dark .detail-view .title-input:hover),
-	:global(.dark .detail-view .title-input:focus) {
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
 	:global(.detail-view .title-row) {
 		display: flex;
 		align-items: center;
@@ -143,11 +135,11 @@
 	}
 	:global(.detail-view .prop-label) {
 		font-size: 0.75rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 	:global(.detail-view .prop-value) {
 		font-size: 0.8125rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		max-width: 60%;
 		text-align: right;
 		overflow: hidden;
@@ -158,17 +150,13 @@
 		font-family: monospace;
 		font-size: 0.75rem;
 	}
-	:global(.dark .detail-view .prop-value) {
-		color: #e5e7eb;
-	}
-
 	:global(.detail-view .prop-input) {
 		flex: 1;
 		min-width: 0;
 		max-width: 60%;
 		text-align: right;
 		font-size: 0.8125rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		background: transparent;
 		border: 1px solid transparent;
 		outline: none;
@@ -178,23 +166,15 @@
 	}
 	:global(.detail-view .prop-input:hover),
 	:global(.detail-view .prop-input:focus) {
-		border-color: rgba(0, 0, 0, 0.1);
+		border-color: hsl(var(--color-border));
 	}
-	:global(.dark .detail-view .prop-input) {
-		color: #f3f4f6;
-	}
-	:global(.dark .detail-view .prop-input:hover),
-	:global(.dark .detail-view .prop-input:focus) {
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
 	:global(.detail-view .prop-select) {
 		flex: 1;
 		min-width: 0;
 		max-width: 60%;
 		text-align: right;
 		font-size: 0.8125rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		background: transparent;
 		border: 1px solid transparent;
 		outline: none;
@@ -204,16 +184,8 @@
 	}
 	:global(.detail-view .prop-select:hover),
 	:global(.detail-view .prop-select:focus) {
-		border-color: rgba(0, 0, 0, 0.1);
+		border-color: hsl(var(--color-border));
 	}
-	:global(.dark .detail-view .prop-select) {
-		color: #f3f4f6;
-	}
-	:global(.dark .detail-view .prop-select:hover),
-	:global(.dark .detail-view .prop-select:focus) {
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
 	:global(.detail-view .color-input) {
 		width: 28px;
 		height: 24px;
@@ -223,45 +195,36 @@
 		cursor: pointer;
 	}
 	:global(.detail-view .color-input:hover) {
-		border-color: rgba(0, 0, 0, 0.1);
+		border-color: hsl(var(--color-border));
 	}
-	:global(.dark .detail-view .color-input:hover) {
-		border-color: rgba(255, 255, 255, 0.1);
-	}
-
 	:global(.detail-view .toggle-btn) {
 		padding: 0.125rem 0.5rem;
 		border-radius: 0.25rem;
 		background: transparent;
-		border: 1px solid rgba(0, 0, 0, 0.1);
+		border: 1px solid hsl(var(--color-border));
 		font-size: 0.75rem;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	:global(.detail-view .toggle-btn.active) {
-		background: rgba(99, 102, 241, 0.1);
-		color: #6366f1;
-		border-color: rgba(99, 102, 241, 0.3);
+		background: hsl(var(--color-primary) / 0.1);
+		color: hsl(var(--color-primary));
+		border-color: hsl(var(--color-primary) / 0.3);
 	}
-	:global(.dark .detail-view .toggle-btn) {
-		border-color: rgba(255, 255, 255, 0.1);
-		color: #9ca3af;
-	}
-
 	:global(.detail-view .fav-btn) {
 		border: none;
 		background: transparent;
 		cursor: pointer;
 		padding: 0.125rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		display: flex;
 		align-items: center;
 		transition: color 0.15s;
 	}
 	:global(.detail-view .fav-btn:hover),
 	:global(.detail-view .fav-btn.active) {
-		color: #ef4444;
+		color: hsl(var(--color-error));
 	}
 
 	/* Sections (description, etc.) */
@@ -275,14 +238,14 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 	:global(.detail-view .description-input) {
 		width: 100%;
 		font-size: 0.8125rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		background: transparent;
-		border: 1px solid rgba(0, 0, 0, 0.08);
+		border: 1px solid hsl(var(--color-border));
 		outline: none;
 		padding: 0.5rem;
 		border-radius: 0.375rem;
@@ -291,37 +254,25 @@
 		transition: border-color 0.15s;
 	}
 	:global(.detail-view .description-input:focus) {
-		border-color: rgba(0, 0, 0, 0.15);
+		border-color: hsl(var(--color-border-strong));
 	}
-	:global(.dark .detail-view .description-input) {
-		color: #f3f4f6;
-		border-color: rgba(255, 255, 255, 0.08);
-	}
-	:global(.dark .detail-view .description-input:focus) {
-		border-color: rgba(255, 255, 255, 0.15);
-	}
-
 	/* Meta footer */
 	:global(.detail-view .meta) {
 		display: flex;
 		flex-direction: column;
 		gap: 0.125rem;
 		font-size: 0.6875rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		padding-top: 0.5rem;
-		border-top: 1px solid rgba(0, 0, 0, 0.06);
+		border-top: 1px solid hsl(var(--color-border));
 	}
-	:global(.dark .detail-view .meta) {
-		border-color: rgba(255, 255, 255, 0.06);
-	}
-
 	/* Danger zone */
 	.danger-zone {
 		padding-top: 0.5rem;
 	}
 	.confirm-text {
 		font-size: 0.8125rem;
-		color: #ef4444;
+		color: hsl(var(--color-error));
 		margin: 0 0 0.5rem;
 	}
 	.confirm-actions {
@@ -331,37 +282,29 @@
 	.action-btn {
 		padding: 0.25rem 0.625rem;
 		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: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.action-btn:hover {
-		background: rgba(0, 0, 0, 0.04);
-		color: #374151;
+		background: hsl(var(--color-surface-hover));
+		color: hsl(var(--color-foreground));
 	}
 	.action-btn.danger {
-		background: #ef4444;
-		border-color: #ef4444;
+		background: hsl(var(--color-error));
+		border-color: hsl(var(--color-error));
 		color: white;
 	}
 	.action-btn.danger-subtle {
-		color: #ef4444;
+		color: hsl(var(--color-error));
 		border-color: transparent;
 		display: flex;
 		align-items: center;
 		gap: 0.375rem;
 	}
-	:global(.dark) .action-btn {
-		border-color: rgba(255, 255, 255, 0.1);
-		color: #9ca3af;
-	}
-	:global(.dark) .action-btn:hover {
-		background: rgba(255, 255, 255, 0.06);
-		color: #e5e7eb;
-	}
 
 	@media (max-width: 640px) {
 		.detail-view {
diff --git a/apps/mana/apps/web/src/lib/components/PickerOverlay.svelte b/apps/mana/apps/web/src/lib/components/PickerOverlay.svelte
index 0a93ff196..fd0f60cf2 100644
--- a/apps/mana/apps/web/src/lib/components/PickerOverlay.svelte
+++ b/apps/mana/apps/web/src/lib/components/PickerOverlay.svelte
@@ -65,7 +65,7 @@
 		width: min(var(--picker-width), 85vw);
 		min-height: 60vh;
 		max-height: 80vh;
-		background: #fffef5;
+		background: hsl(var(--color-card));
 		border-radius: 0.375rem;
 		box-shadow:
 			0 2px 8px rgba(0, 0, 0, 0.08),
@@ -74,12 +74,6 @@
 		flex-direction: column;
 		animation: slideIn 0.25s ease-out;
 	}
-	:global(.dark) .picker {
-		background-color: #252220;
-		box-shadow:
-			0 2px 8px rgba(0, 0, 0, 0.25),
-			0 0 0 1px rgba(255, 255, 255, 0.06);
-	}
 	@keyframes slideIn {
 		from {
 			opacity: 0;
@@ -101,12 +95,9 @@
 	.picker-title {
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		margin: 0;
 	}
-	:global(.dark) .picker-title {
-		color: #f3f4f6;
-	}
 	.close-btn {
 		display: flex;
 		align-items: center;
@@ -116,17 +107,13 @@
 		border-radius: 0.375rem;
 		border: none;
 		background: transparent;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.close-btn:hover {
-		background: rgba(0, 0, 0, 0.06);
-		color: #374151;
-	}
-	:global(.dark) .close-btn:hover {
-		background: rgba(255, 255, 255, 0.1);
-		color: #f3f4f6;
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-foreground));
 	}
 
 	.picker-list {
@@ -138,13 +125,9 @@
 	/* Divider between rows — used by both auto-render above and consumer snippets. */
 	:global(.picker .divider) {
 		height: 1px;
-		background: rgba(0, 0, 0, 0.06);
+		background: hsl(var(--color-muted));
 		margin: 0 0.5rem;
 	}
-	:global(.dark .picker .divider) {
-		background: rgba(255, 255, 255, 0.06);
-	}
-
 	/* Standard option button — consumers use these classes inside the item snippet. */
 	:global(.picker .picker-option) {
 		display: flex;
@@ -160,12 +143,8 @@
 		text-align: left;
 	}
 	:global(.picker .picker-option:hover) {
-		background: rgba(0, 0, 0, 0.04);
+		background: hsl(var(--color-surface-hover));
 	}
-	:global(.dark .picker .picker-option:hover) {
-		background: rgba(255, 255, 255, 0.06);
-	}
-
 	:global(.picker .option-icon) {
 		flex-shrink: 0;
 		display: flex;
@@ -186,25 +165,18 @@
 	:global(.picker .option-title) {
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: #374151;
-	}
-	:global(.dark .picker .option-title) {
-		color: #f3f4f6;
+		color: hsl(var(--color-foreground));
 	}
 	:global(.picker .option-desc) {
 		font-size: 0.75rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
-	:global(.dark .picker .option-desc) {
-		color: #6b7280;
-	}
-
 	.empty-state {
 		padding: 2rem 1rem;
 		text-align: center;
 	}
 	.empty-state p {
 		font-size: 0.8125rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/components/links/LinkedItems.svelte b/apps/mana/apps/web/src/lib/components/links/LinkedItems.svelte
index 14a378c56..72af72865 100644
--- a/apps/mana/apps/web/src/lib/components/links/LinkedItems.svelte
+++ b/apps/mana/apps/web/src/lib/components/links/LinkedItems.svelte
@@ -58,7 +58,7 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 	.links-list {
 		display: flex;
@@ -71,21 +71,14 @@
 		gap: 0.5rem;
 		padding: 0.375rem 0.5rem;
 		border-radius: 0.375rem;
-		background: rgba(0, 0, 0, 0.02);
-		border: 1px solid rgba(0, 0, 0, 0.04);
+		background: hsl(var(--color-surface-hover));
+		border: 1px solid hsl(var(--color-border));
 		cursor: pointer;
 		text-align: left;
 		transition: background 0.15s;
 	}
 	.link-item:hover {
-		background: rgba(0, 0, 0, 0.05);
-	}
-	:global(.dark) .link-item {
-		background: rgba(255, 255, 255, 0.02);
-		border-color: rgba(255, 255, 255, 0.04);
-	}
-	:global(.dark) .link-item:hover {
-		background: rgba(255, 255, 255, 0.06);
+		background: hsl(var(--color-surface-hover));
 	}
 	.link-dot {
 		width: 8px;
@@ -102,21 +95,18 @@
 	}
 	.link-title {
 		font-size: 0.8125rem;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-	:global(.dark) .link-title {
-		color: #e5e7eb;
-	}
 	.link-subtitle {
 		font-size: 0.6875rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 	.link-app {
 		font-size: 0.625rem;
-		color: #b0afa8;
+		color: hsl(var(--color-muted-foreground));
 		flex-shrink: 0;
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte b/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
index ece0a6df5..8f4f346bf 100644
--- a/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
+++ b/apps/mana/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
@@ -194,10 +194,10 @@
 		align-items: center;
 		justify-content: center;
 		gap: 0.75rem;
-		border: 2px dashed rgba(0, 0, 0, 0.08);
+		border: 2px dashed hsl(var(--color-border));
 		border-radius: 0.375rem;
 		background: transparent;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.2s;
 	}
@@ -212,26 +212,13 @@
 	.add-card.alone {
 		width: 100%;
 		min-height: 60vh;
-		border-color: rgba(0, 0, 0, 0.12);
+		border-color: hsl(var(--color-border-strong));
 	}
 	.add-card:hover {
 		border-color: hsl(var(--color-primary));
 		color: hsl(var(--color-primary));
 		background: color-mix(in srgb, hsl(var(--color-primary)) 4%, transparent);
 	}
-	:global(.dark) .add-card {
-		border-color: rgba(255, 255, 255, 0.06);
-		color: #4b5563;
-	}
-	:global(.dark) .add-card.alone {
-		border-color: rgba(255, 255, 255, 0.1);
-		color: #6b7280;
-	}
-	:global(.dark) .add-card:hover {
-		border-color: hsl(var(--color-primary));
-		color: hsl(var(--color-primary));
-		background: color-mix(in srgb, hsl(var(--color-primary)) 8%, transparent);
-	}
 	.add-label {
 		font-size: 0.875rem;
 		font-weight: 500;
@@ -249,16 +236,11 @@
 		gap: 0.25rem;
 		padding: 0.375rem 0.5rem;
 		border-radius: 0.75rem;
-		background: #fffef5;
-		border: 1px solid rgba(0, 0, 0, 0.08);
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border));
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 		animation: slideUp 0.25s ease-out;
 	}
-	:global(.dark) .minimized-tabs {
-		background: #252220;
-		border-color: rgba(255, 255, 255, 0.08);
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-	}
 	@keyframes slideUp {
 		from {
 			opacity: 0;
@@ -278,10 +260,7 @@
 		transition: background 0.15s;
 	}
 	.minimized-tab:hover {
-		background: rgba(0, 0, 0, 0.04);
-	}
-	:global(.dark) .minimized-tab:hover {
-		background: rgba(255, 255, 255, 0.06);
+		background: hsl(var(--color-surface-hover));
 	}
 	.tab-dot {
 		width: 8px;
@@ -292,7 +271,7 @@
 	.tab-title {
 		border: none;
 		background: none;
-		color: #374151;
+		color: hsl(var(--color-foreground));
 		font-size: 0.8125rem;
 		font-weight: 500;
 		cursor: pointer;
@@ -305,17 +284,11 @@
 	.tab-title:hover {
 		color: hsl(var(--color-primary));
 	}
-	:global(.dark) .tab-title {
-		color: #e5e7eb;
-	}
-	:global(.dark) .tab-title:hover {
-		color: hsl(var(--color-primary));
-	}
 	.tab-maximize,
 	.tab-close {
 		border: none;
 		background: none;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		padding: 0.125rem;
 		border-radius: 0.25rem;
@@ -330,16 +303,16 @@
 	}
 	.tab-maximize:hover {
 		color: hsl(var(--color-primary));
-		background: rgba(139, 92, 246, 0.08);
+		background: hsl(var(--color-primary) / 0.08);
 	}
 	.tab-close:hover {
-		color: #ef4444;
-		background: rgba(239, 68, 68, 0.08);
+		color: hsl(var(--color-error));
+		background: hsl(var(--color-error) / 0.08);
 	}
 	.tab-add {
 		border: none;
 		background: none;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		padding: 0.25rem;
 		border-radius: 0.25rem;
@@ -350,6 +323,6 @@
 	}
 	.tab-add:hover {
 		color: hsl(var(--color-primary));
-		background: rgba(139, 92, 246, 0.08);
+		background: hsl(var(--color-primary) / 0.08);
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/components/voice/VoiceCaptureBar.svelte b/apps/mana/apps/web/src/lib/components/voice/VoiceCaptureBar.svelte
index eaac07dc6..ea007fcd4 100644
--- a/apps/mana/apps/web/src/lib/components/voice/VoiceCaptureBar.svelte
+++ b/apps/mana/apps/web/src/lib/components/voice/VoiceCaptureBar.svelte
@@ -147,26 +147,26 @@
 		gap: 0.5rem;
 		padding: 0.625rem 0.875rem;
 		border-radius: 0.5rem;
-		border: 1px solid rgba(99, 102, 241, 0.2);
-		background: rgba(99, 102, 241, 0.04);
-		color: #6366f1;
+		border: 1px solid hsl(var(--color-primary) / 0.2);
+		background: hsl(var(--color-primary) / 0.04);
+		color: hsl(var(--color-primary));
 		font-size: 0.8125rem;
 		font-weight: 500;
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.mic-btn:hover:not(:disabled) {
-		background: rgba(99, 102, 241, 0.08);
-		border-color: #6366f1;
+		background: hsl(var(--color-primary) / 0.08);
+		border-color: hsl(var(--color-primary));
 	}
 	.mic-btn:disabled {
 		opacity: 0.6;
 		cursor: wait;
 	}
 	.mic-btn.recording {
-		background: rgba(239, 68, 68, 0.08);
-		border-color: rgba(239, 68, 68, 0.4);
-		color: #ef4444;
+		background: hsl(var(--color-error) / 0.08);
+		border-color: hsl(var(--color-error) / 0.4);
+		color: hsl(var(--color-error));
 		animation: rec-pulse 1.5s ease-in-out infinite;
 	}
 	@keyframes rec-pulse {
@@ -197,19 +197,16 @@
 		width: 32px;
 		height: 32px;
 		border-radius: 0.375rem;
-		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));
 		font-size: 1.125rem;
 		line-height: 1;
 		cursor: pointer;
 	}
 	.mic-cancel:hover {
-		color: #ef4444;
-		border-color: #ef4444;
-	}
-	:global(.dark) .mic-cancel {
-		border-color: rgba(255, 255, 255, 0.1);
+		color: hsl(var(--color-error));
+		border-color: hsl(var(--color-error));
 	}
 	.rec-error {
 		display: flex;
@@ -218,31 +215,28 @@
 		padding: 0.625rem 0.75rem;
 		margin-top: 0.5rem;
 		border-radius: 0.375rem;
-		background: rgba(239, 68, 68, 0.06);
-		border: 1px solid rgba(239, 68, 68, 0.2);
+		background: hsl(var(--color-error) / 0.08);
+		border: 1px solid hsl(var(--color-error) / 0.2);
 	}
 	.rec-error p {
 		font-size: 0.6875rem;
-		color: #b91c1c;
+		color: hsl(var(--color-error));
 		margin: 0;
 		white-space: pre-line;
 		line-height: 1.5;
 	}
-	:global(.dark) .rec-error p {
-		color: #fca5a5;
-	}
 	.rec-retry {
 		align-self: flex-start;
 		padding: 0.25rem 0.625rem;
 		border-radius: 0.25rem;
-		border: 1px solid rgba(239, 68, 68, 0.3);
+		border: 1px solid hsl(var(--color-error) / 0.3);
 		background: transparent;
-		color: #ef4444;
+		color: hsl(var(--color-error));
 		font-size: 0.6875rem;
 		font-weight: 500;
 		cursor: pointer;
 	}
 	.rec-retry:hover {
-		background: rgba(239, 68, 68, 0.08);
+		background: hsl(var(--color-error) / 0.08);
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/components/workbench/AppPage.svelte b/apps/mana/apps/web/src/lib/components/workbench/AppPage.svelte
index 454266622..ed62ae1a8 100644
--- a/apps/mana/apps/web/src/lib/components/workbench/AppPage.svelte
+++ b/apps/mana/apps/web/src/lib/components/workbench/AppPage.svelte
@@ -381,12 +381,12 @@
 		position: relative;
 	}
 	:global(.app-page-wrapper.mana-drop-target-hover) :global(.page-shell) {
-		outline: 2px solid rgba(139, 92, 246, 0.5);
+		outline: 2px solid hsl(var(--color-primary) / 0.5);
 		outline-offset: -2px;
 		box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
 	}
 	:global(.app-page-wrapper.mana-drop-target-success) :global(.page-shell) {
-		outline: 2px solid rgba(34, 197, 94, 0.5);
+		outline: 2px solid hsl(var(--color-success) / 0.5);
 		outline-offset: -2px;
 	}
 
@@ -396,7 +396,7 @@
 		justify-content: center;
 		height: 100%;
 		min-height: 200px;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.8125rem;
 	}
 	.load-state :global(.spinner) {
@@ -439,7 +439,7 @@
 		width: 100%;
 		display: flex;
 		flex-direction: column;
-		background: #fffef5;
+		background: hsl(var(--color-card));
 		border-radius: 0.5rem;
 		box-shadow:
 			0 8px 32px rgba(0, 0, 0, 0.15),
@@ -450,12 +450,6 @@
 	.closing .overlay-card {
 		animation: scaleOut 0.15s ease-in forwards;
 	}
-	:global(.dark) .overlay-card {
-		background: #252220;
-		box-shadow:
-			0 8px 32px rgba(0, 0, 0, 0.4),
-			0 0 0 1px rgba(255, 255, 255, 0.08);
-	}
 
 	/* Nav arrows — inside the card, flush with edges */
 	.nav-arrow {
@@ -466,25 +460,18 @@
 		flex-shrink: 0;
 		border: none;
 		background: transparent;
-		color: #b0afa8;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.nav-arrow:hover {
-		background: rgba(0, 0, 0, 0.04);
-		color: #374151;
-	}
-	:global(.dark) .nav-arrow {
-		color: #4b5563;
-	}
-	:global(.dark) .nav-arrow:hover {
-		background: rgba(255, 255, 255, 0.06);
-		color: #f3f4f6;
+		background: hsl(var(--color-surface-hover));
+		color: hsl(var(--color-foreground));
 	}
 
 	.nav-counter {
 		font-size: 0.6875rem;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		font-variant-numeric: tabular-nums;
 	}
 
@@ -493,10 +480,7 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.625rem 1rem;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-	}
-	:global(.dark) .overlay-header {
-		border-color: rgba(255, 255, 255, 0.06);
+		border-bottom: 1px solid hsl(var(--color-border));
 	}
 
 	.color-dot {
@@ -510,10 +494,7 @@
 		flex: 1;
 		font-size: 0.8125rem;
 		font-weight: 600;
-		color: #374151;
-	}
-	:global(.dark) .overlay-title {
-		color: #f3f4f6;
+		color: hsl(var(--color-foreground));
 	}
 
 	.back-btn {
@@ -525,17 +506,13 @@
 		border-radius: 0.25rem;
 		border: none;
 		background: transparent;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.back-btn:hover {
-		background: rgba(0, 0, 0, 0.06);
-		color: #374151;
-	}
-	:global(.dark) .back-btn:hover {
-		background: rgba(255, 255, 255, 0.1);
-		color: #f3f4f6;
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-foreground));
 	}
 
 	.close-btn {
@@ -547,17 +524,13 @@
 		border-radius: 0.25rem;
 		border: none;
 		background: transparent;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.close-btn:hover {
-		background: rgba(0, 0, 0, 0.06);
-		color: #374151;
-	}
-	:global(.dark) .close-btn:hover {
-		background: rgba(255, 255, 255, 0.1);
-		color: #f3f4f6;
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-foreground));
 	}
 
 	.overlay-body {
diff --git a/apps/mana/apps/web/src/lib/components/workbench/scenes/ConfirmDialog.svelte b/apps/mana/apps/web/src/lib/components/workbench/scenes/ConfirmDialog.svelte
index 3b189be97..4186094b3 100644
--- a/apps/mana/apps/web/src/lib/components/workbench/scenes/ConfirmDialog.svelte
+++ b/apps/mana/apps/web/src/lib/components/workbench/scenes/ConfirmDialog.svelte
@@ -83,7 +83,7 @@
 	.cd-backdrop {
 		position: fixed;
 		inset: 0;
-		background: rgba(0, 0, 0, 0.5);
+		background: hsl(0 0% 0% / 0.5);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -91,7 +91,7 @@
 		padding: 1rem;
 	}
 	.cd-dialog {
-		background: #fffef5;
+		background: hsl(var(--color-card));
 		border-radius: 0.75rem;
 		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
 		max-width: 420px;
@@ -99,10 +99,6 @@
 		padding: 1.5rem;
 		animation: cd-pop 0.18s ease-out;
 	}
-	:global(.dark) .cd-dialog {
-		background: #252220;
-		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
-	}
 	@keyframes cd-pop {
 		from {
 			opacity: 0;
@@ -116,21 +112,15 @@
 	.cd-title {
 		font-size: 1.0625rem;
 		font-weight: 600;
-		color: #111827;
+		color: hsl(var(--color-foreground));
 		margin: 0 0 0.5rem;
 	}
-	:global(.dark) .cd-title {
-		color: #f9fafb;
-	}
 	.cd-message {
 		font-size: 0.875rem;
-		color: #4b5563;
+		color: hsl(var(--color-foreground));
 		margin: 0 0 1.25rem;
 		line-height: 1.5;
 	}
-	:global(.dark) .cd-message {
-		color: #d1d5db;
-	}
 	.cd-actions {
 		display: flex;
 		justify-content: flex-end;
@@ -151,29 +141,23 @@
 	}
 	.cd-btn-cancel {
 		background: transparent;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 	}
 	.cd-btn-cancel:hover:not(:disabled) {
-		background: rgba(0, 0, 0, 0.05);
-	}
-	:global(.dark) .cd-btn-cancel {
-		color: #9ca3af;
-	}
-	:global(.dark) .cd-btn-cancel:hover:not(:disabled) {
-		background: rgba(255, 255, 255, 0.06);
+		background: hsl(var(--color-surface-hover));
 	}
 	.cd-btn-primary {
 		background: hsl(var(--color-primary));
-		color: white;
+		color: hsl(var(--color-primary-foreground));
 	}
 	.cd-btn-primary:hover:not(:disabled) {
 		filter: brightness(1.08);
 	}
 	.cd-btn-danger {
-		background: #ef4444;
-		color: white;
+		background: hsl(var(--color-error));
+		color: hsl(var(--color-primary-foreground));
 	}
 	.cd-btn-danger:hover:not(:disabled) {
-		background: #dc2626;
+		background: hsl(var(--color-error));
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/components/workbench/scenes/SceneRenameDialog.svelte b/apps/mana/apps/web/src/lib/components/workbench/scenes/SceneRenameDialog.svelte
index ecba96674..78c6b4cf2 100644
--- a/apps/mana/apps/web/src/lib/components/workbench/scenes/SceneRenameDialog.svelte
+++ b/apps/mana/apps/web/src/lib/components/workbench/scenes/SceneRenameDialog.svelte
@@ -119,7 +119,7 @@
 	.srd-backdrop {
 		position: fixed;
 		inset: 0;
-		background: rgba(0, 0, 0, 0.5);
+		background: hsl(0 0% 0% / 0.5);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -127,7 +127,7 @@
 		padding: 1rem;
 	}
 	.srd-dialog {
-		background: #fffef5;
+		background: hsl(var(--color-card));
 		border-radius: 0.75rem;
 		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
 		max-width: 420px;
@@ -135,10 +135,6 @@
 		padding: 1.5rem;
 		animation: srd-pop 0.18s ease-out;
 	}
-	:global(.dark) .srd-dialog {
-		background: #252220;
-		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
-	}
 	@keyframes srd-pop {
 		from {
 			opacity: 0;
@@ -152,12 +148,9 @@
 	.srd-title {
 		font-size: 1.0625rem;
 		font-weight: 600;
-		color: #111827;
+		color: hsl(var(--color-foreground));
 		margin: 0 0 1rem;
 	}
-	:global(.dark) .srd-title {
-		color: #f9fafb;
-	}
 	.srd-fields {
 		display: flex;
 		gap: 0.5rem;
@@ -178,29 +171,21 @@
 	.srd-label {
 		font-size: 0.75rem;
 		font-weight: 500;
-		color: #6b7280;
-	}
-	:global(.dark) .srd-label {
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 	}
 	.srd-input {
 		padding: 0.5rem 0.75rem;
 		border-radius: 0.5rem;
-		border: 1px solid rgba(0, 0, 0, 0.12);
+		border: 1px solid hsl(var(--color-border));
 		background: white;
 		font-size: 0.875rem;
-		color: #111827;
+		color: hsl(var(--color-foreground));
 		outline: none;
 		transition: border-color 0.15s;
 	}
 	.srd-input:focus {
 		border-color: hsl(var(--color-primary));
 	}
-	:global(.dark) .srd-input {
-		background: #1f1c1a;
-		border-color: rgba(255, 255, 255, 0.12);
-		color: #f9fafb;
-	}
 	.srd-icon-input {
 		text-align: center;
 		font-size: 1.25rem;
@@ -225,20 +210,14 @@
 	}
 	.srd-btn-cancel {
 		background: transparent;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 	}
 	.srd-btn-cancel:hover:not(:disabled) {
-		background: rgba(0, 0, 0, 0.05);
-	}
-	:global(.dark) .srd-btn-cancel {
-		color: #9ca3af;
-	}
-	:global(.dark) .srd-btn-cancel:hover:not(:disabled) {
-		background: rgba(255, 255, 255, 0.06);
+		background: hsl(var(--color-surface-hover));
 	}
 	.srd-btn-primary {
 		background: hsl(var(--color-primary));
-		color: white;
+		color: hsl(var(--color-primary-foreground));
 	}
 	.srd-btn-primary:hover:not(:disabled) {
 		filter: brightness(1.08);
diff --git a/apps/mana/apps/web/src/lib/components/workbench/scenes/SceneTabs.svelte b/apps/mana/apps/web/src/lib/components/workbench/scenes/SceneTabs.svelte
index e4bd19858..8f8c1b393 100644
--- a/apps/mana/apps/web/src/lib/components/workbench/scenes/SceneTabs.svelte
+++ b/apps/mana/apps/web/src/lib/components/workbench/scenes/SceneTabs.svelte
@@ -149,14 +149,11 @@
 		scrollbar-width: none;
 		padding: 0.25rem;
 		border-radius: 0.625rem;
-		background: rgba(0, 0, 0, 0.03);
+		background: hsl(var(--color-surface-hover));
 	}
 	.scene-tabs-scroll::-webkit-scrollbar {
 		display: none;
 	}
-	:global(.dark) .scene-tabs-scroll {
-		background: rgba(255, 255, 255, 0.04);
-	}
 
 	.scene-pill {
 		display: inline-flex;
@@ -165,7 +162,7 @@
 		flex: 0 0 auto;
 		border: none;
 		background: transparent;
-		color: #6b7280;
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.8125rem;
 		font-weight: 500;
 		padding: 0.375rem 0.75rem;
@@ -175,29 +172,17 @@
 		max-width: 180px;
 	}
 	.scene-pill:hover {
-		background: rgba(0, 0, 0, 0.05);
-		color: #374151;
+		background: hsl(var(--color-surface-hover));
+		color: hsl(var(--color-foreground));
 	}
 	.scene-pill.active {
-		background: #fffef5;
-		color: #111827;
+		background: hsl(var(--color-card));
+		color: hsl(var(--color-foreground));
 		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
 	}
 	.scene-pill.dragging {
 		opacity: 0.4;
 	}
-	:global(.dark) .scene-pill {
-		color: #9ca3af;
-	}
-	:global(.dark) .scene-pill:hover {
-		background: rgba(255, 255, 255, 0.06);
-		color: #f3f4f6;
-	}
-	:global(.dark) .scene-pill.active {
-		background: #2f2b29;
-		color: #f9fafb;
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-	}
 	.scene-icon {
 		font-size: 0.95rem;
 		line-height: 1;
@@ -215,18 +200,14 @@
 		flex: 0 0 auto;
 		border: none;
 		background: transparent;
-		color: #9ca3af;
+		color: hsl(var(--color-muted-foreground));
 		padding: 0.375rem;
 		border-radius: 0.5rem;
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 	.scene-add:hover {
-		background: rgba(0, 0, 0, 0.05);
-		color: hsl(var(--color-primary));
-	}
-	:global(.dark) .scene-add:hover {
-		background: rgba(255, 255, 255, 0.06);
+		background: hsl(var(--color-surface-hover));
 		color: hsl(var(--color-primary));
 	}
 </style>