Move UI to BoardUI with slate + salmon theme; add PDF plan export

- Adopt BoardUI (Pro init): theme tokens, Inter, .dark mode, Button,
  SegmentedControl, Meter, Skeleton and ThemeToggle; remap the app's
  color aliases onto BoardUI tokens and swap lucide for Remix icons
- Retint BoardUI's neutral ramp to cool slate with a salmon accent;
  drop the dotted background; raise muted text contrast
- Simplify the landing page and remove the overlap explorer
- Planner: explicit "I have this" toggle on grocery lines, pantry panel
  above the menu with the staples list spelled out, sticky aisle
  header fix, and a "Download PDF" plan export (jsPDF, lazy-loaded)
- Recipes: replace the family cabbage soup with Cade's Cabbage Soup
  (adds Bone-In Ham Steak to the catalog); remove Ham, Bean & Cabbage Soup
- Remove unused BoardUI components, dependencies and exports

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

app/components/PlannerLoader.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
+import { Skeleton } from "@/components/base/skeleton/skeleton";
 
 const PlannerDashboard = dynamic(() => import("./PlannerDashboard"), {
   ssr: false,
@@ -13,18 +14,18 @@ export function PlannerLoader() {
 
 function DashboardSkeleton() {
   return (
-    <div className="animate-pulse" aria-busy="true" aria-label="Loading planner">
+    <div aria-busy="true" aria-label="Loading planner">
       <div className="h-15 border-b border-line bg-surface" />
       <div className="mx-auto grid max-w-7xl grid-cols-1 gap-6 px-4 pt-6 sm:px-6 lg:grid-cols-3">
         <div className="space-y-6 lg:col-span-2">
-          <div className="h-36 rounded-xl bg-raised" />
+          <Skeleton className="h-36 rounded-3xl" />
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             {Array.from({ length: 4 }, (_, i) => (
-              <div key={i} className="h-44 rounded-xl bg-raised" />
+              <Skeleton key={i} className="h-44 rounded-3xl" />
             ))}
           </div>
         </div>
-        <div className="hidden h-[32rem] rounded-xl bg-raised lg:block" />
+        <Skeleton className="hidden h-[32rem] rounded-3xl lg:block" />
       </div>
     </div>
   );