From c8da2267b7e105ac75c05bc8cac12a939462f7d8 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 9 Apr 2026 12:23:55 +0200
Subject: [PATCH] fix(skilltree): define the missing branch accent colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

skilltree/types.ts has had `var(--color-branch-{intellect,body,creativity,
social,practical,mindset})` references for as long as I can grep, but those
CSS variables were never defined anywhere. Every skill in the gamified
tree was rendering inherited color (effectively invisible accent), making
the 6 branches visually indistinguishable.

Add the 6 colors as a new "domain accent" section in shared-tailwind/themes.css,
defined once at :root and never overridden by .dark or variant blocks
(they're brand-internal accents, not theme-aware — the same way cycles
keeps its brand pink literal).

  - intellect → blue (217 91% 60%) — knowledge, thinking
  - body      → red (0 84% 60%) — physical, energy
  - creativity → violet (271 91% 65%) — art, expression
  - social    → amber (38 92% 50%) — warmth, relationships
  - practical → teal (173 80% 40%) — craft, tools
  - mindset   → green (142 71% 45%) — calm, growth

Also update skilltree/types.ts to wrap the var() calls with hsl() per
the canonical convention (the values are now raw HSL channels).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/lib/modules/skilltree/types.ts   | 14 +++++++-------
 packages/shared-tailwind/src/themes.css           | 15 +++++++++++++++
 2 files changed, 22 insertions(+), 7 deletions(-)

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%;