refactor: migrate from hardcoded hex colors to Tailwind CSS color tokens

Replace all hardcoded hex color values with semantic Tailwind design tokens:
- `#bb5b3e` → `accent`
- `#a34a31` → `accent-content` / `primary-dark`
- `#4a3f3b`, `#89726c` → `zinc-800`, `zinc-500`
- `#e5ded7`, `#faf6f3` → `zinc-300`, `zinc-50`
- `#8

resources/js/components/StationCard.vue

@@ -1,16 +1,16 @@
 <template>
-    <div class="flex items-center justify-between p-4 bg-white rounded-xl border border-[#e5ded7] hover:border-[#bb5b3e] transition-colors">
+    <div class="flex items-center justify-between p-4 bg-white rounded-xl border border-zinc-300 hover:border-accent transition-colors">
         <div class="flex items-center gap-3 min-w-0">
-            <div class="w-10 h-10 rounded-lg bg-[#bb5b3e]/10 flex items-center justify-center flex-shrink-0">
+            <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center flex-shrink-0">
                 <iconify-icon
                     :icon="station.is_supermarket ? 'lucide:shopping-cart' : 'lucide:fuel'"
                     style="font-size:1.25rem"
-                    class="text-[#bb5b3e]"
+                    class="text-accent"
                 ></iconify-icon>
             </div>
             <div class="min-w-0">
-                <p class="font-bold text-[#4a3f3b] truncate">{{ station.name }}</p>
-                <p class="text-xs text-[#89726c]">{{ station.distance_km.toFixed(1) }} km away · Updated {{ updatedAgo }}</p>
+                <p class="font-bold text-zinc-800 truncate">{{ station.name }}</p>
+                <p class="text-xs text-zinc-500">{{ station.distance_km.toFixed(1) }} km away · Updated {{ updatedAgo }}</p>
             </div>
         </div>
         <div class="text-right flex-shrink-0 ml-4">
@@ -28,10 +28,10 @@ const props = defineProps({
 })
 
 const priceColor = computed(() => {
-    if (!props.lowestPrice) return 'text-[#4a3f3b]'
-    if (props.station.price_pence === props.lowestPrice) return 'text-[#22c55e]'
-    if (props.station.price_pence > props.lowestPrice + 500) return 'text-[#ef4444]'
-    return 'text-[#4a3f3b]'
+    if (!props.lowestPrice) return 'text-zinc-800'
+    if (props.station.price_pence === props.lowestPrice) return 'text-status-good'
+    if (props.station.price_pence > props.lowestPrice + 500) return 'text-status-bad'
+    return 'text-zinc-800'
 })
 
 const updatedAgo = computed(() => {