feat: full UI redesign with design system, Nielsen heuristics compliance

- Install lucide-react, framer-motion, react-hot-toast, clsx, tailwind-merge
- Custom Tailwind config: semantic color tokens, Inter font, shadow scale,
  border radius scale, custom animations (fadeIn, slideUp, shimmer)
- Shared component library: Button, Badge, Card, Input, Select, Textarea,
  EmptyState, Skeleton, LoadingSpinner
- Global CSS with @layer components (.btn, .card, .input, .badge, .skeleton)
- Toast notification system via react-hot-toast + showToast utility
- ErrorBoundary wrapper for graceful error recovery
- Redesigned navigation: sticky, active state indicators, Lucide icons
- Dashboard: hero header, today highlighting, scrollable week grid,
  redesigned meal cards, empty states, skeleton loading
- Meal Detail: hero image with gradient overlay, metadata row with icons,
  Lucide star rating, edit-existing-feedback flow
- Pantry: inline add form, search/filter, visual quantity badges,
  expiry warnings, confirmation dialogs
- Shopping List: gradient summary cards, aisle grouping with badges,
  sale strikethrough pricing, empty state
- Login: centered card with icon, Input component, Button component
- All old gray/blue utility classes migrated to new surface/primary tokens
- TypeScript clean, production build passes

.agent/plan-ui-redesign.md

@@ -0,0 +1,98 @@
+# MealPlanner UI Redesign Plan
+## Nielsen's 10 Heuristics → Concrete Changes
+
+### Classification: `large/high-risk` — full visual redesign + component library
+
+---
+
+## Phase 1: Design System Foundation
+- [ ] Custom Tailwind config: color tokens (primary, semantic, surface), font scale, spacing scale, shadow scale, radius scale
+- [ ] Install icon library (Lucide React — lightweight, tree-shakeable)
+- [ ] Create shared components: Button, Badge, Card, Input, Select, Textarea, Toast, Skeleton, EmptyState, Modal, Tooltip
+- [ ] Define animation tokens (Framer Motion — micro-interactions, page transitions)
+- [ ] Dark mode foundation (class-based, not implementing yet)
+
+## Phase 2: Global UX Improvements (Heuristics 1, 3, 5, 6, 7, 9)
+- [ ] Toast notification system (React Hot Toast) — system status visibility
+- [ ] Loading states: skeleton screens for every async view
+- [ ] Error boundaries + graceful error recovery UI
+- [ ] Empty states for all lists (no meals, no pantry items, no shopping list)
+- [ ] Confirmation dialogs for destructive actions (delete, remove from pantry, never-suggest)
+- [ ] Undo capability where possible (remove from pantry → "Undo" toast)
+- [ ] Keyboard shortcuts reference (Cmd+K command palette? Maybe too ambitious. Start with basic: / for search, Esc to close modals)
+
+## Phase 3: Dashboard Redesign (Heuristic 1, 2, 6, 8)
+- [ ] Visual hierarchy: week header with clear date range, status summary chips
+- [ ] Day columns with clear headers (Mon 5/12, Tue 5/13, etc.)
+- [ ] Meal cards: better image handling (aspect ratio, fallback), clearer metadata, hover interactions
+- [ ] Quick actions bar: "Generate Week", "Send Vote Email", "View Shopping List"
+- [ ] Recent activity / system status panel (last scrape time, next vote date)
+- [ ] Responsive: mobile-first card stack, desktop grid
+
+## Phase 4: Meal Detail Redesign (Heuristic 2, 5, 8)
+- [ ] Hero section: full-bleed image, recipe title, key metadata row (time, servings, cost, cuisine tags)
+- [ ] Tabbed interface: Overview / Ingredients / Instructions / Feedback
+- [ ] Ingredients: checkbox toggle "in pantry", visual quantity display, aisle grouping
+- [ ] Instructions: numbered with visual separators, progress indicator
+- [ ] Feedback: inline star rating (not a separate card), compact form, saved state indicator
+- [ ] Print-friendly layout preserved
+
+## Phase 5: Pantry Redesign (Heuristic 1, 5, 6, 8)
+- [ ] Inline add (not expandable form — always visible, compact)
+- [ ] Search + filter existing items
+- [ ] Visual quantity badges, expiry warnings (color-coded)
+- [ ] Bulk actions (select multiple → remove)
+- [ ] Empty state with illustration + CTA
+
+## Phase 6: Shopping List Redesign (Heuristic 1, 2, 6, 8)
+- [ ] Summary header with total cost, savings, item count
+- [ ] Aisle sections as collapsible accordions
+- [ ] Checkbox strikethrough animation, "in cart" vs "in pantry" distinction
+- [ ] Print layout: clean, no UI chrome
+- [ ] Empty state when no items
+
+## Phase 7: Login + Global Nav (Heuristic 1, 4, 8)
+- [ ] Centered card with better spacing, icon, and visual focus
+- [ ] Nav bar: active state indicator, mobile hamburger, user avatar dropdown
+- [ ] Breadcrumbs on sub-pages
+- [ ] Footer with version + system status
+
+## Phase 8: Accessibility + Polish (Heuristic 9, 10)
+- [ ] Focus rings on all interactive elements
+- [ ] ARIA labels, roles, live regions for toasts
+- [ ] Color contrast audit (WCAG AA)
+- [ ] Reduced motion support
+- [ ] Help tooltips on complex features (vote system, matching algorithm)
+
+---
+
+## Implementation Order
+1. Install deps (lucide-react, framer-motion, react-hot-toast)
+2. Tailwind config + base design tokens
+3. Shared component library
+4. Toast + loading infrastructure
+5. Dashboard (highest traffic page)
+6. Meal Detail
+7. Pantry + Shopping List (parallel)
+8. Login + Nav
+9. Accessibility polish + error boundaries
+10. Test responsive on mobile widths
+
+## New Dependencies
+```
+npm install lucide-react framer-motion react-hot-toast
+```
+
+## Nielsen Mapping Summary
+| Heuristic | Where addressed |
+|---|---|
+| 1. Visibility of status | Skeletons, toasts, loading spinners, progress indicators |
+| 2. Match real world | Clear labels, familiar icons, calendar metaphor |
+| 3. User control | Confirm dialogs, undo toasts, Escape to close |
+| 4. Consistency | Design tokens, shared components, uniform spacing |
+| 5. Error prevention | Form validation, disable buttons while loading, confirm destructive actions |
+| 6. Recognition > recall | Visual badges, status chips, pantry checkboxes, recent activity |
+| 7. Flexibility | Keyboard shortcuts, bulk actions, print layouts |
+| 8. Aesthetic + minimal | Clean cards, whitespace, single primary action per view |
+| 9. Error recovery | Error boundaries, friendly error messages, retry buttons |
+| 10. Help | Empty state CTAs, tooltip hints, inline help text |