From 6da317d0717ccdf776c18bf7c3208801e4903087 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Wed, 15 Apr 2026 22:11:42 +0200
Subject: [PATCH] refactor(theme): migrate shared packages to --color-* token
 naming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Several shared-ui / shared-auth-ui / subscriptions / credits
components used shadcn-style bare CSS variables (--muted, --primary,
--foreground, etc.), but the Mana theme system standardized on
--color-*. The mismatch meant bg-[hsl(var(--muted))] classes
resolved to an invalid color and rendered transparent — most
visible on the Allgemein settings tab where language and week-start
buttons had no background.

Mechanical prefix across ~30 files. Two semantic renames:
- --destructive → --color-error (Mana uses "error" as the token name)
- --popover     → --color-card  (no popover token; card is the closest)

With shared packages on the correct naming, drop the shadcn-compat
alias shim from app.css.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/mana/apps/web/src/app.css                | 20 -----
 packages/credits/src/web/CreditBalance.svelte |  8 +-
 .../credits/src/web/CreditPricingTable.svelte | 14 +--
 packages/credits/src/web/CreditToast.svelte   |  8 +-
 .../src/components/AuthGate.svelte            | 22 ++---
 .../src/charts/ActivityHeatmap.svelte         | 28 +++---
 .../shared-ui/src/charts/DonutChart.svelte    | 12 +--
 .../shared-ui/src/charts/ProgressBars.svelte  | 12 +--
 .../src/charts/StatisticsSkeleton.svelte      | 12 +--
 .../shared-ui/src/charts/StatsGrid.svelte     |  4 +-
 .../src/charts/TrendLineChart.svelte          | 16 ++--
 .../loaders/AppLoadingSkeleton.svelte         | 20 ++---
 .../organisms/network/NetworkControls.svelte  | 88 +++++++++----------
 .../src/organisms/network/NetworkGraph.svelte | 53 ++++++-----
 .../shared-ui/src/pages/ProfilePage.svelte    | 22 ++---
 .../src/settings/GlobalSettingsSection.svelte | 70 +++++++--------
 .../src/settings/NavVisibilitySettings.svelte | 12 +--
 .../src/settings/SettingsPage.svelte          | 12 +--
 .../src/settings/SettingsSection.svelte       |  2 +-
 .../src/settings/SettingsToggle.svelte        |  2 +-
 .../subscriptions/src/BillingToggle.svelte    |  6 +-
 packages/subscriptions/src/CostCard.svelte    |  8 +-
 packages/subscriptions/src/PackageCard.svelte | 14 +--
 .../src/SubscriptionButton.svelte             |  8 +-
 .../subscriptions/src/SubscriptionCard.svelte | 16 ++--
 packages/subscriptions/src/UsageCard.svelte   |  8 +-
 .../src/pages/SubscriptionPage.svelte         |  8 +-
 27 files changed, 245 insertions(+), 260 deletions(-)

diff --git a/apps/mana/apps/web/src/app.css b/apps/mana/apps/web/src/app.css
index 308553d45..34e7b134f 100644
--- a/apps/mana/apps/web/src/app.css
+++ b/apps/mana/apps/web/src/app.css
@@ -13,26 +13,6 @@
 @layer base {
 	:root {
 		color-scheme: light dark;
-
-		/* shadcn-compat aliases — some shared-ui components (GlobalSettingsSection,
-		   a few auth-ui pieces) use bare `--muted`, `--primary`, etc. instead of
-		   the `--color-*` tokens this app standardized on. Bridge them here so
-		   `bg-[hsl(var(--muted))]` and friends resolve to a real color. */
-		--primary: var(--color-primary);
-		--primary-foreground: var(--color-primary-foreground);
-		--secondary: var(--color-secondary);
-		--secondary-foreground: var(--color-secondary-foreground);
-		--background: var(--color-background);
-		--foreground: var(--color-foreground);
-		--muted: var(--color-muted);
-		--muted-foreground: var(--color-muted-foreground);
-		--border: var(--color-border);
-		--card: var(--color-card);
-		--card-foreground: var(--color-card-foreground);
-		--accent: var(--color-accent);
-		--accent-foreground: var(--color-accent-foreground);
-		--input: var(--color-input);
-		--ring: var(--color-ring);
 	}
 
 	h1 {
diff --git a/packages/credits/src/web/CreditBalance.svelte b/packages/credits/src/web/CreditBalance.svelte
index 1f7762f9b..25f789c2c 100644
--- a/packages/credits/src/web/CreditBalance.svelte
+++ b/packages/credits/src/web/CreditBalance.svelte
@@ -144,7 +144,7 @@
 		transition: all 0.15s ease;
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	:global(.dark) .credit-balance__button {
@@ -235,7 +235,7 @@
 		margin: 0;
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.credit-balance__total {
@@ -247,13 +247,13 @@
 	.credit-balance__value--large {
 		font-size: 1.5rem;
 		font-weight: 700;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.credit-balance__free {
 		margin: 0 0 0.75rem 0;
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.credit-balance__warning {
diff --git a/packages/credits/src/web/CreditPricingTable.svelte b/packages/credits/src/web/CreditPricingTable.svelte
index 6e3e3c76e..8d50e91f5 100644
--- a/packages/credits/src/web/CreditPricingTable.svelte
+++ b/packages/credits/src/web/CreditPricingTable.svelte
@@ -177,14 +177,14 @@
 		margin: 0 0 1rem 0;
 		font-size: 1.125rem;
 		font-weight: 700;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.pricing-table__empty {
 		margin: 0;
 		padding: 1rem;
 		text-align: center;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		font-size: 0.875rem;
 	}
 
@@ -219,7 +219,7 @@
 		margin: 0;
 		font-size: 0.8125rem;
 		font-weight: 600;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		text-transform: uppercase;
 		letter-spacing: 0.025em;
 	}
@@ -236,7 +236,7 @@
 		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 		font-size: 0.75rem;
 		font-weight: 600;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		text-transform: uppercase;
 		letter-spacing: 0.025em;
 	}
@@ -276,12 +276,12 @@
 	.pricing-table__item-name {
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.pricing-table__item-description {
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.pricing-table__item-cost {
@@ -305,7 +305,7 @@
 		padding-top: 0.75rem;
 		border-top: 1px solid rgba(0, 0, 0, 0.05);
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	:global(.dark) .pricing-table__footer {
diff --git a/packages/credits/src/web/CreditToast.svelte b/packages/credits/src/web/CreditToast.svelte
index 232d9c382..2ff01e2e3 100644
--- a/packages/credits/src/web/CreditToast.svelte
+++ b/packages/credits/src/web/CreditToast.svelte
@@ -195,7 +195,7 @@
 		margin: 0 0 0.25rem 0;
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -222,7 +222,7 @@
 	}
 
 	.credit-toast__remaining {
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.credit-toast__dismiss {
@@ -235,7 +235,7 @@
 		padding: 0;
 		border: none;
 		background: transparent;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		border-radius: 0.25rem;
 		transition: all 0.15s ease;
@@ -243,7 +243,7 @@
 
 	.credit-toast__dismiss:hover {
 		background: rgba(0, 0, 0, 0.05);
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	:global(.dark) .credit-toast__dismiss:hover {
diff --git a/packages/shared-auth-ui/src/components/AuthGate.svelte b/packages/shared-auth-ui/src/components/AuthGate.svelte
index b9952af5f..848aa1e0c 100644
--- a/packages/shared-auth-ui/src/components/AuthGate.svelte
+++ b/packages/shared-auth-ui/src/components/AuthGate.svelte
@@ -113,22 +113,22 @@
 {#if tierDenied}
 	<div
 		class="flex items-center justify-center min-h-screen p-6"
-		style:background-color="hsl(var(--background, 0 0% 100%))"
+		style:background-color="hsl(var(--color-background, 0 0% 100%))"
 	>
 		<div
 			class="max-w-96 w-full text-center py-10 px-8 rounded-2xl border shadow-sm"
-			style:border-color="hsl(var(--border, 0 0% 90%))"
-			style:background-color="hsl(var(--card, 0 0% 100%))"
+			style:border-color="hsl(var(--color-border, 0 0% 90%))"
+			style:background-color="hsl(var(--color-card, 0 0% 100%))"
 		>
 			{#if appName}
-				<h1 class="text-xl font-bold mb-4" style:color="hsl(var(--foreground, 0 0% 9%))">
+				<h1 class="text-xl font-bold mb-4" style:color="hsl(var(--color-foreground, 0 0% 9%))">
 					{appName}
 				</h1>
 			{/if}
 			<div class="text-5xl mb-4">🔒</div>
 			<p
 				class="text-[0.9375rem] leading-relaxed mb-6"
-				style:color="hsl(var(--muted-foreground, 0 0% 45%))"
+				style:color="hsl(var(--color-muted-foreground, 0 0% 45%))"
 			>
 				{locale === 'en'
 					? `This app is currently in closed `
@@ -137,18 +137,18 @@
 			</p>
 			<div
 				class="flex flex-col gap-2 p-4 rounded-xl mb-6"
-				style:background-color="hsl(var(--muted, 0 0% 96%))"
+				style:background-color="hsl(var(--color-muted, 0 0% 96%))"
 			>
 				<div class="flex justify-between items-center text-sm">
-					<span style:color="hsl(var(--muted-foreground, 0 0% 45%))"
+					<span style:color="hsl(var(--color-muted-foreground, 0 0% 45%))"
 						>{locale === 'en' ? 'Your access:' : 'Dein Zugang:'}</span
 					>
-					<span class="font-semibold" style:color="hsl(var(--foreground, 0 0% 9%))"
+					<span class="font-semibold" style:color="hsl(var(--color-foreground, 0 0% 9%))"
 						>{userTierLabel}</span
 					>
 				</div>
 				<div class="flex justify-between items-center text-sm">
-					<span style:color="hsl(var(--muted-foreground, 0 0% 45%))"
+					<span style:color="hsl(var(--color-muted-foreground, 0 0% 45%))"
 						>{locale === 'en' ? 'Required:' : 'Benötigt:'}</span
 					>
 					<span class="font-semibold text-violet-500">{requiredTierLabel}</span>
@@ -156,8 +156,8 @@
 			</div>
 			<button
 				class="w-full py-2.5 px-4 rounded-lg border-none text-sm font-medium cursor-pointer transition-opacity hover:opacity-90"
-				style:background-color="hsl(var(--primary, 239 84% 67%))"
-				style:color="hsl(var(--primary-foreground, 0 0% 100%))"
+				style:background-color="hsl(var(--color-primary, 239 84% 67%))"
+				style:color="hsl(var(--color-primary-foreground, 0 0% 100%))"
 				onclick={goHome}
 			>
 				{locale === 'en' ? 'Back to overview' : 'Zur Übersicht'}
diff --git a/packages/shared-ui/src/charts/ActivityHeatmap.svelte b/packages/shared-ui/src/charts/ActivityHeatmap.svelte
index 852539046..b169483c7 100644
--- a/packages/shared-ui/src/charts/ActivityHeatmap.svelte
+++ b/packages/shared-ui/src/charts/ActivityHeatmap.svelte
@@ -203,7 +203,7 @@
 	.heatmap-title {
 		font-size: 1rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0 0 1rem 0;
 	}
 
@@ -218,12 +218,12 @@
 
 	.month-label {
 		font-size: 10px;
-		fill: hsl(var(--muted-foreground));
+		fill: hsl(var(--color-muted-foreground));
 	}
 
 	.day-label {
 		font-size: 10px;
-		fill: hsl(var(--muted-foreground));
+		fill: hsl(var(--color-muted-foreground));
 	}
 
 	.cell {
@@ -252,7 +252,7 @@
 
 	.legend-label {
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.legend-cells {
@@ -268,27 +268,27 @@
 
 	/* Intensity classes using theme primary color */
 	.intensity-0 {
-		fill: hsl(var(--muted) / 0.3);
-		background: hsl(var(--muted) / 0.3);
+		fill: hsl(var(--color-muted) / 0.3);
+		background: hsl(var(--color-muted) / 0.3);
 	}
 
 	.intensity-1 {
-		fill: hsl(var(--primary) / 0.3);
-		background: hsl(var(--primary) / 0.3);
+		fill: hsl(var(--color-primary) / 0.3);
+		background: hsl(var(--color-primary) / 0.3);
 	}
 
 	.intensity-2 {
-		fill: hsl(var(--primary) / 0.5);
-		background: hsl(var(--primary) / 0.5);
+		fill: hsl(var(--color-primary) / 0.5);
+		background: hsl(var(--color-primary) / 0.5);
 	}
 
 	.intensity-3 {
-		fill: hsl(var(--primary) / 0.7);
-		background: hsl(var(--primary) / 0.7);
+		fill: hsl(var(--color-primary) / 0.7);
+		background: hsl(var(--color-primary) / 0.7);
 	}
 
 	.intensity-4 {
-		fill: hsl(var(--primary));
-		background: hsl(var(--primary));
+		fill: hsl(var(--color-primary));
+		background: hsl(var(--color-primary));
 	}
 </style>
diff --git a/packages/shared-ui/src/charts/DonutChart.svelte b/packages/shared-ui/src/charts/DonutChart.svelte
index 643db2d61..f0b69678e 100644
--- a/packages/shared-ui/src/charts/DonutChart.svelte
+++ b/packages/shared-ui/src/charts/DonutChart.svelte
@@ -164,7 +164,7 @@
 	.donut-title {
 		font-size: 1rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0 0 1rem 0;
 	}
 
@@ -206,13 +206,13 @@
 	.center-count {
 		font-size: 28px;
 		font-weight: 700;
-		fill: hsl(var(--foreground));
+		fill: hsl(var(--color-foreground));
 		text-anchor: middle;
 	}
 
 	.center-label {
 		font-size: 12px;
-		fill: hsl(var(--muted-foreground));
+		fill: hsl(var(--color-muted-foreground));
 		text-anchor: middle;
 	}
 
@@ -236,7 +236,7 @@
 
 	.legend-item:hover,
 	.legend-item.active {
-		background: hsl(var(--muted) / 0.3);
+		background: hsl(var(--color-muted) / 0.3);
 	}
 
 	.legend-color {
@@ -248,13 +248,13 @@
 
 	.legend-label {
 		font-size: 0.875rem;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		flex: 1;
 	}
 
 	.legend-count {
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/packages/shared-ui/src/charts/ProgressBars.svelte b/packages/shared-ui/src/charts/ProgressBars.svelte
index 21692ec04..1e89272d3 100644
--- a/packages/shared-ui/src/charts/ProgressBars.svelte
+++ b/packages/shared-ui/src/charts/ProgressBars.svelte
@@ -85,13 +85,13 @@
 	.progress-title {
 		font-size: 1rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0 0 1rem 0;
 	}
 
 	.no-data {
 		font-size: 0.875rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		text-align: center;
 		padding: 2rem;
 	}
@@ -130,7 +130,7 @@
 
 	.name-text {
 		font-size: 0.875rem;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -138,7 +138,7 @@
 
 	.progress-stats {
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		flex-shrink: 0;
 	}
 
@@ -151,7 +151,7 @@
 	.progress-bar {
 		flex: 1;
 		height: 8px;
-		background: hsl(var(--muted) / 0.3);
+		background: hsl(var(--color-muted) / 0.3);
 		border-radius: 4px;
 		overflow: hidden;
 		display: flex;
@@ -184,7 +184,7 @@
 	.percentage {
 		font-size: 0.75rem;
 		font-weight: 600;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		width: 36px;
 		text-align: right;
 		flex-shrink: 0;
diff --git a/packages/shared-ui/src/charts/StatisticsSkeleton.svelte b/packages/shared-ui/src/charts/StatisticsSkeleton.svelte
index e50ea20dd..7e0e23c84 100644
--- a/packages/shared-ui/src/charts/StatisticsSkeleton.svelte
+++ b/packages/shared-ui/src/charts/StatisticsSkeleton.svelte
@@ -143,8 +143,8 @@
 		align-items: center;
 		gap: 1rem;
 		padding: 1rem;
-		background: hsl(var(--card));
-		border: 1px solid hsl(var(--border));
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 1rem;
 	}
 
@@ -162,8 +162,8 @@
 	}
 
 	.chart-card {
-		background: hsl(var(--card));
-		border: 1px solid hsl(var(--border));
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 1rem;
 		padding: 1.25rem;
 	}
@@ -265,8 +265,8 @@
 		flex-direction: column;
 		gap: 0.375rem;
 		padding: 1rem;
-		background: hsl(var(--card));
-		border: 1px solid hsl(var(--border));
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 1rem;
 	}
 </style>
diff --git a/packages/shared-ui/src/charts/StatsGrid.svelte b/packages/shared-ui/src/charts/StatsGrid.svelte
index 49d1ffea9..d23057011 100644
--- a/packages/shared-ui/src/charts/StatsGrid.svelte
+++ b/packages/shared-ui/src/charts/StatsGrid.svelte
@@ -123,12 +123,12 @@
 		font-size: 1.5rem;
 		font-weight: 700;
 		line-height: 1.2;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.stat-label {
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
diff --git a/packages/shared-ui/src/charts/TrendLineChart.svelte b/packages/shared-ui/src/charts/TrendLineChart.svelte
index 68d0143e1..6766a6056 100644
--- a/packages/shared-ui/src/charts/TrendLineChart.svelte
+++ b/packages/shared-ui/src/charts/TrendLineChart.svelte
@@ -169,7 +169,7 @@
 	.chart-title {
 		font-size: 1rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0 0 1rem 0;
 	}
 
@@ -180,7 +180,7 @@
 	}
 
 	.grid-line {
-		stroke: hsl(var(--muted) / 0.3);
+		stroke: hsl(var(--color-muted) / 0.3);
 		stroke-width: 1;
 		stroke-dasharray: 4 4;
 	}
@@ -194,25 +194,25 @@
 	}
 
 	.gradient-start {
-		stop-color: hsl(var(--primary));
+		stop-color: hsl(var(--color-primary));
 		stop-opacity: 0.3;
 	}
 
 	.gradient-end {
-		stop-color: hsl(var(--primary));
+		stop-color: hsl(var(--color-primary));
 		stop-opacity: 0.05;
 	}
 
 	.line-path {
 		fill: none;
-		stroke: hsl(var(--primary));
+		stroke: hsl(var(--color-primary));
 		stroke-width: 2.5;
 		stroke-linecap: round;
 		stroke-linejoin: round;
 	}
 
 	.data-point {
-		fill: hsl(var(--primary));
+		fill: hsl(var(--color-primary));
 		stroke: white;
 		stroke-width: 2;
 		cursor: pointer;
@@ -229,13 +229,13 @@
 
 	.y-label {
 		font-size: 10px;
-		fill: hsl(var(--muted-foreground));
+		fill: hsl(var(--color-muted-foreground));
 		text-anchor: end;
 	}
 
 	.x-label {
 		font-size: 10px;
-		fill: hsl(var(--muted-foreground));
+		fill: hsl(var(--color-muted-foreground));
 		text-anchor: middle;
 	}
 </style>
diff --git a/packages/shared-ui/src/molecules/loaders/AppLoadingSkeleton.svelte b/packages/shared-ui/src/molecules/loaders/AppLoadingSkeleton.svelte
index b30ea6861..0ad7e759a 100644
--- a/packages/shared-ui/src/molecules/loaders/AppLoadingSkeleton.svelte
+++ b/packages/shared-ui/src/molecules/loaders/AppLoadingSkeleton.svelte
@@ -209,7 +209,7 @@
 <style>
 	.app-loading-skeleton {
 		min-height: 100vh;
-		background: hsl(var(--background));
+		background: hsl(var(--color-background));
 	}
 
 	.app-loading-skeleton.sidebar-layout {
@@ -223,7 +223,7 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 1rem 2rem;
-		border-bottom: 1px solid hsl(var(--border));
+		border-bottom: 1px solid hsl(var(--color-border));
 	}
 
 	.header-nav {
@@ -273,7 +273,7 @@
 	.centered-card {
 		width: 100%;
 		max-width: 400px;
-		background: hsl(var(--card));
+		background: hsl(var(--color-card));
 		border-radius: 16px;
 		padding: 1.5rem;
 	}
@@ -305,14 +305,14 @@
 
 	.sidebar-skeleton {
 		width: 16rem;
-		border-right: 1px solid hsl(var(--border));
-		background: hsl(var(--card));
+		border-right: 1px solid hsl(var(--color-border));
+		background: hsl(var(--color-card));
 		padding: 1rem;
 	}
 
 	.sidebar-header {
 		padding-bottom: 1rem;
-		border-bottom: 1px solid hsl(var(--border));
+		border-bottom: 1px solid hsl(var(--color-border));
 		margin-bottom: 1rem;
 	}
 
@@ -389,8 +389,8 @@
 		align-items: center;
 		gap: 0.75rem;
 		padding: 0.875rem 1rem;
-		background: hsl(var(--card));
-		border: 1px solid hsl(var(--border));
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 12px;
 	}
 
@@ -425,8 +425,8 @@
 		align-items: center;
 		gap: 1rem;
 		padding: 1rem;
-		background: hsl(var(--card));
-		border: 1px solid hsl(var(--border));
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 12px;
 	}
 
diff --git a/packages/shared-ui/src/organisms/network/NetworkControls.svelte b/packages/shared-ui/src/organisms/network/NetworkControls.svelte
index 6c888db5c..55c369131 100644
--- a/packages/shared-ui/src/organisms/network/NetworkControls.svelte
+++ b/packages/shared-ui/src/organisms/network/NetworkControls.svelte
@@ -319,10 +319,10 @@
 		align-items: center;
 		gap: 0.75rem;
 		padding: 0.75rem 1rem;
-		background: hsl(var(--card) / 0.8);
+		background: hsl(var(--color-card) / 0.8);
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid hsl(var(--border) / 0.5);
+		border: 1px solid hsl(var(--color-border) / 0.5);
 		border-radius: 9999px;
 		flex-wrap: wrap;
 	}
@@ -339,17 +339,17 @@
 		left: 0.75rem;
 		top: 50%;
 		transform: translateY(-50%);
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		pointer-events: none;
 	}
 
 	.search-input {
 		width: 100%;
 		padding: 0.5rem 2rem 0.5rem 2.5rem;
-		border: 1px solid hsl(var(--border));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.5rem;
-		background: hsl(var(--background));
-		color: hsl(var(--foreground));
+		background: hsl(var(--color-background));
+		color: hsl(var(--color-foreground));
 		font-size: 0.875rem;
 		transition:
 			border-color 0.2s,
@@ -358,12 +358,12 @@
 
 	.search-input:focus {
 		outline: none;
-		border-color: hsl(var(--primary));
-		box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1);
+		border-color: hsl(var(--color-primary));
+		box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.1);
 	}
 
 	.search-input::placeholder {
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.clear-btn {
@@ -374,7 +374,7 @@
 		padding: 0.25rem;
 		background: none;
 		border: none;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		border-radius: 0.25rem;
 		display: flex;
@@ -383,17 +383,17 @@
 	}
 
 	.clear-btn:hover {
-		color: hsl(var(--foreground));
-		background: hsl(var(--muted));
+		color: hsl(var(--color-foreground));
+		background: hsl(var(--color-muted));
 	}
 
 	.control-btn {
 		position: relative;
 		padding: 0.5rem;
-		background: hsl(var(--background));
-		border: 1px solid hsl(var(--border));
+		background: hsl(var(--color-background));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.5rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		cursor: pointer;
 		display: flex;
 		align-items: center;
@@ -402,14 +402,14 @@
 	}
 
 	.control-btn:hover {
-		background: hsl(var(--muted));
-		color: hsl(var(--foreground));
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-foreground));
 	}
 
 	.control-btn.active {
-		background: hsl(var(--primary) / 0.1);
-		border-color: hsl(var(--primary));
-		color: hsl(var(--primary));
+		background: hsl(var(--color-primary) / 0.1);
+		border-color: hsl(var(--color-primary));
+		color: hsl(var(--color-primary));
 	}
 
 	.filter-badge {
@@ -418,7 +418,7 @@
 		right: -2px;
 		width: 8px;
 		height: 8px;
-		background: hsl(var(--primary));
+		background: hsl(var(--color-primary));
 		border-radius: 50%;
 	}
 
@@ -426,7 +426,7 @@
 		display: flex;
 		gap: 0.25rem;
 		padding-left: 0.5rem;
-		border-left: 1px solid hsl(var(--border));
+		border-left: 1px solid hsl(var(--color-border));
 	}
 
 	.stats {
@@ -435,7 +435,7 @@
 		gap: 0.5rem;
 		margin-left: auto;
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.stat-divider {
@@ -446,10 +446,10 @@
 	.filter-panel {
 		margin-top: 0.5rem;
 		padding: 0.75rem 1rem;
-		background: hsl(var(--card) / 0.8);
+		background: hsl(var(--color-card) / 0.8);
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid hsl(var(--border) / 0.5);
+		border: 1px solid hsl(var(--color-border) / 0.5);
 		border-radius: 1rem;
 	}
 
@@ -470,22 +470,22 @@
 	.filter-label {
 		font-size: 0.75rem;
 		font-weight: 500;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.filter-select {
 		padding: 0.5rem 0.75rem;
-		border: 1px solid hsl(var(--border));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.5rem;
-		background: hsl(var(--background));
-		color: hsl(var(--foreground));
+		background: hsl(var(--color-background));
+		color: hsl(var(--color-foreground));
 		font-size: 0.875rem;
 		cursor: pointer;
 	}
 
 	.filter-select:focus {
 		outline: none;
-		border-color: hsl(var(--primary));
+		border-color: hsl(var(--color-primary));
 	}
 
 	.clear-filters-btn {
@@ -493,17 +493,17 @@
 		align-items: center;
 		gap: 0.25rem;
 		padding: 0.5rem 0.75rem;
-		background: hsl(var(--destructive) / 0.1);
-		border: 1px solid hsl(var(--destructive) / 0.2);
+		background: hsl(var(--color-error) / 0.1);
+		border: 1px solid hsl(var(--color-error) / 0.2);
 		border-radius: 0.5rem;
-		color: hsl(var(--destructive));
+		color: hsl(var(--color-error));
 		font-size: 0.875rem;
 		cursor: pointer;
 		transition: all 0.2s;
 	}
 
 	.clear-filters-btn:hover {
-		background: hsl(var(--destructive) / 0.15);
+		background: hsl(var(--color-error) / 0.15);
 	}
 
 	/* Strength slider */
@@ -515,7 +515,7 @@
 		width: 100%;
 		height: 6px;
 		border-radius: 3px;
-		background: hsl(var(--muted));
+		background: hsl(var(--color-muted));
 		appearance: none;
 		cursor: pointer;
 	}
@@ -525,7 +525,7 @@
 		width: 16px;
 		height: 16px;
 		border-radius: 50%;
-		background: hsl(var(--primary));
+		background: hsl(var(--color-primary));
 		cursor: pointer;
 		transition: transform 0.1s;
 	}
@@ -539,7 +539,7 @@
 		height: 16px;
 		border: none;
 		border-radius: 50%;
-		background: hsl(var(--primary));
+		background: hsl(var(--color-primary));
 		cursor: pointer;
 	}
 
@@ -547,17 +547,17 @@
 	.keyboard-help {
 		margin-top: 0.5rem;
 		padding: 0.75rem 1rem;
-		background: hsl(var(--card) / 0.8);
+		background: hsl(var(--color-card) / 0.8);
 		backdrop-filter: blur(12px);
 		-webkit-backdrop-filter: blur(12px);
-		border: 1px solid hsl(var(--border) / 0.5);
+		border: 1px solid hsl(var(--color-border) / 0.5);
 		border-radius: 1rem;
 	}
 
 	.keyboard-help-title {
 		font-size: 0.75rem;
 		font-weight: 600;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		margin-bottom: 0.5rem;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
@@ -581,18 +581,18 @@
 		justify-content: center;
 		min-width: 1.75rem;
 		padding: 0.25rem 0.5rem;
-		background: hsl(var(--muted));
-		border: 1px solid hsl(var(--border));
+		background: hsl(var(--color-muted));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.375rem;
 		font-family: monospace;
 		font-size: 0.75rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.shortcut-desc {
 		font-size: 0.8125rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	@media (max-width: 640px) {
diff --git a/packages/shared-ui/src/organisms/network/NetworkGraph.svelte b/packages/shared-ui/src/organisms/network/NetworkGraph.svelte
index 3561cec77..ace05fb12 100644
--- a/packages/shared-ui/src/organisms/network/NetworkGraph.svelte
+++ b/packages/shared-ui/src/organisms/network/NetworkGraph.svelte
@@ -375,7 +375,12 @@
 
 						<!-- Favorite indicator -->
 						{#if node.isFavorite}
-							<circle cx={badgeOffset} cy={-badgeOffset} r="10" fill="hsl(var(--background))" />
+							<circle
+								cx={badgeOffset}
+								cy={-badgeOffset}
+								r="10"
+								fill="hsl(var(--color-background))"
+							/>
 							<text
 								x={badgeOffset}
 								y={-badgeOffset}
@@ -389,7 +394,7 @@
 
 						<!-- Connection count badge -->
 						{#if node.connectionCount > 0}
-							<circle cx={-badgeOffset} cy={-badgeOffset} r="12" fill="hsl(var(--primary))" />
+							<circle cx={-badgeOffset} cy={-badgeOffset} r="12" fill="hsl(var(--color-primary))" />
 							<text
 								x={-badgeOffset}
 								y={-badgeOffset}
@@ -479,7 +484,7 @@
 		height: 100%;
 		position: relative;
 		overflow: hidden;
-		background: hsl(var(--background));
+		background: hsl(var(--color-background));
 	}
 
 	.network-graph-svg {
@@ -493,7 +498,7 @@
 
 	/* Links */
 	.link {
-		stroke: hsl(var(--muted-foreground) / 0.3);
+		stroke: hsl(var(--color-muted-foreground) / 0.3);
 		transition:
 			stroke 0.2s,
 			stroke-width 0.2s,
@@ -501,7 +506,7 @@
 	}
 
 	.link.highlighted {
-		stroke: hsl(var(--primary));
+		stroke: hsl(var(--color-primary));
 		stroke-width: 3 !important;
 	}
 
@@ -510,7 +515,7 @@
 	}
 
 	.link.hovered {
-		stroke: hsl(var(--primary));
+		stroke: hsl(var(--color-primary));
 		stroke-width: 3 !important;
 	}
 
@@ -529,12 +534,12 @@
 	}
 
 	.node.selected .node-circle {
-		stroke: hsl(var(--primary));
+		stroke: hsl(var(--color-primary));
 		stroke-width: 4;
 	}
 
 	.node.connected .node-circle {
-		stroke: hsl(var(--primary) / 0.5);
+		stroke: hsl(var(--color-primary) / 0.5);
 		stroke-width: 2;
 	}
 
@@ -556,13 +561,13 @@
 	}
 
 	.node-label {
-		fill: hsl(var(--foreground));
+		fill: hsl(var(--color-foreground));
 		pointer-events: none;
 		user-select: none;
 	}
 
 	.node-subtitle {
-		fill: hsl(var(--muted-foreground));
+		fill: hsl(var(--color-muted-foreground));
 		pointer-events: none;
 		user-select: none;
 	}
@@ -585,12 +590,12 @@
 	.empty-title {
 		font-size: 1.25rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin-bottom: 0.5rem;
 	}
 
 	.empty-description {
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		max-width: 300px;
 		line-height: 1.5;
 	}
@@ -600,10 +605,10 @@
 		position: absolute;
 		transform: translate(-50%, -100%) translateY(-12px);
 		padding: 0.75rem 1rem;
-		background: hsl(var(--popover));
-		border: 1px solid hsl(var(--border));
+		background: hsl(var(--color-card));
+		border: 1px solid hsl(var(--color-border));
 		border-radius: 0.75rem;
-		box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
+		box-shadow: 0 4px 12px hsl(var(--color-foreground) / 0.1);
 		pointer-events: none;
 		z-index: 100;
 		min-width: 200px;
@@ -618,11 +623,11 @@
 		margin-bottom: 0.5rem;
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.tooltip-arrow {
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.tooltip-strength {
@@ -634,25 +639,25 @@
 	}
 
 	.strength-label {
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.strength-value {
 		font-weight: 600;
-		color: hsl(var(--primary));
+		color: hsl(var(--color-primary));
 	}
 
 	.strength-bar {
 		flex: 1;
 		height: 4px;
-		background: hsl(var(--muted));
+		background: hsl(var(--color-muted));
 		border-radius: 2px;
 		overflow: hidden;
 	}
 
 	.strength-fill {
 		height: 100%;
-		background: hsl(var(--primary));
+		background: hsl(var(--color-primary));
 		border-radius: 2px;
 		transition: width 0.2s;
 	}
@@ -667,11 +672,11 @@
 		display: inline-flex;
 		align-items: center;
 		padding: 0.25rem 0.625rem;
-		background: hsl(var(--primary) / 0.1);
-		border: 1px solid hsl(var(--primary) / 0.2);
+		background: hsl(var(--color-primary) / 0.1);
+		border: 1px solid hsl(var(--color-primary) / 0.2);
 		border-radius: 9999px;
 		font-size: 0.75rem;
 		font-weight: 500;
-		color: hsl(var(--primary));
+		color: hsl(var(--color-primary));
 	}
 </style>
diff --git a/packages/shared-ui/src/pages/ProfilePage.svelte b/packages/shared-ui/src/pages/ProfilePage.svelte
index a4dd22263..92c5360fc 100644
--- a/packages/shared-ui/src/pages/ProfilePage.svelte
+++ b/packages/shared-ui/src/pages/ProfilePage.svelte
@@ -360,19 +360,19 @@
 	.profile-page__avatar-initials {
 		font-size: 1.5rem;
 		font-weight: 600;
-		color: hsl(var(--primary, 221 83% 53%));
+		color: hsl(var(--color-primary, 221 83% 53%));
 	}
 
 	.profile-page__title {
 		font-size: 1.875rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0 0 0.5rem 0;
 	}
 
 	.profile-page__subtitle {
 		font-size: 1rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		margin: 0;
 	}
 
@@ -383,7 +383,7 @@
 	.profile-page__section-title {
 		font-size: 1.125rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0 0 1rem 0;
 	}
 
@@ -434,7 +434,7 @@
 	.profile-page__info-icon svg {
 		width: 1.25rem;
 		height: 1.25rem;
-		color: hsl(var(--primary, 221 83% 53%));
+		color: hsl(var(--color-primary, 221 83% 53%));
 	}
 
 	.profile-page__info-content {
@@ -447,13 +447,13 @@
 	.profile-page__info-label {
 		font-size: 0.75rem;
 		font-weight: 500;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.profile-page__info-value {
 		font-size: 0.9375rem;
 		font-weight: 500;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		word-break: break-word;
 	}
 
@@ -479,7 +479,7 @@
 		transition: all 0.2s ease;
 		font-size: 0.9375rem;
 		font-weight: 500;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		text-align: left;
 	}
 
@@ -501,7 +501,7 @@
 		width: 1.25rem;
 		height: 1.25rem;
 		flex-shrink: 0;
-		color: hsl(var(--primary, 221 83% 53%));
+		color: hsl(var(--color-primary, 221 83% 53%));
 	}
 
 	.profile-page__action-btn--secondary {
@@ -513,7 +513,7 @@
 	}
 
 	.profile-page__action-btn--secondary svg {
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.profile-page__action-btn--danger {
@@ -533,7 +533,7 @@
 	.profile-page__warning {
 		margin: 0.5rem 0 0 0;
 		font-size: 0.75rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		padding-left: 0.5rem;
 	}
 </style>
diff --git a/packages/shared-ui/src/settings/GlobalSettingsSection.svelte b/packages/shared-ui/src/settings/GlobalSettingsSection.svelte
index 6722093b4..084603826 100644
--- a/packages/shared-ui/src/settings/GlobalSettingsSection.svelte
+++ b/packages/shared-ui/src/settings/GlobalSettingsSection.svelte
@@ -118,7 +118,7 @@
 
 	<SettingsCard>
 		<div class="p-5">
-			<p class="text-sm text-[hsl(var(--muted-foreground))] mb-6">{description}</p>
+			<p class="text-sm text-[hsl(var(--color-muted-foreground))] mb-6">{description}</p>
 
 			<div class="space-y-6">
 				{#if showNavVisibility && appId && navItems.length > 0}
@@ -132,19 +132,19 @@
 					<!-- Theme Settings -->
 					<div
 						class="space-y-4 {showNavVisibility && appId
-							? 'pt-4 border-t border-[hsl(var(--border))]'
+							? 'pt-4 border-t border-[hsl(var(--color-border))]'
 							: ''}"
 					>
 						<h3
-							class="text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wider"
+							class="text-xs font-semibold text-[hsl(var(--color-muted-foreground))] uppercase tracking-wider"
 						>
 							Erscheinungsbild
 						</h3>
 
 						<div class="flex items-center justify-between py-2">
 							<div>
-								<p class="font-medium text-[hsl(var(--foreground))]">Farbmodus</p>
-								<p class="text-sm text-[hsl(var(--muted-foreground))]">
+								<p class="font-medium text-[hsl(var(--color-foreground))]">Farbmodus</p>
+								<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
 									Hell, Dunkel oder automatisch
 								</p>
 							</div>
@@ -153,8 +153,8 @@
 									<button
 										class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors {userSettings
 											.globalSettings.theme.mode === mode
-											? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
-											: 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted))]/80 text-[hsl(var(--foreground))]'}"
+											? 'bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))]'
+											: 'bg-[hsl(var(--color-muted))] hover:bg-[hsl(var(--color-muted))]/80 text-[hsl(var(--color-foreground))]'}"
 										onclick={() => handleThemeModeChange(mode as ThemeMode)}
 									>
 										{mode === 'light' ? 'Hell' : mode === 'dark' ? 'Dunkel' : 'System'}
@@ -164,11 +164,11 @@
 						</div>
 
 						<div
-							class="flex items-center justify-between py-2 border-t border-[hsl(var(--border))]"
+							class="flex items-center justify-between py-2 border-t border-[hsl(var(--color-border))]"
 						>
 							<div>
-								<p class="font-medium text-[hsl(var(--foreground))]">Farbschema</p>
-								<p class="text-sm text-[hsl(var(--muted-foreground))]">
+								<p class="font-medium text-[hsl(var(--color-foreground))]">Farbschema</p>
+								<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
 									Akzentfarbe der Benutzeroberfläche
 								</p>
 							</div>
@@ -177,7 +177,7 @@
 									<button
 										class="w-7 h-7 rounded-full transition-all {scheme.color} {userSettings
 											.globalSettings.theme.colorScheme === scheme.id
-											? 'ring-2 ring-offset-2 ring-[hsl(var(--primary))]'
+											? 'ring-2 ring-offset-2 ring-[hsl(var(--color-primary))]'
 											: 'hover:scale-110'}"
 										onclick={() => handleColorSchemeChange(scheme.id)}
 										title={scheme.label}
@@ -192,19 +192,19 @@
 					<!-- Language Settings -->
 					<div
 						class="space-y-4 {showTheme || (showNavVisibility && appId)
-							? 'pt-4 border-t border-[hsl(var(--border))]'
+							? 'pt-4 border-t border-[hsl(var(--color-border))]'
 							: ''}"
 					>
 						<h3
-							class="text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wider"
+							class="text-xs font-semibold text-[hsl(var(--color-muted-foreground))] uppercase tracking-wider"
 						>
 							Sprache
 						</h3>
 
 						<div class="flex items-center justify-between py-2">
 							<div>
-								<p class="font-medium text-[hsl(var(--foreground))]">Anzeigesprache</p>
-								<p class="text-sm text-[hsl(var(--muted-foreground))]">
+								<p class="font-medium text-[hsl(var(--color-foreground))]">Anzeigesprache</p>
+								<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
 									Sprache der Benutzeroberfläche
 								</p>
 							</div>
@@ -213,8 +213,8 @@
 									<button
 										class="px-2.5 py-1.5 text-sm font-medium rounded-lg transition-colors {userSettings
 											.globalSettings.locale === lang.id
-											? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
-											: 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted))]/80 text-[hsl(var(--foreground))]'}"
+											? 'bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))]'
+											: 'bg-[hsl(var(--color-muted))] hover:bg-[hsl(var(--color-muted))]/80 text-[hsl(var(--color-foreground))]'}"
 										onclick={() => handleLocaleChange(lang.id)}
 									>
 										{lang.label}
@@ -229,11 +229,11 @@
 					<!-- General Settings -->
 					<div
 						class="space-y-4 {showLanguage || showTheme || (showNavVisibility && appId)
-							? 'pt-4 border-t border-[hsl(var(--border))]'
+							? 'pt-4 border-t border-[hsl(var(--color-border))]'
 							: ''}"
 					>
 						<h3
-							class="text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wider"
+							class="text-xs font-semibold text-[hsl(var(--color-muted-foreground))] uppercase tracking-wider"
 						>
 							Allgemein
 						</h3>
@@ -242,13 +242,13 @@
 							<!-- Start Page Selector -->
 							<div class="flex items-center justify-between py-2">
 								<div>
-									<p class="font-medium text-[hsl(var(--foreground))]">Startseite</p>
-									<p class="text-sm text-[hsl(var(--muted-foreground))]">
+									<p class="font-medium text-[hsl(var(--color-foreground))]">Startseite</p>
+									<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
 										Welche Seite beim Öffnen der App angezeigt wird
 									</p>
 								</div>
 								<select
-									class="px-3 py-1.5 text-sm font-medium rounded-lg bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] border-none cursor-pointer appearance-none pr-8 bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E')] bg-no-repeat bg-[right_0.5rem_center] bg-[length:1rem]"
+									class="px-3 py-1.5 text-sm font-medium rounded-lg bg-[hsl(var(--color-muted))] text-[hsl(var(--color-foreground))] border-none cursor-pointer appearance-none pr-8 bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E')] bg-no-repeat bg-[right_0.5rem_center] bg-[length:1rem]"
 									value={currentStartPage}
 									onchange={handleStartPageChange}
 								>
@@ -264,12 +264,12 @@
 						<!-- Week Start Day -->
 						<div
 							class="flex items-center justify-between py-2 {appId && availableRoutes.length > 1
-								? 'border-t border-[hsl(var(--border))]'
+								? 'border-t border-[hsl(var(--color-border))]'
 								: ''}"
 						>
 							<div>
-								<p class="font-medium text-[hsl(var(--foreground))]">Wochenstart</p>
-								<p class="text-sm text-[hsl(var(--muted-foreground))]">
+								<p class="font-medium text-[hsl(var(--color-foreground))]">Wochenstart</p>
+								<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
 									Erster Tag der Woche in Kalendern
 								</p>
 							</div>
@@ -277,8 +277,8 @@
 								<button
 									class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors {userSettings
 										.general?.weekStartsOn === 'monday'
-										? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
-										: 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted))]/80 text-[hsl(var(--foreground))]'}"
+										? 'bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))]'
+										: 'bg-[hsl(var(--color-muted))] hover:bg-[hsl(var(--color-muted))]/80 text-[hsl(var(--color-foreground))]'}"
 									onclick={() => handleWeekStartChange('monday')}
 								>
 									Montag
@@ -286,8 +286,8 @@
 								<button
 									class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors {userSettings
 										.general?.weekStartsOn === 'sunday'
-										? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
-										: 'bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted))]/80 text-[hsl(var(--foreground))]'}"
+										? 'bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))]'
+										: 'bg-[hsl(var(--color-muted))] hover:bg-[hsl(var(--color-muted))]/80 text-[hsl(var(--color-foreground))]'}"
 									onclick={() => handleWeekStartChange('sunday')}
 								>
 									Sonntag
@@ -297,18 +297,18 @@
 
 						<!-- Sounds Toggle -->
 						<div
-							class="flex items-center justify-between py-2 border-t border-[hsl(var(--border))]"
+							class="flex items-center justify-between py-2 border-t border-[hsl(var(--color-border))]"
 						>
 							<div>
-								<p class="font-medium text-[hsl(var(--foreground))]">Sounds</p>
-								<p class="text-sm text-[hsl(var(--muted-foreground))]">
+								<p class="font-medium text-[hsl(var(--color-foreground))]">Sounds</p>
+								<p class="text-sm text-[hsl(var(--color-muted-foreground))]">
 									Sound-Effekte in allen Apps
 								</p>
 							</div>
 							<button
 								class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors {(userSettings
 									.general?.soundsEnabled ?? true)
-									? 'bg-[hsl(var(--primary))]'
+									? 'bg-[hsl(var(--color-primary))]'
 									: 'bg-gray-200 dark:bg-gray-700'}"
 								onclick={() => handleSoundsChange(!(userSettings.general?.soundsEnabled ?? true))}
 								aria-label="Toggle sound effects"
@@ -326,9 +326,9 @@
 			</div>
 
 			{#if userSettings.syncing}
-				<div class="mt-4 flex items-center gap-2 text-sm text-[hsl(var(--muted-foreground))]">
+				<div class="mt-4 flex items-center gap-2 text-sm text-[hsl(var(--color-muted-foreground))]">
 					<div
-						class="h-4 w-4 animate-spin rounded-full border-2 border-[hsl(var(--primary))] border-t-transparent"
+						class="h-4 w-4 animate-spin rounded-full border-2 border-[hsl(var(--color-primary))] border-t-transparent"
 					></div>
 					<span>Synchronisiere...</span>
 				</div>
diff --git a/packages/shared-ui/src/settings/NavVisibilitySettings.svelte b/packages/shared-ui/src/settings/NavVisibilitySettings.svelte
index 8bf261d5b..70818955a 100644
--- a/packages/shared-ui/src/settings/NavVisibilitySettings.svelte
+++ b/packages/shared-ui/src/settings/NavVisibilitySettings.svelte
@@ -148,11 +148,11 @@
 	<div class="space-y-4">
 		<div>
 			<h3
-				class="text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wider"
+				class="text-xs font-semibold text-[hsl(var(--color-muted-foreground))] uppercase tracking-wider"
 			>
 				Navigation anpassen
 			</h3>
-			<p class="text-sm text-[hsl(var(--muted-foreground))] mt-1">
+			<p class="text-sm text-[hsl(var(--color-muted-foreground))] mt-1">
 				Versteckte Seiten bleiben über die URL erreichbar
 			</p>
 		</div>
@@ -162,12 +162,12 @@
 				{@const hidden = hiddenItems.includes(item.href)}
 				{@const IconComponent = item.icon ? phosphorIcons[item.icon] : null}
 				<label
-					class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-[hsl(var(--muted))]/50 cursor-pointer transition-colors border border-transparent hover:border-[hsl(var(--border))]"
+					class="flex items-center justify-between py-2.5 px-3 rounded-lg hover:bg-[hsl(var(--color-muted))]/50 cursor-pointer transition-colors border border-transparent hover:border-[hsl(var(--color-border))]"
 				>
 					<span
 						class="flex items-center gap-3 text-sm {hidden
-							? 'text-[hsl(var(--muted-foreground))]'
-							: 'text-[hsl(var(--foreground))]'}"
+							? 'text-[hsl(var(--color-muted-foreground))]'
+							: 'text-[hsl(var(--color-foreground))]'}"
 					>
 						{#if IconComponent}
 							<span class="flex-shrink-0 {hidden ? 'opacity-50' : ''}">
@@ -179,7 +179,7 @@
 					<button
 						type="button"
 						class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors {!hidden
-							? 'bg-[hsl(var(--primary))]'
+							? 'bg-[hsl(var(--color-primary))]'
 							: 'bg-gray-200 dark:bg-gray-700'}"
 						onclick={() => handleToggle(item.href)}
 						aria-label={hidden ? 'Einblenden' : 'Ausblenden'}
diff --git a/packages/shared-ui/src/settings/SettingsPage.svelte b/packages/shared-ui/src/settings/SettingsPage.svelte
index fc9e66af5..5d7659d3b 100644
--- a/packages/shared-ui/src/settings/SettingsPage.svelte
+++ b/packages/shared-ui/src/settings/SettingsPage.svelte
@@ -183,7 +183,7 @@
 	.toc-title {
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0 0 1rem 0;
 		padding-bottom: 0.75rem;
 		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
@@ -205,7 +205,7 @@
 		text-align: left;
 		padding: 0.625rem 0.875rem;
 		font-size: 0.875rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		background: transparent;
 		border: none;
 		border-radius: 0.5rem;
@@ -217,13 +217,13 @@
 	}
 
 	.toc-item:hover {
-		color: hsl(var(--foreground));
-		background: hsl(var(--muted) / 0.5);
+		color: hsl(var(--color-foreground));
+		background: hsl(var(--color-muted) / 0.5);
 	}
 
 	.toc-item.active {
-		color: hsl(var(--primary));
-		background: hsl(var(--primary) / 0.12);
+		color: hsl(var(--color-primary));
+		background: hsl(var(--color-primary) / 0.12);
 		font-weight: 600;
 	}
 
diff --git a/packages/shared-ui/src/settings/SettingsSection.svelte b/packages/shared-ui/src/settings/SettingsSection.svelte
index 455ecb4b0..ece974149 100644
--- a/packages/shared-ui/src/settings/SettingsSection.svelte
+++ b/packages/shared-ui/src/settings/SettingsSection.svelte
@@ -89,7 +89,7 @@
 		justify-content: center;
 		width: 1.5rem;
 		height: 1.5rem;
-		color: hsl(var(--primary));
+		color: hsl(var(--color-primary));
 	}
 
 	.section-icon :global(svg) {
diff --git a/packages/shared-ui/src/settings/SettingsToggle.svelte b/packages/shared-ui/src/settings/SettingsToggle.svelte
index 9b439c916..ba7b67375 100644
--- a/packages/shared-ui/src/settings/SettingsToggle.svelte
+++ b/packages/shared-ui/src/settings/SettingsToggle.svelte
@@ -70,7 +70,7 @@
 		onclick={handleToggle}
 		class="relative w-12 h-7 rounded-full border flex-shrink-0 transition-all duration-200
 			{isOn
-			? 'bg-primary border-primary shadow-[0_0_0_2px_hsl(var(--primary)/0.2)] dark:shadow-[0_0_0_2px_hsl(var(--primary)/0.3)]'
+			? 'bg-primary border-primary shadow-[0_0_0_2px_hsl(var(--color-primary)/0.2)] dark:shadow-[0_0_0_2px_hsl(var(--color-primary)/0.3)]'
 			: 'bg-black/[0.08] border-black/10 dark:bg-white/[0.12] dark:border-white/[0.15]'}
 			{!disabled
 			? 'cursor-pointer hover:border-black/20 dark:hover:border-white/25'
diff --git a/packages/subscriptions/src/BillingToggle.svelte b/packages/subscriptions/src/BillingToggle.svelte
index ca46955fb..f3e103c4e 100644
--- a/packages/subscriptions/src/BillingToggle.svelte
+++ b/packages/subscriptions/src/BillingToggle.svelte
@@ -75,7 +75,7 @@
 		background: transparent;
 		cursor: pointer;
 		transition: all 0.2s ease;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.billing-toggle__button--yearly {
@@ -84,7 +84,7 @@
 
 	.billing-toggle__button--active {
 		background: rgba(255, 255, 255, 0.9);
-		color: hsl(var(--primary, 221 83% 53%));
+		color: hsl(var(--color-primary, 221 83% 53%));
 		font-weight: 600;
 		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 	}
@@ -111,6 +111,6 @@
 		font-size: 0.75rem;
 		font-weight: 600;
 		color: white;
-		background: hsl(var(--primary, 221 83% 53%));
+		background: hsl(var(--color-primary, 221 83% 53%));
 	}
 </style>
diff --git a/packages/subscriptions/src/CostCard.svelte b/packages/subscriptions/src/CostCard.svelte
index a6a761fba..4e2f4f073 100644
--- a/packages/subscriptions/src/CostCard.svelte
+++ b/packages/subscriptions/src/CostCard.svelte
@@ -75,7 +75,7 @@
 		margin: 0 0 1rem 0;
 		font-size: 1.25rem;
 		font-weight: 700;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.cost-card__list {
@@ -99,19 +99,19 @@
 		width: 1.125rem;
 		height: 1.125rem;
 		margin-right: 0.5rem;
-		color: hsl(var(--primary, 221 83% 53%));
+		color: hsl(var(--color-primary, 221 83% 53%));
 	}
 
 	.cost-card__action {
 		margin: 0;
 		font-size: 0.875rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.cost-card__cost {
 		margin: 0;
 		font-size: 1rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 </style>
diff --git a/packages/subscriptions/src/PackageCard.svelte b/packages/subscriptions/src/PackageCard.svelte
index b7255c524..ec646cbe1 100644
--- a/packages/subscriptions/src/PackageCard.svelte
+++ b/packages/subscriptions/src/PackageCard.svelte
@@ -132,7 +132,7 @@
 	}
 
 	.package-card--popular {
-		border: 2px solid hsl(var(--primary, 221 83% 53%));
+		border: 2px solid hsl(var(--color-primary, 221 83% 53%));
 	}
 
 	.package-card__badge {
@@ -144,7 +144,7 @@
 		font-size: 0.625rem;
 		font-weight: 600;
 		color: white;
-		background: hsl(var(--primary, 221 83% 53%));
+		background: hsl(var(--color-primary, 221 83% 53%));
 		z-index: 1;
 	}
 
@@ -153,7 +153,7 @@
 		text-align: center;
 		font-size: 1.125rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.package-card__grid {
@@ -191,7 +191,7 @@
 		margin: 0 0 0.125rem 0;
 		font-size: 1.25rem;
 		font-weight: 700;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		white-space: nowrap;
 	}
 
@@ -199,21 +199,21 @@
 		margin: 0;
 		font-size: 1rem;
 		font-weight: 700;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		white-space: nowrap;
 	}
 
 	.package-card__label {
 		margin: 0;
 		font-size: 0.625rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		text-align: center;
 	}
 
 	.package-card__sublabel {
 		margin: 0.125rem 0 0 0;
 		font-size: 0.5rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	@media (min-width: 640px) {
diff --git a/packages/subscriptions/src/SubscriptionButton.svelte b/packages/subscriptions/src/SubscriptionButton.svelte
index 0eb9ba4fb..908f6648b 100644
--- a/packages/subscriptions/src/SubscriptionButton.svelte
+++ b/packages/subscriptions/src/SubscriptionButton.svelte
@@ -80,7 +80,7 @@
 	.subscription-button--primary {
 		background: rgba(0, 0, 0, 0.05);
 		border: 1px solid rgba(0, 0, 0, 0.1);
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	:global(.dark) .subscription-button--primary {
@@ -99,7 +99,7 @@
 	.subscription-button--secondary {
 		background: rgba(255, 255, 255, 0.8);
 		border: 1px solid rgba(0, 0, 0, 0.1);
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	:global(.dark) .subscription-button--secondary {
@@ -116,8 +116,8 @@
 	}
 
 	.subscription-button--accent {
-		background: hsl(var(--primary, 221 83% 53%));
-		border: 1px solid hsl(var(--primary, 221 83% 53%));
+		background: hsl(var(--color-primary, 221 83% 53%));
+		border: 1px solid hsl(var(--color-primary, 221 83% 53%));
 		color: white;
 	}
 
diff --git a/packages/subscriptions/src/SubscriptionCard.svelte b/packages/subscriptions/src/SubscriptionCard.svelte
index e8b593135..f4ac78d7d 100644
--- a/packages/subscriptions/src/SubscriptionCard.svelte
+++ b/packages/subscriptions/src/SubscriptionCard.svelte
@@ -163,11 +163,11 @@
 	}
 
 	.subscription-card--current {
-		border: 2px solid hsl(var(--primary, 221 83% 53%));
+		border: 2px solid hsl(var(--color-primary, 221 83% 53%));
 	}
 
 	.subscription-card--popular {
-		border: 2px solid hsl(var(--primary, 221 83% 53%));
+		border: 2px solid hsl(var(--color-primary, 221 83% 53%));
 	}
 
 	.subscription-card__badge {
@@ -178,7 +178,7 @@
 		font-size: 0.625rem;
 		font-weight: 600;
 		color: white;
-		background: hsl(var(--primary, 221 83% 53%));
+		background: hsl(var(--color-primary, 221 83% 53%));
 		z-index: 1;
 	}
 
@@ -195,7 +195,7 @@
 		text-align: center;
 		font-size: 1.125rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.subscription-card__grid {
@@ -233,7 +233,7 @@
 		margin: 0 0 0.25rem 0;
 		font-size: 1.25rem;
 		font-weight: 700;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		white-space: nowrap;
 	}
 
@@ -241,21 +241,21 @@
 		margin: 0;
 		font-size: 1rem;
 		font-weight: 700;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		white-space: nowrap;
 	}
 
 	.subscription-card__label {
 		margin: 0;
 		font-size: 0.625rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		text-align: center;
 	}
 
 	.subscription-card__sublabel {
 		margin: 0.125rem 0 0 0;
 		font-size: 0.5rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	@media (min-width: 640px) {
diff --git a/packages/subscriptions/src/UsageCard.svelte b/packages/subscriptions/src/UsageCard.svelte
index a600dcc49..3a9a8c73d 100644
--- a/packages/subscriptions/src/UsageCard.svelte
+++ b/packages/subscriptions/src/UsageCard.svelte
@@ -116,7 +116,7 @@
 		margin: 0;
 		font-size: 1.25rem;
 		font-weight: 700;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.usage-card__value-wrapper {
@@ -139,7 +139,7 @@
 		margin: 0;
 		font-size: 1.25rem;
 		font-weight: 700;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 	}
 
 	.usage-card__progress-track {
@@ -171,7 +171,7 @@
 		margin: 0;
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.usage-card__plan {
@@ -189,6 +189,6 @@
 		text-align: center;
 		font-size: 0.875rem;
 		font-weight: 500;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 	}
 </style>
diff --git a/packages/subscriptions/src/pages/SubscriptionPage.svelte b/packages/subscriptions/src/pages/SubscriptionPage.svelte
index f679aec1f..9da2c83bd 100644
--- a/packages/subscriptions/src/pages/SubscriptionPage.svelte
+++ b/packages/subscriptions/src/pages/SubscriptionPage.svelte
@@ -195,7 +195,7 @@
 		box-shadow:
 			0 4px 6px -1px rgba(0, 0, 0, 0.1),
 			0 2px 4px -1px rgba(0, 0, 0, 0.06);
-		color: hsl(var(--primary, 221 83% 53%));
+		color: hsl(var(--color-primary, 221 83% 53%));
 	}
 
 	:global(.dark) .subscription-page__icon {
@@ -206,13 +206,13 @@
 	.subscription-page__title {
 		font-size: 1.875rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0 0 0.75rem 0;
 	}
 
 	.subscription-page__subtitle {
 		font-size: 1rem;
-		color: hsl(var(--muted-foreground));
+		color: hsl(var(--color-muted-foreground));
 		margin: 0;
 	}
 
@@ -223,7 +223,7 @@
 	.subscription-page__section-title {
 		font-size: 1.25rem;
 		font-weight: 600;
-		color: hsl(var(--foreground));
+		color: hsl(var(--color-foreground));
 		margin: 0 0 1.5rem 0;
 	}