Update color palette and improve UI aesthetics

- Apply new teal-based color palette (#009688, #00796B, #B2DFDB)
- Update secondary color to accent yellow (#FFC107)
- Replace Material-UI loading states with proper animations and skeletons
- Remove ugly gradient background, replace with clean white
- Update all gradients to use new color scheme
- Improve text colors for better readability (#212121, #757575)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

lib/theme.ts

@@ -5,25 +5,26 @@ export const theme = createTheme({
   palette: {
     mode: 'light',
     primary: {
-      main: '#2C5F6B', // Deep teal for spiritual feel
-      light: '#5A8A96',
-      dark: '#1A3B42',
-      contrastText: '#ffffff',
+      main: '#009688', // PRIMARY COLOR
+      light: '#B2DFDB', // LIGHT PRIMARY COLOR
+      dark: '#00796B', // DARK PRIMARY COLOR
+      contrastText: '#FFFFFF', // TEXT / ICONS
     },
     secondary: {
-      main: '#8B7355', // Warm brown for earth tones
-      light: '#B09A7A',
-      dark: '#5D4D37',
-      contrastText: '#ffffff',
+      main: '#FFC107', // ACCENT COLOR
+      light: '#FFECB3',
+      dark: '#FF8F00',
+      contrastText: '#212121',
     },
     background: {
       default: '#FAFAFA',
       paper: '#FFFFFF',
     },
     text: {
-      primary: '#1A1A1A',
-      secondary: '#4A4A4A',
+      primary: '#212121', // PRIMARY TEXT
+      secondary: '#757575', // SECONDARY TEXT
     },
+    divider: '#BDBDBD', // DIVIDER COLOR
   },
   typography: {
     fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',