diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 9ee189f..abb9d3c 100644
--- a/app/assets/css/main.css
+++ b/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. */
diff --git a/app/components/EventSeriesTicketCard.vue b/app/components/EventSeriesTicketCard.vue
index 1340f3c..b475430 100644
--- a/app/components/EventSeriesTicketCard.vue
+++ b/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"
-              style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
+              class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 tint-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"
-        style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
+        class="p-4 mb-6 tint-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"
-        style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
+        class="p-4 mb-6 tint-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"
-        style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
+        class="p-4 tint-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)" />
diff --git a/app/components/SeriesPassPurchase.vue b/app/components/SeriesPassPurchase.vue
index fff5fd4..8569ed5 100644
--- a/app/components/SeriesPassPurchase.vue
+++ b/app/components/SeriesPassPurchase.vue
@@ -100,8 +100,7 @@
           <!-- Member Benefits Notice -->
           <div
             v-if="passInfo.ticket.isFree && passInfo.memberInfo?.isMember"
-            class="p-4"
-            style="background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
+            class="p-4 tint-candle"
           >
             <div class="flex items-start gap-3">
               <Icon