refactor(css): extract .tint-candle / .tint-ember utility classes

The candle tint (color-mix accent fill + matching solid border) was inlined
as style="" in five spots across SeriesPassPurchase and EventSeriesTicketCard.
Promote to .tint-candle / .tint-ember utility classes in main.css and replace
the inline styles with the class.

app/assets/css/main.css

@@ -248,6 +248,17 @@ p a, blockquote a {
   border-color: var(--border);
 }
 
+/* ---- ACCENT TINT BLOCKS ---- */
+/* Faint accent fill + matching solid border. Replaces inline color-mix styles. */
+.tint-candle {
+  background: color-mix(in srgb, var(--candle) 15%, transparent);
+  border: 1px solid var(--candle);
+}
+.tint-ember {
+  background: color-mix(in srgb, var(--ember) 15%, transparent);
+  border: 1px solid var(--ember);
+}
+
 /* ---- SEGMENTED CONTROL (flush dashed-border groups) ---- */
 /* Negative-margin overlap: every item keeps all 4 borders,
    siblings overlap by 1px, active item paints on top via z-index. */

app/components/EventSeriesTicketCard.vue

@@ -63,8 +63,7 @@
             class="flex items-start gap-3 p-3"
           >
             <div
-              class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
+              class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 tint-candle"
-              style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
             >
               <span class="text-sm font-bold" style="color: var(--candle)">{{ index + 1 }}</span>
             </div>
@@ -86,8 +85,7 @@
       <!-- Member Benefit Callout -->
       <div
         v-if="ticket.isFree && isMember"
-        class="p-4 mb-6"
+        class="p-4 mb-6 tint-candle"
-        style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
       >
         <div class="flex items-start gap-3">
           <Icon name="heroicons:sparkles" class="w-5 h-5 flex-shrink-0 mt-0.5" style="color: var(--candle)" />
@@ -103,8 +101,7 @@
       <!-- Public vs Member Pricing -->
       <div
         v-if="!ticket.isFree && publicPrice && ticket.type === 'member'"
-        class="p-4 mb-6"
+        class="p-4 mb-6 tint-candle"
-        style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
       >
         <div class="flex items-start gap-3">
           <Icon name="heroicons:tag" class="w-5 h-5 flex-shrink-0 mt-0.5" style="color: var(--candle)" />
@@ -162,8 +159,7 @@
       <!-- Already Registered -->
       <div
         v-else-if="alreadyRegistered"
-        class="p-4"
+        class="p-4 tint-candle"
-        style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
       >
         <div class="flex items-start gap-3">
           <Icon name="heroicons:check-badge" class="w-6 h-6 flex-shrink-0" style="color: var(--candle)" />

app/components/SeriesPassPurchase.vue

@@ -100,8 +100,7 @@
           <!-- Member Benefits Notice -->
           <div
             v-if="passInfo.ticket.isFree && passInfo.memberInfo?.isMember"
-            class="p-4"
+            class="p-4 tint-candle"
-            style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
           >
             <div class="flex items-start gap-3">
               <Icon