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

frontend/src/components/ui/Badge.tsx

@@ -0,0 +1,24 @@
+import { cn } from '../../lib/utils';
+
+interface BadgeProps {
+  variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Badge({ variant = 'neutral', children, className }: BadgeProps) {
+  const variants = {
+    primary: 'bg-primary-50 text-primary-700 border border-primary-200',
+    success: 'bg-success-50 text-success-700 border border-success-200',
+    warning: 'bg-warning-50 text-warning-700 border border-warning-200',
+    danger: 'bg-danger-50 text-danger-700 border border-danger-200',
+    info: 'bg-blue-50 text-blue-700 border border-blue-200',
+    neutral: 'bg-surface-100 text-surface-600 border border-surface-200',
+  };
+
+  return (
+    <span className={cn('badge', variants[variant], className)}>
+      {children}
+    </span>
+  );
+}