Rebuild app IA and polish pantry, chips, and food data.

Introduce the four-tab hubs (Jetzt/Küche/Planen/Wissen), frosted ingredient flyouts with caution reasons, structured nutrition fields with protein sorting, and disabled coming-soon nav tiles.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/lib/chipStyle.ts

@@ -0,0 +1,54 @@
+import type { CSSProperties } from "react"
+
+import { categoryDotColor } from "@/lib/catalog"
+import type { CategoryId, TagType } from "@/types/domain"
+
+/**
+ * C1: Category = soft tint only (no solid border).
+ * C2: caution = dashed warning border. No pick ring on chips.
+ */
+export function categoryChipSurface(cat: CategoryId | undefined): CSSProperties {
+  if (!cat) {
+    return {
+      background: "var(--glass-fill)",
+      borderWidth: 0,
+      borderStyle: "none",
+    }
+  }
+
+  const token = categoryDotColor(cat)
+  return {
+    background: `color-mix(in srgb, ${token} 15%, white)`,
+    borderWidth: 0,
+    borderStyle: "none",
+  }
+}
+
+export function chipTagModifiers(tag: TagType | undefined): {
+  className: string
+  style: CSSProperties
+} {
+  if (tag === "caution") {
+    return {
+      className: "",
+      style: {
+        borderWidth: 1.5,
+        borderStyle: "dashed",
+        borderColor: "var(--signal-warning)",
+      },
+    }
+  }
+  return { className: "", style: {} }
+}
+
+/** Screen-reader label when pick/caution is ring/border-only. */
+export function chipAriaLabel(
+  name: string,
+  tag: TagType | undefined,
+  pickLabel: string,
+  cautionLabel: string,
+): string {
+  if (tag === "pick") return `${name} — ${pickLabel}`
+  if (tag === "caution") return `${name} — ${cautionLabel}`
+  return name
+}