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/SearchBar.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="relative flex flex-col sm:flex-row gap-3 max-w-md w-full">
         <div class="relative flex-1">
-            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-[#89726c]">
+            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">
                 <iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon>
             </span>
             <input
@@ -9,13 +9,13 @@
                 @input="onInput"
                 type="text"
                 placeholder="Enter postcode, e.g. SW1A 1AA"
-                class="w-full h-14 pl-12 pr-4 bg-white border border-[#e5ded7] rounded-xl focus:outline-none focus:ring-2 focus:ring-[#bb5b3e] shadow-inner text-base"
+                class="w-full h-14 pl-12 pr-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
             />
         </div>
         <button
             @click="emit('search', postcode)"
             :disabled="!postcode.trim()"
-            class="h-14 px-8 bg-[#bb5b3e] text-white rounded-xl font-bold text-base shadow-xl hover:bg-[#a34a31] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+            class="h-14 px-8 bg-accent text-white rounded-xl font-bold text-base shadow-xl hover:bg-accent-content transition-all disabled:opacity-50 disabled:cursor-not-allowed"
         >
             Find Prices
         </button>