feat: add initial application structure with configuration, UI components, and state management

app.config.ts

@@ -1,7 +1,52 @@
 export default defineAppConfig({
   ui: {
-    primary: "violet",
-    gray: "neutral",
+    primary: "slate",
+    gray: "neutral", 
     strategy: "class",
+    // High-contrast meter colors for accessibility
+    colors: {
+      green: {
+        50: '#f0fdf4',
+        500: '#10b981', 
+        600: '#059669',
+        900: '#064e3b'
+      },
+      yellow: {
+        50: '#fefce8',
+        500: '#f59e0b',
+        600: '#d97706', 
+        900: '#78350f'
+      },
+      red: {
+        50: '#fef2f2',
+        500: '#ef4444',
+        600: '#dc2626',
+        900: '#7f1d1d'
+      }
+    },
+    // Spacious card styling
+    card: {
+      base: 'overflow-hidden',
+      background: 'bg-white dark:bg-gray-900',
+      divide: 'divide-y divide-gray-200 dark:divide-gray-800',
+      ring: 'ring-1 ring-gray-200 dark:ring-gray-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'
+      }
+    }
   },
 });