Switch UI components to new design system tokens

Standardizes color values and styling using the new tokens:
- Replaces hardcoded colors with semantic variables
- Updates background/text/border classes for light/dark mode
- Migrates inputs to UInput/USelect/UTextarea components
- Removes redundant style declarations

app/pages/events/[id].vue

@@ -123,7 +123,6 @@
           <div v-if="event.series?.isSeriesEvent" class="mb-8">
             <EventSeriesBadge
               :title="event.series.title"
-              :description="event.series.description"
               :position="event.series.position"
               :total-events="event.series.totalEvents"
               :series-id="event.series.id"
@@ -157,6 +156,22 @@
             <h2 class="text-2xl font-bold text-ghost-100 mb-4">
               About This Event
             </h2>
+
+            <!-- Series Description -->
+            <div
+              v-if="event.series?.isSeriesEvent && event.series.description"
+              class="mb-6 p-4 bg-purple-500/5 rounded-lg border border-purple-500/20"
+            >
+              <h3
+                class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2"
+              >
+                About the {{ event.series.title }} Series
+              </h3>
+              <p class="text-ghost-200">
+                {{ event.series.description }}
+              </p>
+            </div>
+
             <p class="text-ghost-200">
               {{ event.description }}
             </p>