feat(quote): integrate Quote app into monorepo

- Add complete Quote app with mobile (Expo), web (SvelteKit), landing (Astro), and backend (NestJS)
- Create NestJS backend with Drizzle ORM for PostgreSQL
- Add API endpoints for favorites and user lists
- Add database schema for favorites and user_lists tables
- Update root package.json with quote dev scripts
- Add Quote environment variables to generate-env.mjs
- Add missing toast.ts store for web app
- Configure hybrid content strategy (static + API)

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

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

apps/quote/packages/web-ui/src/styles/theme.css

@@ -0,0 +1,157 @@
+/* Base Styles & Theme Variables */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Default Colors - Can be overridden per app */
+    --color-primary: 102 126 234; /* #667eea */
+    --color-primary-dark: 118 75 162; /* #764ba2 */
+    --color-secondary: 236 72 153; /* #ec4899 */
+
+    /* Semantic Colors - Light Mode */
+    --color-background: 255 255 255;
+    --color-surface: 245 245 245;
+    --color-surface-elevated: 255 255 255;
+
+    --color-text-primary: 51 51 51;
+    --color-text-secondary: 102 102 102;
+    --color-text-tertiary: 153 153 153;
+
+    --color-border: 224 224 224;
+    --color-border-hover: 189 189 189;
+
+    /* Status Colors */
+    --color-success: 34 197 94;
+    --color-warning: 234 179 8;
+    --color-error: 239 68 68;
+    --color-info: 59 130 246;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+
+    /* Spacing */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+    --spacing-2xl: 3rem;
+
+    /* Border Radius */
+    --radius-sm: 0.25rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-full: 9999px;
+
+    /* Transitions */
+    --transition-fast: 150ms ease;
+    --transition-base: 200ms ease;
+    --transition-slow: 300ms ease;
+  }
+
+  /* Dark Mode */
+  [data-theme="dark"] {
+    --color-background: 17 24 39; /* gray-900 */
+    --color-surface: 31 41 55; /* gray-800 */
+    --color-surface-elevated: 55 65 81; /* gray-700 */
+
+    --color-text-primary: 243 244 246; /* gray-100 */
+    --color-text-secondary: 209 213 219; /* gray-300 */
+    --color-text-tertiary: 156 163 175; /* gray-400 */
+
+    --color-border: 55 65 81; /* gray-700 */
+    --color-border-hover: 75 85 99; /* gray-600 */
+
+    /* Adjust shadows for dark mode */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+  }
+
+  /* Apply theme colors to base elements */
+  body {
+    background-color: rgb(var(--color-background));
+    color: rgb(var(--color-text-primary));
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    transition: background-color var(--transition-base), color var(--transition-base);
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+/* Utility Classes */
+@layer components {
+  /* Gradient backgrounds */
+  .gradient-primary {
+    background: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-primary-dark)) 100%);
+  }
+
+  /* Glass effect */
+  .glass {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  [data-theme="dark"] .glass {
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  /* Card styles */
+  .card {
+    background-color: rgb(var(--color-surface-elevated));
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-lg);
+    border: 1px solid rgb(var(--color-border));
+    transition: transform var(--transition-base), box-shadow var(--transition-base);
+  }
+
+  .card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+  }
+
+  /* Button styles */
+  .btn {
+    padding: var(--spacing-sm) var(--spacing-lg);
+    border-radius: var(--radius-md);
+    font-weight: 500;
+    transition: all var(--transition-base);
+    cursor: pointer;
+    border: none;
+  }
+
+  .btn-primary {
+    background: rgb(var(--color-primary));
+    color: white;
+  }
+
+  .btn-primary:hover {
+    background: rgb(var(--color-primary-dark));
+  }
+
+  /* Input styles */
+  .input {
+    padding: var(--spacing-sm) var(--spacing-md);
+    border: 2px solid rgb(var(--color-border));
+    border-radius: var(--radius-md);
+    background-color: rgb(var(--color-background));
+    color: rgb(var(--color-text-primary));
+    transition: border-color var(--transition-fast);
+  }
+
+  .input:focus {
+    outline: none;
+    border-color: rgb(var(--color-primary));
+  }
+}