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

@@ -1,8 +1,8 @@
 <template>
     <div class="space-y-6">
         <div>
-            <h1 class="text-2xl font-black text-[#4a3f3b]">Welcome back{{ user ? ', ' + user.name : '' }}</h1>
-            <p class="text-[#89726c] mt-1">Your FuelAlert dashboard.</p>
+            <h1 class="text-2xl font-black text-zinc-800">Welcome back{{ user ? ', ' + user.name : '' }}</h1>
+            <p class="text-zinc-500 mt-1">Your FuelAlert dashboard.</p>
         </div>
 
         <div class="grid sm:grid-cols-3 gap-4">
@@ -10,18 +10,18 @@
                 v-for="item in quickLinks"
                 :key="item.to"
                 :to="item.to"
-                class="p-6 bg-white rounded-2xl border border-[#e5ded7] hover:border-[#bb5b3e] transition-colors space-y-3"
+                class="p-6 bg-white rounded-2xl border border-zinc-300 hover:border-accent transition-colors space-y-3"
             >
-                <iconify-icon :icon="item.icon" class="text-[#bb5b3e] text-2xl"></iconify-icon>
-                <p class="font-bold text-[#4a3f3b]">{{ item.label }}</p>
-                <p class="text-sm text-[#89726c]">{{ item.description }}</p>
+                <iconify-icon :icon="item.icon" class="text-accent text-2xl"></iconify-icon>
+                <p class="font-bold text-zinc-800">{{ item.label }}</p>
+                <p class="text-sm text-zinc-500">{{ item.description }}</p>
             </RouterLink>
         </div>
 
-        <div class="p-6 bg-white rounded-2xl border border-[#e5ded7] space-y-2">
-            <p class="text-sm font-bold uppercase tracking-widest text-[#89726c]">Your plan</p>
-            <p class="text-xl font-black text-[#4a3f3b] capitalize">{{ userTier }}</p>
-            <a v-if="userTier === 'free'" href="/pricing" class="inline-block text-sm font-bold text-[#bb5b3e] hover:underline">
+        <div class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-2">
+            <p class="text-sm font-bold uppercase tracking-widest text-zinc-500">Your plan</p>
+            <p class="text-xl font-black text-zinc-800 capitalize">{{ userTier }}</p>
+            <a v-if="userTier === 'free'" class="inline-block text-sm font-bold text-accent hover:underline" href="/pricing">
                 Upgrade for alerts + predictions →
             </a>
         </div>