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/views/dashboard/Preferences.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="space-y-6 max-w-lg">
-        <h1 class="text-2xl font-black text-[#4a3f3b]">Preferences</h1>
+        <h1 class="text-2xl font-black text-zinc-800">Preferences</h1>
 
-        <form @submit.prevent="save" class="space-y-5 p-6 bg-white rounded-2xl border border-[#e5ded7]">
+        <form class="space-y-5 p-6 bg-white rounded-2xl border border-zinc-300" @submit.prevent="save">
             <div class="space-y-2">
-                <label class="text-sm font-bold text-[#4a3f3b]">Default fuel type</label>
+                <label class="text-sm font-bold text-zinc-800">Default fuel type</label>
                 <select
                     v-model="form.preferred_fuel_type"
-                    class="w-full h-12 px-4 bg-[#faf6f3] border border-[#e5ded7] rounded-xl font-medium text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
+                    class="w-full h-12 px-4 bg-zinc-50 border border-zinc-300 rounded-xl font-medium text-zinc-800 focus:outline-none focus:ring-2 focus:ring-accent"
                 >
                     <option value="petrol">Petrol (E10)</option>
                     <option value="diesel">Diesel (B7)</option>
@@ -19,13 +19,13 @@
             </div>
 
             <div class="space-y-2">
-                <label class="text-sm font-bold text-[#4a3f3b]">Home postcode</label>
+                <label class="text-sm font-bold text-zinc-800">Home postcode</label>
                 <input
                     v-model="form.postcode"
                     type="text"
                     placeholder="e.g. SW1A 1AA"
                     maxlength="8"
-                    class="w-full h-12 px-4 bg-[#faf6f3] border border-[#e5ded7] rounded-xl font-medium text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
+                    class="w-full h-12 px-4 bg-zinc-50 border border-zinc-300 rounded-xl font-medium text-zinc-800 focus:outline-none focus:ring-2 focus:ring-accent"
                 />
             </div>
 
@@ -33,7 +33,7 @@
                 <button
                     type="submit"
                     :disabled="saving"
-                    class="px-8 py-3 bg-[#bb5b3e] text-white rounded-xl font-bold hover:bg-[#a34a31] transition-all disabled:opacity-50"
+                    class="px-8 py-3 bg-accent text-white rounded-xl font-bold hover:bg-accent-content transition-all disabled:opacity-50"
                 >
                     {{ saving ? 'Saving…' : 'Save preferences' }}
                 </button>