Adopt logistics visual system across webapp

app/components/ui/Button.vue

@@ -2,7 +2,7 @@
   <component
     :is="componentTag"
     :type="componentType"
-    :class="['btn', variantClass, fullWidth ? 'w-full' : '']"
+    :class="[baseClass, variantClass, fullWidth ? 'w-full' : '']"
     v-bind="$attrs"
   >
     <slot />
@@ -36,10 +36,11 @@ const componentTag = computed(() => {
   return props.as || 'button'
 })
 const componentType = computed(() => (props.as === 'button' ? props.type : undefined))
+const baseClass = 'inline-flex items-center justify-center gap-2 rounded-full border-0 px-5 py-3 text-sm font-bold transition duration-200'
 
 const variantClass = computed(() => {
-  if (props.variant === 'outline') return 'btn-outline btn-primary'
-  if (props.variant === 'ghost') return 'btn-ghost'
-  return 'btn-primary'
+  if (props.variant === 'outline') return 'bg-transparent text-[#2f2418] ring-1 ring-[#cbbca6] hover:bg-[#f6f1ea]'
+  if (props.variant === 'ghost') return 'bg-[#f6f1ea] text-[#5f4b33] hover:bg-[#ece2d3]'
+  return 'bg-[#2f2418] text-white shadow-[0_12px_28px_rgba(47,36,24,0.16)] hover:bg-[#493824]'
 })
 </script>