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

@@ -1,13 +1,13 @@
 <template>
     <div class="space-y-6">
         <div>
-            <h1 class="text-2xl font-black text-[#4a3f3b]">Settings</h1>
-            <p class="text-[#89726c] mt-1">Manage your account and preferences.</p>
+            <h1 class="text-2xl font-black text-zinc-800">Settings</h1>
+            <p class="text-zinc-500 mt-1">Manage your account and preferences.</p>
         </div>
 
         <div class="flex gap-6">
             <!-- Settings sub-nav -->
-            <aside class="w-44 flex-shrink-0">
+            <aside class="w-44 shrink-0">
                 <nav class="space-y-1">
                     <RouterLink
                         v-for="item in settingsNav"
@@ -15,8 +15,8 @@
                         :to="item.to"
                         class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-bold transition-colors"
                         :class="$route.path === item.to
-                            ? 'bg-[#bb5b3e] text-white'
-                            : 'text-[#89726c] hover:bg-white hover:text-[#4a3f3b]'"
+                            ? 'bg-accent text-white'
+                            : 'text-zinc-500 hover:bg-white hover:text-zinc-800'"
                     >
                         <iconify-icon :icon="item.icon"></iconify-icon>
                         {{ item.label }}