From dc2becf63eff579945fe7af944d2bcc66836291d Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Wed, 29 Apr 2026 18:30:29 +0100
Subject: [PATCH] fix(events): replace phantom candlelight Tailwind with
 --candle var

---
 app/components/EventSeriesTicketCard.vue | 12 ++++++++----
 app/components/SeriesPassPurchase.vue    | 10 ++++++----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/app/components/EventSeriesTicketCard.vue b/app/components/EventSeriesTicketCard.vue
index b458301..1340f3c 100644
--- a/app/components/EventSeriesTicketCard.vue
+++ b/app/components/EventSeriesTicketCard.vue
@@ -160,12 +160,16 @@
       </div>
 
       <!-- Already Registered -->
-      <div v-else-if="alreadyRegistered" class="p-4 bg-candlelight-900/20 border border-candlelight-700/30 rounded-lg">
+      <div
+        v-else-if="alreadyRegistered"
+        class="p-4"
+        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 text-candlelight-400 flex-shrink-0" />
+          <Icon name="heroicons:check-badge" class="w-6 h-6 flex-shrink-0" style="color: var(--candle)" />
           <div>
-            <div class="font-semibold text-candlelight-300 mb-1">You're Registered!</div>
-            <div class="text-sm text-candlelight-400">
+            <div class="font-semibold mb-1" style="color: var(--candle)">You're Registered!</div>
+            <div class="text-sm" style="color: var(--candle)">
               You have a series pass and are registered for all {{ totalEvents }} events.
             </div>
           </div>
diff --git a/app/components/SeriesPassPurchase.vue b/app/components/SeriesPassPurchase.vue
index 455921e..584e493 100644
--- a/app/components/SeriesPassPurchase.vue
+++ b/app/components/SeriesPassPurchase.vue
@@ -103,18 +103,20 @@
           <!-- Member Benefits Notice -->
           <div
             v-if="passInfo.ticket.isFree && passInfo.memberInfo?.isMember"
-            class="p-4 bg-candlelight-900/20 border border-candlelight-700/30 rounded-lg"
+            class="p-4"
+            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 text-candlelight-400 flex-shrink-0 mt-0.5"
+                class="w-5 h-5 flex-shrink-0 mt-0.5"
+                style="color: var(--candle)"
               />
               <div>
-                <div class="font-semibold text-candlelight-300 mb-1">
+                <div class="font-semibold mb-1" style="color: var(--candle)">
                   Member Benefit
                 </div>
-                <div class="text-sm text-candlelight-400">
+                <div class="text-sm" style="color: var(--candle)">
                   This series pass is free for Ghost Guild members!
                 </div>
               </div>