Add the customer ordering page

Builds the main customer-facing flow: browse the Brand's menu, add
items to a cart, and check out either as a guest (name + contact) or,
if signed in, as the account customer — both call the existing
placeOrder server function, which already distinguishes the two. On
success, navigates to a new /orders/$orderId status page showing each
Order Item's Preparation Steps, queue position, ETA, and (per the
domain rules already established) a Cancel button while cancellable
and a pickup-confirmation button once ready.

Styled with SCSS Modules per CLAUDE.md; added the sass dependency and
the src/styles/ structure it describes (globals.scss imported once in
__root.tsx, alongside the existing Tailwind stylesheet the not-yet-
mounted header-user.tsx component depends on).

Verified end-to-end against a throwaway local Postgres: menu renders
with seeded items, cart quantities update, guest checkout places a
real order, and the status page reflects a real cancellation.

Also fixes CLAUDE.md's Commands section, which documented pnpm even
though this repo only has npm (package-lock.json, no pnpm installed).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/styles/_variables.scss

@@ -0,0 +1,18 @@
+$color-text: #1a1a1a;
+$color-text-muted: #6b6b6b;
+$color-background: #ffffff;
+$color-surface: #f7f7f5;
+$color-border: #e2e0dc;
+$color-primary: #b5432b;
+$color-primary-contrast: #ffffff;
+$color-danger: #a33;
+$color-success: #2f7a4f;
+
+$space-1: 0.25rem;
+$space-2: 0.5rem;
+$space-3: 1rem;
+$space-4: 1.5rem;
+$space-5: 2.5rem;
+
+$radius: 8px;
+$breakpoint-tablet: 640px;

src/styles/globals.scss

@@ -0,0 +1,23 @@
+@use './variables' as *;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family:
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  color: $color-text;
+  background: $color-background;
+}
+
+button {
+  font: inherit;
+}