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/Chip.tsx

@@ -1,8 +1,9 @@
-import { Check } from "lucide-react";
+import { RiCheckLine } from "@remixicon/react";
 import type { ReactNode } from "react";
+import { cx } from "@/utils/cx";
 
-// A pill-shaped on/off toggle button for filters (cuisines, styles, appliances…).
-// Includes a visible Check icon when pressed so state never relies on color alone.
+// A pill-shaped on/off filter toggle on BoardUI tokens.
+// Shows a check when pressed so state never relies on color alone.
 
 interface ChipProps {
   pressed: boolean;
@@ -14,24 +15,25 @@ interface ChipProps {
   dashed?: boolean;
 }
 
-const SIZES = {
-  sm: "min-h-8 px-2.5 py-1 text-xs gap-1.5",
-  md: "min-h-9 px-3.5 py-1.5 text-sm gap-1.5",
-};
-
 export function Chip({ pressed, onClick, children, size = "md", dashed = false }: ChipProps) {
-  const look = pressed
-    ? "border-selected-line bg-selected font-medium text-ink shadow-2xs"
-    : `border-line-strong bg-surface text-ink-muted hover:border-ink-muted hover:bg-raised hover:text-ink ${dashed ? "border-dashed" : ""}`;
-
   return (
     <button
       type="button"
       aria-pressed={pressed}
       onClick={onClick}
-      className={`trim-cap inline-flex items-center rounded-full border transition-colors ${SIZES[size]} ${look}`}
+      className={cx(
+        "inline-flex cursor-pointer items-center gap-1.5 rounded-full border transition-colors duration-150 ease",
+        "outline-none focus-visible:ring-2 focus-visible:ring-border-focus-ring",
+        size === "sm" ? "min-h-8 px-2.5 py-1 text-caption-1-medium" : "min-h-9 px-3.5 py-1.5 text-body-medium",
+        pressed
+          ? "border-accent-500 bg-button-ghost-background text-button-ghost-foreground"
+          : cx(
+              "border-border-button-default bg-background-primary-default text-text-secondary hover:border-border-button-hover hover:bg-background-secondary-hover hover:text-text-primary",
+              dashed && "border-dashed",
+            ),
+      )}
     >
-      {pressed && <Check className="size-3.5 shrink-0 text-brand-300" strokeWidth={2.5} aria-hidden />}
+      {pressed && <RiCheckLine className="size-3.5 shrink-0" aria-hidden />}
       <span className="inline-flex items-center gap-1.5">{children}</span>
     </button>
   );