feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4

Add complete project structure and foundation:

**Core Setup:**
- Next.js 15.5.6 with App Router and React 19
- TypeScript 5.7 with strict mode
- Tailwind CSS 4.1 with custom theme configuration
- ESLint and Prettier configuration

**Dependencies Installed:**
- @tanstack/react-query - Server state management
- zustand - Client state management
- framer-motion - Animations
- lucide-react - Icon library
- react-colorful - Color picker component
- cmdk - Command palette
- sonner - Toast notifications
- clsx + tailwind-merge - Class name utilities

**Project Structure:**
- app/ - Next.js App Router pages
- components/ - React components (ui, color, tools, layout, providers)
- lib/ - Utilities, API client, hooks, stores, constants
- tests/ - Unit and E2E test directories

**API Integration:**
- Type-safe Pastel API client with all 21 endpoints
- Complete TypeScript type definitions for requests/responses
- Error handling and response types

**UI Components:**
- Button component with variants (default, outline, ghost, destructive)
- Input component with focus states
- Providers wrapper (React Query, Toast)
- Root layout with Inter font and metadata

**Pages:**
- Home page with gradient hero and feature cards
- Links to playground and palette generation (pages pending)

**Configuration:**
- Tailwind with HSL color variables for theming
- Dark/light mode CSS variables
- Custom animations (fade-in, slide-up, slide-down)
- @tailwindcss/forms and @tailwindcss/typography plugins

Build successful: 102 kB First Load JS, static generation working.

Ready for color components and playground implementation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

app/globals.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { Providers } from '@/components/providers/Providers';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Pastel UI - Color Manipulation & Palette Generation',
+  description: 'Modern web UI for color manipulation, palette generation, and accessibility analysis',
+  keywords: ['color', 'palette', 'generator', 'accessibility', 'wcag', 'gradient', 'design'],
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,48 @@
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-24">
+      <div className="max-w-5xl w-full space-y-8 text-center">
+        <h1 className="text-6xl font-bold bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-clip-text text-transparent">
+          Pastel UI
+        </h1>
+        <p className="text-xl text-muted-foreground">
+          Modern web UI for color manipulation, palette generation, and accessibility analysis
+        </p>
+        <div className="flex gap-4 justify-center">
+          <a
+            href="/playground"
+            className="px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity"
+          >
+            Open Playground
+          </a>
+          <a
+            href="/palettes"
+            className="px-6 py-3 bg-secondary text-secondary-foreground rounded-lg hover:opacity-90 transition-opacity"
+          >
+            Generate Palettes
+          </a>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
+          <div className="p-6 border rounded-lg">
+            <h3 className="text-lg font-semibold mb-2">Color Playground</h3>
+            <p className="text-sm text-muted-foreground">
+              Interactive color picker with multi-format support and real-time manipulation
+            </p>
+          </div>
+          <div className="p-6 border rounded-lg">
+            <h3 className="text-lg font-semibold mb-2">Palette Generation</h3>
+            <p className="text-sm text-muted-foreground">
+              Create harmony palettes, distinct colors, and smooth gradients
+            </p>
+          </div>
+          <div className="p-6 border rounded-lg">
+            <h3 className="text-lg font-semibold mb-2">Accessibility Tools</h3>
+            <p className="text-sm text-muted-foreground">
+              WCAG contrast checker and color blindness simulation
+            </p>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}