diff --git a/apps/mana/apps/web/src/lib/modules/skilltree/types.ts b/apps/mana/apps/web/src/lib/modules/skilltree/types.ts
index acefe7e25..1fe109d10 100644
--- a/apps/mana/apps/web/src/lib/modules/skilltree/types.ts
+++ b/apps/mana/apps/web/src/lib/modules/skilltree/types.ts
@@ -97,43 +97,43 @@ export const BRANCH_INFO: Record<
 	intellect: {
 		name: 'Intellekt',
 		icon: 'brain',
-		color: 'var(--color-branch-intellect)',
+		color: 'hsl(var(--color-branch-intellect))',
 		description: 'Wissen, Sprachen, Wissenschaft',
 	},
 	body: {
 		name: 'Körper',
 		icon: 'dumbbell',
-		color: 'var(--color-branch-body)',
+		color: 'hsl(var(--color-branch-body))',
 		description: 'Fitness, Sport, Gesundheit',
 	},
 	creativity: {
 		name: 'Kreativität',
 		icon: 'palette',
-		color: 'var(--color-branch-creativity)',
+		color: 'hsl(var(--color-branch-creativity))',
 		description: 'Kunst, Musik, Schreiben',
 	},
 	social: {
 		name: 'Sozial',
 		icon: 'users',
-		color: 'var(--color-branch-social)',
+		color: 'hsl(var(--color-branch-social))',
 		description: 'Kommunikation, Leadership, Empathie',
 	},
 	practical: {
 		name: 'Praktisch',
 		icon: 'wrench',
-		color: 'var(--color-branch-practical)',
+		color: 'hsl(var(--color-branch-practical))',
 		description: 'Handwerk, Kochen, Technologie',
 	},
 	mindset: {
 		name: 'Mindset',
 		icon: 'heart',
-		color: 'var(--color-branch-mindset)',
+		color: 'hsl(var(--color-branch-mindset))',
 		description: 'Meditation, Fokus, Resilienz',
 	},
 	custom: {
 		name: 'Eigene',
 		icon: 'star',
-		color: 'var(--color-primary)',
+		color: 'hsl(var(--color-primary))',
 		description: 'Eigene Kategorien',
 	},
 };
diff --git a/packages/shared-tailwind/src/themes.css b/packages/shared-tailwind/src/themes.css
index 065d80626..d4310be87 100644
--- a/packages/shared-tailwind/src/themes.css
+++ b/packages/shared-tailwind/src/themes.css
@@ -124,6 +124,21 @@
 	100% { transform: translateY(-10px); opacity: 0; }
 }
 
+/* ===== Domain Accent Colors =====
+   Module-internal brand accents that should NOT track the active theme
+   variant. Defined once at :root, never overridden by .dark or variant
+   blocks — they look the same regardless of light/dark/lume/ocean/etc.
+   Consumers wrap with hsl(): `color: hsl(var(--color-branch-intellect));`. */
+:root {
+	/* Skilltree — 6 skill category accents */
+	--color-branch-intellect: 217 91% 60%;   /* blue — knowledge, thinking */
+	--color-branch-body: 0 84% 60%;          /* red — physical, energy */
+	--color-branch-creativity: 271 91% 65%;  /* violet — art, expression */
+	--color-branch-social: 38 92% 50%;       /* amber — warmth, relationships */
+	--color-branch-practical: 173 80% 40%;   /* teal — craft, tools */
+	--color-branch-mindset: 142 71% 45%;     /* green — calm, growth */
+}
+
 /* ===== Default Theme (Lume Light) ===== */
 :root {
 	--color-primary: 47 95% 58%;