chore(badges): hex-only body_text_color + form color picker; renderer default black

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

@@ -296,28 +296,17 @@ let qr_back_justify = $derived.by(() => {
 });
 
 // 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 '';
-});
-
+// Prefer an explicit hex fallback stored as `body_text_color_hex` in `cfg_json`.
+// The `body_text_color` key may still contain a Tailwind class for styling
+// when the compiled CSS includes it; the hex ensures correct rendering when
+// classes are purged at build-time.
 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 '';
+    if (!raw || typeof raw !== 'string') return 'color: #000000;';
     const v = raw.trim();
     if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v)) return `color: ${v};`;
-    return '';
+    return 'color: #000000;';
 });
 
 /**
@@ -686,7 +675,7 @@ const code_to_icon: {
             items-center
             justify-end overflow-clip
             p-0 px-8 pb-1
-            {body_text_color_class || 'text-white'}
+            text-black
             gap-0
             "
                 style="{body_text_color_style}">