feat: Initialize customer-spa project structure

Sprint 1 - Foundation Setup:

Created customer-spa/ folder structure:
```
customer-spa/
├── src/
│   ├── pages/          # Customer pages (Shop, Cart, Checkout, Account)
│   ├── components/     # Reusable components
│   ├── lib/
│   │   ├── api/        # API client
│   │   ├── cart/       # Cart state management
│   │   ├── checkout/   # Checkout logic
│   │   └── tracking/   # Analytics & pixel tracking
│   ├── hooks/          # Custom React hooks
│   ├── contexts/       # React contexts
│   └── types/          # TypeScript types
├── public/             # Static assets
├── package.json        # Dependencies
├── vite.config.ts      # Vite configuration (port 5174)
├── tsconfig.json       # TypeScript configuration
├── tailwind.config.js  # TailwindCSS configuration
├── postcss.config.js   # PostCSS configuration
└── .eslintrc.cjs       # ESLint configuration
```

Configuration:
✅ Vite dev server on port 5174 (admin-spa uses 5173)
✅ HTTPS with shared SSL cert
✅ TypeScript + React 18
✅ TailwindCSS + shadcn/ui
✅ React Query for data fetching
✅ Zustand for state management
✅ React Hook Form + Zod for forms
✅ React Router for routing

Dependencies Added:
- Core: React 18, React DOM, React Router
- UI: Radix UI components, Lucide icons
- State: Zustand, TanStack Query
- Forms: React Hook Form, Zod, @hookform/resolvers
- Styling: TailwindCSS, class-variance-authority
- Utils: clsx, tailwind-merge, sonner (toast)

Next Steps:
- Create main.tsx entry point
- Create App.tsx with routing
- Create base layout components
- Setup API client
- Implement cart state management

Ready for Sprint 1 implementation!

customer-spa/tailwind.config.js

@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: ["./src/**/*.{ts,tsx,css}", "./components/**/*.{ts,tsx,css}"],
+  theme: {
+    container: { center: true, padding: "1rem" },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
+        secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
+        muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
+        accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
+        popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))" },
+        card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" }
+      },
+      borderRadius: { lg: "12px", md: "10px", sm: "8px" }
+    }
+  },
+  plugins: [require("tailwindcss-animate")]
+};