diff --git a/apps/mana/apps/web/src/lib/components/Breadcrumbs.svelte b/apps/mana/apps/web/src/lib/components/Breadcrumbs.svelte
index 46036b315..fdff01601 100644
--- a/apps/mana/apps/web/src/lib/components/Breadcrumbs.svelte
+++ b/apps/mana/apps/web/src/lib/components/Breadcrumbs.svelte
@@ -30,22 +30,22 @@
 	}
 
 	.separator {
-		color: var(--color-muted-foreground, #94a3b8);
+		color: hsl(var(--color-muted-foreground));
 		font-size: 11px;
 	}
 
 	.crumb-link {
-		color: var(--color-muted-foreground, #94a3b8);
+		color: hsl(var(--color-muted-foreground));
 		text-decoration: none;
 		transition: color 0.15s;
 	}
 
 	.crumb-link:hover {
-		color: var(--color-primary, #6366f1);
+		color: hsl(var(--color-primary));
 	}
 
 	.crumb-current {
-		color: var(--color-foreground, #f1f5f9);
+		color: hsl(var(--color-foreground));
 		font-weight: 500;
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/components/KeyboardShortcutsModal.svelte b/apps/mana/apps/web/src/lib/components/KeyboardShortcutsModal.svelte
index d28ece76b..cb426aaca 100644
--- a/apps/mana/apps/web/src/lib/components/KeyboardShortcutsModal.svelte
+++ b/apps/mana/apps/web/src/lib/components/KeyboardShortcutsModal.svelte
@@ -55,8 +55,8 @@
 		left: 50%;
 		transform: translate(-50%, -50%);
 		z-index: 55;
-		background: var(--color-card, #1e293b);
-		border: 1px solid var(--color-border, rgba(148, 163, 184, 0.15));
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border)));
 		border-radius: 12px;
 		padding: 24px;
 		min-width: 320px;
@@ -74,14 +74,14 @@
 	.modal-title {
 		font-size: 16px;
 		font-weight: 600;
-		color: var(--color-foreground, #f1f5f9);
+		color: hsl(var(--color-foreground));
 		margin: 0;
 	}
 
 	.close-btn {
 		background: none;
 		border: none;
-		color: var(--color-muted-foreground, #94a3b8);
+		color: hsl(var(--color-muted-foreground));
 		font-size: 20px;
 		cursor: pointer;
 		padding: 4px 8px;
@@ -89,7 +89,7 @@
 	}
 
 	.close-btn:hover {
-		background: var(--color-muted, rgba(148, 163, 184, 0.1));
+		background: hsl(var(--color-muted)));
 	}
 
 	.shortcut-list {
@@ -114,17 +114,17 @@
 		display: inline-flex;
 		align-items: center;
 		padding: 2px 8px;
-		background: var(--color-muted, rgba(148, 163, 184, 0.1));
-		border: 1px solid var(--color-border, rgba(148, 163, 184, 0.15));
+		background: hsl(var(--color-muted)));
+		border: 1px solid hsl(var(--color-border)));
 		border-radius: 5px;
 		font-size: 12px;
 		font-family: system-ui, sans-serif;
-		color: var(--color-foreground, #e2e8f0);
+		color: hsl(var(--color-foreground));
 		font-weight: 500;
 	}
 
 	.shortcut-desc {
 		font-size: 13px;
-		color: var(--color-muted-foreground, #94a3b8);
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/components/dashboard/TilePanel.svelte b/apps/mana/apps/web/src/lib/components/dashboard/TilePanel.svelte
index a1e68d480..a86553b8b 100644
--- a/apps/mana/apps/web/src/lib/components/dashboard/TilePanel.svelte
+++ b/apps/mana/apps/web/src/lib/components/dashboard/TilePanel.svelte
@@ -171,8 +171,8 @@
 		display: flex;
 		flex-direction: column;
 		border-radius: 0.75rem;
-		border: 2px dashed var(--color-primary, #6366f1);
-		background: var(--color-background, #fff);
+		border: 2px dashed hsl(var(--color-primary));
+		background: hsl(var(--color-background));
 		opacity: 0.95;
 	}
 
@@ -181,7 +181,7 @@
 		align-items: center;
 		justify-content: center;
 		padding: 0.5rem;
-		border-bottom: 1px solid var(--color-border, #e5e7eb);
+		border-bottom: 1px solid hsl(var(--color-border));
 		cursor: grab;
 	}
 
@@ -211,21 +211,21 @@
 		font-size: 0.75rem;
 		font-weight: 500;
 		cursor: pointer;
-		background: var(--color-surface, #f3f4f6);
-		color: var(--color-text, #374151);
+		background: hsl(var(--color-surface));
+		color: hsl(var(--color-foreground));
 		transition: background 0.15s;
 	}
 
 	.tile-edit-btn:hover {
-		background: var(--color-surface-hover, #e5e7eb);
+		background: hsl(var(--color-surface-hover));
 	}
 
 	.tile-edit-btn-danger {
-		color: var(--color-destructive, #ef4444);
+		color: hsl(var(--color-error));
 	}
 
 	.tile-edit-btn-danger:hover {
-		background: var(--color-destructive, #ef4444);
+		background: hsl(var(--color-error));
 		color: white;
 	}
 
@@ -236,7 +236,7 @@
 		padding: 0.5rem;
 		max-height: 200px;
 		overflow-y: auto;
-		border-top: 1px solid var(--color-border, #e5e7eb);
+		border-top: 1px solid hsl(var(--color-border));
 	}
 
 	.tile-widget-option {
@@ -247,18 +247,18 @@
 		text-align: left;
 		cursor: pointer;
 		background: transparent;
-		color: var(--color-text, #374151);
+		color: hsl(var(--color-foreground));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 
 	.tile-widget-option:hover {
-		background: var(--color-surface-hover, #e5e7eb);
+		background: hsl(var(--color-surface-hover));
 	}
 
 	.tile-widget-option.active {
-		background: var(--color-primary, #6366f1);
+		background: hsl(var(--color-primary));
 		color: white;
 	}
 </style>
diff --git a/apps/mana/apps/web/src/lib/components/dashboard/TileResizeHandle.svelte b/apps/mana/apps/web/src/lib/components/dashboard/TileResizeHandle.svelte
index 2a11b6230..40a50e746 100644
--- a/apps/mana/apps/web/src/lib/components/dashboard/TileResizeHandle.svelte
+++ b/apps/mana/apps/web/src/lib/components/dashboard/TileResizeHandle.svelte
@@ -152,7 +152,7 @@
 
 	.tile-resize-handle-bar {
 		border-radius: 3px;
-		background: var(--color-border, #e5e7eb);
+		background: hsl(var(--color-border));
 		transition: background 0.15s ease;
 	}
 
@@ -168,11 +168,11 @@
 
 	.tile-resize-handle:hover .tile-resize-handle-bar,
 	.tile-resize-handle.dragging .tile-resize-handle-bar {
-		background: var(--color-primary, #6366f1);
+		background: hsl(var(--color-primary));
 	}
 
 	.tile-resize-handle:focus-visible {
-		outline: 2px solid var(--color-primary, #6366f1);
+		outline: 2px solid hsl(var(--color-primary));
 		outline-offset: -1px;
 		border-radius: 3px;
 	}
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 4ef971827..ece0a6df5 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
@@ -215,9 +215,9 @@
 		border-color: rgba(0, 0, 0, 0.12);
 	}
 	.add-card:hover {
-		border-color: var(--color-primary, #8b5cf6);
-		color: var(--color-primary, #8b5cf6);
-		background: color-mix(in srgb, var(--color-primary, #8b5cf6) 4%, transparent);
+		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);
@@ -228,9 +228,9 @@
 		color: #6b7280;
 	}
 	:global(.dark) .add-card:hover {
-		border-color: var(--color-primary, #8b5cf6);
-		color: var(--color-primary, #8b5cf6);
-		background: color-mix(in srgb, var(--color-primary, #8b5cf6) 8%, transparent);
+		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;
@@ -303,13 +303,13 @@
 		padding: 0;
 	}
 	.tab-title:hover {
-		color: var(--color-primary, #8b5cf6);
+		color: hsl(var(--color-primary));
 	}
 	:global(.dark) .tab-title {
 		color: #e5e7eb;
 	}
 	:global(.dark) .tab-title:hover {
-		color: var(--color-primary, #8b5cf6);
+		color: hsl(var(--color-primary));
 	}
 	.tab-maximize,
 	.tab-close {
@@ -329,7 +329,7 @@
 		opacity: 1;
 	}
 	.tab-maximize:hover {
-		color: var(--color-primary, #8b5cf6);
+		color: hsl(var(--color-primary));
 		background: rgba(139, 92, 246, 0.08);
 	}
 	.tab-close:hover {
@@ -349,7 +349,7 @@
 		margin-left: 0.125rem;
 	}
 	.tab-add:hover {
-		color: var(--color-primary, #8b5cf6);
+		color: hsl(var(--color-primary));
 		background: rgba(139, 92, 246, 0.08);
 	}
 </style>
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 bf2c2b776..3b189be97 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
@@ -163,7 +163,7 @@
 		background: rgba(255, 255, 255, 0.06);
 	}
 	.cd-btn-primary {
-		background: var(--color-primary, #8b5cf6);
+		background: hsl(var(--color-primary));
 		color: white;
 	}
 	.cd-btn-primary:hover:not(:disabled) {
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 1f17a5776..ecba96674 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
@@ -194,7 +194,7 @@
 		transition: border-color 0.15s;
 	}
 	.srd-input:focus {
-		border-color: var(--color-primary, #8b5cf6);
+		border-color: hsl(var(--color-primary));
 	}
 	:global(.dark) .srd-input {
 		background: #1f1c1a;
@@ -237,7 +237,7 @@
 		background: rgba(255, 255, 255, 0.06);
 	}
 	.srd-btn-primary {
-		background: var(--color-primary, #8b5cf6);
+		background: hsl(var(--color-primary));
 		color: white;
 	}
 	.srd-btn-primary:hover:not(:disabled) {
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 185c7c3d7..e4bd19858 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
@@ -223,10 +223,10 @@
 	}
 	.scene-add:hover {
 		background: rgba(0, 0, 0, 0.05);
-		color: var(--color-primary, #8b5cf6);
+		color: hsl(var(--color-primary));
 	}
 	:global(.dark) .scene-add:hover {
 		background: rgba(255, 255, 255, 0.06);
-		color: var(--color-primary, #8b5cf6);
+		color: hsl(var(--color-primary));
 	}
 </style>
diff --git a/apps/mana/apps/web/src/routes/(app)/llm-test/+page.svelte b/apps/mana/apps/web/src/routes/(app)/llm-test/+page.svelte
index 85d09e415..83ac390fe 100644
--- a/apps/mana/apps/web/src/routes/(app)/llm-test/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/llm-test/+page.svelte
@@ -512,12 +512,12 @@
 	{@html `<style>
 		.llm-prose { line-height: 1.6; }
 		.llm-prose p { margin: 0.4em 0; }
-		.llm-prose pre { background: var(--color-muted, #1e1e2e); border-radius: 0.5rem; padding: 0.75rem; overflow-x: auto; margin: 0.5em 0; }
-		.llm-prose code { font-size: 0.85em; background: var(--color-muted, #1e1e2e); padding: 0.15em 0.3em; border-radius: 0.25rem; }
+		.llm-prose pre { background: hsl(var(--color-muted)); border-radius: 0.5rem; padding: 0.75rem; overflow-x: auto; margin: 0.5em 0; }
+		.llm-prose code { font-size: 0.85em; background: hsl(var(--color-muted)); padding: 0.15em 0.3em; border-radius: 0.25rem; }
 		.llm-prose pre code { background: none; padding: 0; }
 		.llm-prose ul, .llm-prose ol { padding-left: 1.5em; margin: 0.4em 0; }
 		.llm-prose h1, .llm-prose h2, .llm-prose h3 { margin: 0.6em 0 0.3em; font-weight: 600; }
-		.llm-prose blockquote { border-left: 3px solid var(--color-border, #444); padding-left: 0.75em; margin: 0.4em 0; opacity: 0.8; }
+		.llm-prose blockquote { border-left: 3px solid hsl(var(--color-border)); padding-left: 0.75em; margin: 0.4em 0; opacity: 0.8; }
 	</style>`}
 </svelte:head>
 
diff --git a/apps/mana/apps/web/src/routes/(app)/observatory/+page.svelte b/apps/mana/apps/web/src/routes/(app)/observatory/+page.svelte
index 72737f1de..66743a6c0 100644
--- a/apps/mana/apps/web/src/routes/(app)/observatory/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/observatory/+page.svelte
@@ -277,13 +277,13 @@
 	.gallery-title {
 		font-size: 20px;
 		font-weight: 700;
-		color: var(--color-foreground, #f1f5f9);
+		color: hsl(var(--color-foreground));
 		margin: 0 0 4px 0;
 	}
 
 	.gallery-subtitle {
 		font-size: 13px;
-		color: var(--color-muted-foreground, #94a3b8);
+		color: hsl(var(--color-muted-foreground));
 		margin: 0;
 	}
 
@@ -330,7 +330,7 @@
 	.group-label {
 		font-size: 12px;
 		font-weight: 600;
-		color: var(--color-muted-foreground, #94a3b8);
+		color: hsl(var(--color-muted-foreground));
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
 		margin: 0;
diff --git a/apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte b/apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte
index 822b4abd9..3d52964f4 100644
--- a/apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte
+++ b/apps/mana/apps/web/src/routes/(app)/spiral/+page.svelte
@@ -289,12 +289,12 @@
 	.page-title {
 		font-size: 1.75rem;
 		font-weight: 700;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		margin: 0;
 	}
 
 	.page-subtitle {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.875rem;
 		margin: 0.25rem 0 0;
 	}
@@ -306,8 +306,8 @@
 	}
 
 	.section {
-		background: var(--color-card, rgba(255, 255, 255, 0.05));
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
+		background: hsl(var(--color-card)));
+		border: 1px solid hsl(var(--color-border)));
 		border-radius: 12px;
 		padding: 1.25rem;
 	}
@@ -315,7 +315,7 @@
 	.section-title {
 		font-size: 1rem;
 		font-weight: 600;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		margin: 0 0 1rem;
 		display: flex;
 		align-items: center;
@@ -323,7 +323,7 @@
 	}
 
 	.badge {
-		background: var(--color-primary, #6366f1);
+		background: hsl(var(--color-primary));
 		color: white;
 		font-size: 0.75rem;
 		padding: 0.125rem 0.5rem;
@@ -348,7 +348,7 @@
 	.viz-header h2 {
 		font-size: 1rem;
 		font-weight: 600;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		margin: 0;
 	}
 
@@ -364,7 +364,7 @@
 		align-items: center;
 		gap: 0.5rem;
 		font-size: 0.875rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.control input[type='range'] {
@@ -388,17 +388,17 @@
 	.empty-state {
 		text-align: center;
 		padding: 3rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.pixel-detail {
 		text-align: center;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.875rem;
 	}
 
 	.pixel-detail code {
-		background: var(--color-background, rgba(0, 0, 0, 0.2));
+		background: hsl(var(--color-background)));
 		padding: 0.125rem 0.5rem;
 		border-radius: 4px;
 		font-family: monospace;
@@ -427,7 +427,7 @@
 	.stat {
 		text-align: center;
 		padding: 0.75rem;
-		background: var(--color-background, rgba(0, 0, 0, 0.2));
+		background: hsl(var(--color-background)));
 		border-radius: 8px;
 	}
 
@@ -435,14 +435,14 @@
 		display: block;
 		font-size: 1.25rem;
 		font-weight: 700;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 		font-family: monospace;
 	}
 
 	.stat-label {
 		display: block;
 		font-size: 0.7rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		margin-top: 0.25rem;
 	}
 
@@ -452,7 +452,7 @@
 
 	.collected-at {
 		font-size: 0.75rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		text-align: right;
 		margin: 0;
 	}
@@ -466,7 +466,7 @@
 
 	.app-card {
 		padding: 0.75rem;
-		background: var(--color-background, rgba(0, 0, 0, 0.2));
+		background: hsl(var(--color-background)));
 		border-radius: 8px;
 	}
 
@@ -480,19 +480,19 @@
 	.app-name {
 		font-weight: 600;
 		font-size: 0.875rem;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 	}
 
 	.app-count {
 		font-family: monospace;
 		font-size: 1rem;
 		font-weight: 700;
-		color: var(--color-primary, #6366f1);
+		color: hsl(var(--color-primary));
 	}
 
 	.app-bar {
 		height: 4px;
-		background: var(--color-border, rgba(255, 255, 255, 0.1));
+		background: hsl(var(--color-border)));
 		border-radius: 2px;
 		overflow: hidden;
 		margin-bottom: 0.375rem;
@@ -513,16 +513,16 @@
 
 	.app-label {
 		font-size: 0.75rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.app-events {
 		font-size: 0.7rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.empty-hint {
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.875rem;
 		text-align: center;
 		padding: 1rem;
@@ -541,7 +541,7 @@
 		align-items: center;
 		gap: 0.375rem;
 		font-size: 0.75rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.color-swatch {
@@ -569,15 +569,15 @@
 		border-radius: 8px;
 		font-size: 0.875rem;
 		font-weight: 500;
-		border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
-		background: var(--color-background, rgba(0, 0, 0, 0.2));
-		color: var(--color-foreground);
+		border: 1px solid hsl(var(--color-border)));
+		background: hsl(var(--color-background)));
+		color: hsl(var(--color-foreground));
 		cursor: pointer;
 		transition: all 0.15s;
 	}
 
 	.btn:hover:not(:disabled) {
-		background: var(--color-accent, rgba(255, 255, 255, 0.1));
+		background: hsl(var(--color-accent)));
 	}
 
 	.btn:disabled {
@@ -586,8 +586,8 @@
 	}
 
 	.btn-primary {
-		background: var(--color-primary, #6366f1);
-		border-color: var(--color-primary, #6366f1);
+		background: hsl(var(--color-primary));
+		border-color: hsl(var(--color-primary));
 		color: white;
 	}
 
@@ -606,21 +606,21 @@
 
 	.info-box {
 		padding: 1rem;
-		background: var(--color-background, rgba(0, 0, 0, 0.2));
+		background: hsl(var(--color-background)));
 		border-radius: 8px;
-		border-left: 4px solid var(--color-primary, #6366f1);
+		border-left: 4px solid hsl(var(--color-primary));
 	}
 
 	.info-box h4 {
 		font-size: 0.875rem;
 		font-weight: 600;
 		margin: 0 0 0.5rem;
-		color: var(--color-foreground);
+		color: hsl(var(--color-foreground));
 	}
 
 	.info-box p {
 		font-size: 0.8rem;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		margin: 0;
 		line-height: 1.5;
 	}