refactor: update app.vue and various components to enhance UI consistency, replace color classes for improved accessibility, and refine layout for better user experience

app.config.ts

@@ -0,0 +1,42 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: "fuchsia",
+      neutral: "stone",
+    },
+
+    global: {
+      body: "bg-white dark:bg-neutral-950",
+    },
+    container: {
+      base: "mx-auto",
+      padding: "px-4 sm:px-6 lg:px-8",
+      constrained: "max-w-7xl",
+      background: "",
+    },
+    // Spacious card styling
+    card: {
+      base: "overflow-hidden",
+      background: "bg-white dark:bg-neutral-950",
+      divide: "divide-y divide-neutral-200 dark:divide-neutral-800",
+      ring: "ring-1 ring-neutral-200 dark:ring-neutral-800",
+      rounded: "rounded-lg",
+      shadow: "shadow",
+      body: {
+        base: "",
+        background: "",
+        padding: "px-6 py-5 sm:p-6",
+      },
+      header: {
+        base: "",
+        background: "",
+        padding: "px-6 py-4 sm:px-6",
+      },
+      footer: {
+        base: "",
+        background: "",
+        padding: "px-6 py-4 sm:px-6",
+      },
+    },
+  },
+});