feat(badges): cfg_json body_text_color applied in renderer

src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte

@@ -92,6 +92,7 @@ import {
     Utensils,
     Wifi
 } from '@lucide/svelte';
+import type { BadgeTemplateCfg } from '$lib/ae_events/types/ae_badge_template_cfg';
 // --- Badge type list from template ---
 // Each item: { code: string, name: string }. Drives footer display + (in controls) dropdown.
 let badge_type_code_li = $derived.by(() => {
@@ -198,9 +199,9 @@ let template_cfg = $derived.by(() => {
     const raw = $lq__event_badge_template_obj?.cfg_json;
     if (!raw) return {};
     try {
-        return typeof raw === 'string' ? JSON.parse(raw) : raw;
+        return typeof raw === 'string' ? (JSON.parse(raw) as BadgeTemplateCfg) : (raw as BadgeTemplateCfg);
     } catch {
-        return {};
+        return {} as BadgeTemplateCfg;
     }
 });
 
@@ -294,6 +295,31 @@ let qr_back_justify = $derived.by(() => {
     return map[val] ?? 'center';
 });
 
+// Body text color: can be a Tailwind `text-*` class or a hex value like `#112233`.
+let body_text_color_class = $derived.by(() => {
+    const cfg = template_cfg || {};
+    const raw = cfg?.body_text_color ?? cfg?.text_color ?? '';
+    if (!raw || typeof raw !== 'string') return '';
+    const v = raw.trim();
+    if (v.startsWith('text-')) return v;
+    // Map simple color names to Tailwind where reasonable (e.g., 'white' -> 'text-white')
+    if (/^[a-zA-Z]+$/.test(v)) {
+        const pick = v.toLowerCase();
+        const allowed = ['white','black','gray','red','blue','green','yellow','indigo','purple','pink'];
+        if (allowed.includes(pick)) return `text-${pick}`;
+    }
+    return '';
+});
+
+let body_text_color_style = $derived.by(() => {
+    const cfg = template_cfg || {};
+    const raw = cfg?.body_text_color ?? cfg?.text_color ?? '';
+    if (!raw || typeof raw !== 'string') return '';
+    const v = raw.trim();
+    if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v)) return `color: ${v};`;
+    return '';
+});
+
 /**
  * Layout-aware section heights for Element_fit_text.
  *
@@ -660,9 +686,10 @@ const code_to_icon: {
             items-center
             justify-end overflow-clip
             p-0 px-8 pb-1
-            text-white
+            {body_text_color_class || 'text-white'}
             gap-0
-            ">
+            "
+                style="{body_text_color_style}">
                 <!--
                     person_name container: explicit height from fit_heights so Element_fit_text
                     can measure overflow correctly. flex-col with justify-content distributes