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/settings/Appearance.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="space-y-6 max-w-lg">
-        <div class="p-6 bg-white rounded-2xl border border-[#e5ded7] space-y-5">
-            <h2 class="text-lg font-black text-[#4a3f3b]">Appearance</h2>
-            <p class="text-sm text-[#89726c]">Choose how FuelAlert looks to you.</p>
+        <div class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-5">
+            <h2 class="text-lg font-black text-zinc-800">Appearance</h2>
+            <p class="text-sm text-zinc-500">Choose how FuelAlert looks to you.</p>
 
             <div class="grid grid-cols-3 gap-3">
                 <button
@@ -11,15 +11,15 @@
                     @click="setTheme(option.value)"
                     class="flex flex-col items-center gap-3 p-4 rounded-2xl border-2 transition-all"
                     :class="selectedTheme === option.value
-                        ? 'border-[#bb5b3e] bg-[#faf6f3]'
-                        : 'border-[#e5ded7] hover:border-[#89726c]'"
+                        ? 'border-accent bg-zinc-50'
+                        : 'border-zinc-300 hover:border-zinc-500'"
                 >
-                    <iconify-icon :icon="option.icon" class="text-2xl text-[#bb5b3e]"></iconify-icon>
-                    <span class="text-sm font-bold text-[#4a3f3b]">{{ option.label }}</span>
+                    <iconify-icon :icon="option.icon" class="text-2xl text-accent"></iconify-icon>
+                    <span class="text-sm font-bold text-zinc-800">{{ option.label }}</span>
                 </button>
             </div>
 
-            <p class="text-xs text-[#89726c]">
+            <p class="text-xs text-zinc-500">
                 Current: <span class="font-bold capitalize">{{ selectedTheme }}</span>
             </p>
         </div>