refactor: flatten Pastel routes by removing intermediate palettes and accessibility paths

- Move sub-routes from /pastel/palettes/* and /pastel/accessibility/* to direct children of /pastel
- Update AppSidebar navigation links
- Update Pastel Navbar and Footer links
- Update Tailwind source directives in pastel/globals.css
- Remove intermediate page files

app/(app)/pastel/accessibility/page.tsx

@@ -1,96 +0,0 @@
-import Link from 'next/link';
-import { Contrast, Eye, Palette } from 'lucide-react';
-
-export default function AccessibilityPage() {
-  const tools = [
-    {
-      title: 'Contrast Checker',
-      description: 'Test color combinations for WCAG 2.1 AA and AAA compliance',
-      href: '/pastel/accessibility/contrast',
-      icon: Contrast,
-      features: ['WCAG 2.1 standards', 'AA/AAA ratings', 'Live preview'],
-    },
-    {
-      title: 'Color Blindness Simulator',
-      description: 'Simulate how colors appear with different types of color blindness',
-      href: '/pastel/accessibility/colorblind',
-      icon: Eye,
-      features: ['Protanopia', 'Deuteranopia', 'Tritanopia'],
-    },
-    {
-      title: 'Text Color Optimizer',
-      description: 'Find the best text color for any background automatically',
-      href: '/pastel/accessibility/textcolor',
-      icon: Palette,
-      features: ['Automatic optimization', 'WCAG guaranteed', 'Light/dark options'],
-    },
-  ];
-
-  return (
-    <div className="min-h-screen py-12">
-      <div className="max-w-7xl mx-auto px-8 space-y-8">
-        <div>
-          <h1 className="text-4xl font-bold mb-2">Accessibility Tools</h1>
-          <p className="text-muted-foreground">
-            Ensure your colors are accessible to everyone
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {tools.map((tool) => {
-            const Icon = tool.icon;
-            return (
-              <Link
-                key={tool.href}
-                href={tool.href}
-                className="p-6 border rounded-lg bg-card hover:border-primary transition-colors"
-              >
-                <div className="flex items-start justify-between mb-4">
-                  <Icon className="h-8 w-8 text-primary" />
-                </div>
-                <h2 className="text-xl font-semibold mb-2">{tool.title}</h2>
-                <p className="text-sm text-muted-foreground mb-4">{tool.description}</p>
-                <ul className="space-y-1">
-                  {tool.features.map((feature) => (
-                    <li key={feature} className="text-sm text-muted-foreground flex items-center">
-                      <span className="mr-2">•</span>
-                      {feature}
-                    </li>
-                  ))}
-                </ul>
-              </Link>
-            );
-          })}
-        </div>
-
-        {/* Educational Content */}
-        <div className="p-6 border rounded-lg bg-card mt-8">
-          <h2 className="text-xl font-semibold mb-4">About WCAG 2.1</h2>
-          <div className="space-y-4 text-sm text-muted-foreground">
-            <p>
-              The Web Content Accessibility Guidelines (WCAG) 2.1 provide standards for making web
-              content more accessible to people with disabilities
-            </p>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <h3 className="font-semibold text-foreground mb-2">Level AA (Minimum)</h3>
-                <ul className="space-y-1">
-                  <li>• Normal text: 4.5:1 contrast ratio</li>
-                  <li>• Large text: 3:1 contrast ratio</li>
-                  <li>• UI components: 3:1 contrast ratio</li>
-                </ul>
-              </div>
-              <div>
-                <h3 className="font-semibold text-foreground mb-2">Level AAA (Enhanced)</h3>
-                <ul className="space-y-1">
-                  <li>• Normal text: 7:1 contrast ratio</li>
-                  <li>• Large text: 4.5:1 contrast ratio</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

app/(app)/pastel/globals.css

@@ -6,16 +6,14 @@
 @source "../components/providers/*.{js,ts,jsx,tsx}";
 @source "../components/tools/*.{js,ts,jsx,tsx}";
 @source "../components/ui/*.{js,ts,jsx,tsx}";
-@source "./playground/*.{js,ts,jsx,tsx}";
+@source "./distinct/*.{js,ts,jsx,tsx}";
-@source "./palettes/*.{js,ts,jsx,tsx}";
+@source "./gradient/*.{js,ts,jsx,tsx}";
-@source "./palettes/distinct/*.{js,ts,jsx,tsx}";
+@source "./harmony/*.{js,ts,jsx,tsx}";
-@source "./palettes/gradient/*.{js,ts,jsx,tsx}";
-@source "./palettes/harmony/*.{js,ts,jsx,tsx}";
 @source "./names/*.{js,ts,jsx,tsx}";
 @source "./batch/*.{js,ts,jsx,tsx}";
-@source "./accessibility/*.{js,ts,jsx,tsx}";
+@source "./colorblind/*.{js,ts,jsx,tsx}";
-@source "./accessibility/colorblind/*.{js,ts,jsx,tsx}";
+@source "./contrast/*.{js,ts,jsx,tsx}";
-@source "./accessibility/contrast/*.{js,ts,jsx,tsx}";
+@source "./textcolor/*.{js,ts,jsx,tsx}";
 @source "*.{js,ts,jsx,tsx}";
 
 @custom-variant dark (&:is(.dark *));

app/(app)/pastel/palettes/page.tsx

@@ -1,68 +0,0 @@
-import Link from 'next/link';
-import { Palette, Sparkles, GraduationCap } from 'lucide-react';
-
-export default function PalettesPage() {
-  const paletteTypes = [
-    {
-      title: 'Gradient Creator',
-      description: 'Create smooth color gradients with multiple stops and color spaces',
-      href: '/pastel/palettes/gradient',
-      icon: GraduationCap,
-      features: ['Multiple color stops', 'Various color spaces', 'Live preview'],
-    },
-    {
-      title: 'Distinct Colors',
-      description: 'Generate visually distinct colors using simulated annealing algorithm',
-      href: '/pastel/palettes/distinct',
-      icon: Sparkles,
-      features: ['Perceptual distance', 'Configurable count', 'Quality metrics'],
-    },
-    {
-      title: 'Harmony Palettes',
-      description: 'Create color palettes based on color theory and harmony rules',
-      href: '/pastel/palettes/harmony',
-      icon: Palette,
-      features: ['Color theory', 'Multiple schemes', 'Instant generation'],
-    },
-  ];
-
-  return (
-    <div className="min-h-screen py-12">
-      <div className="max-w-7xl mx-auto px-8 space-y-8">
-        <div>
-          <h1 className="text-4xl font-bold mb-2">Palette Generation</h1>
-          <p className="text-muted-foreground">
-            Create beautiful color palettes using various generation methods
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {paletteTypes.map((type) => {
-            const Icon = type.icon;
-            return (
-              <Link
-                key={type.href}
-                href={type.href}
-                className="p-6 border rounded-lg bg-card hover:border-primary transition-colors"
-              >
-                <div className="flex items-start justify-between mb-4">
-                  <Icon className="h-8 w-8 text-primary" />
-                </div>
-                <h2 className="text-xl font-semibold mb-2">{type.title}</h2>
-                <p className="text-sm text-muted-foreground mb-4">{type.description}</p>
-                <ul className="space-y-1">
-                  {type.features.map((feature) => (
-                    <li key={feature} className="text-sm text-muted-foreground flex items-center">
-                      <span className="mr-2">•</span>
-                      {feature}
-                    </li>
-                  ))}
-                </ul>
-              </Link>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}

components/layout/AppSidebar.tsx

@@ -74,12 +74,12 @@ const navigation: NavGroup[] = [
         href: '/pastel', 
         icon: <PastelIcon className="h-4 w-4" />,
         items: [
-          { title: 'Harmony Palettes', href: '/pastel/palettes/harmony' },
+          { title: 'Harmony Palettes', href: '/pastel/harmony' },
-          { title: 'Distinct Colors', href: '/pastel/palettes/distinct' },
+          { title: 'Distinct Colors', href: '/pastel/distinct' },
-          { title: 'Gradients', href: '/pastel/palettes/gradient' },
+          { title: 'Gradients', href: '/pastel/gradient' },
-          { title: 'Contrast Checker', href: '/pastel/accessibility/contrast' },
+          { title: 'Contrast Checker', href: '/pastel/contrast' },
-          { title: 'Color Blindness', href: '/pastel/accessibility/colorblind' },
+          { title: 'Color Blindness', href: '/pastel/colorblind' },
-          { title: 'Text Color', href: '/pastel/accessibility/textcolor' },
+          { title: 'Text Color', href: '/pastel/textcolor' },
           { title: 'Named Colors', href: '/pastel/names' },
           { title: 'Batch Operations', href: '/pastel/batch' },
         ]

components/pastel/layout/Footer.tsx

@@ -24,17 +24,17 @@ export function Footer() {
             <h3 className="font-semibold">Resources</h3>
             <ul className="space-y-2 text-sm">
               <li>
-                <Link href="/pastel/playground" className="text-muted-foreground hover:text-foreground transition-colors">
+                <Link href="/pastel" className="text-muted-foreground hover:text-foreground transition-colors">
                   Color Playground
                 </Link>
               </li>
               <li>
-                <Link href="/pastel/palettes" className="text-muted-foreground hover:text-foreground transition-colors">
+                <Link href="/pastel/harmony" className="text-muted-foreground hover:text-foreground transition-colors">
                   Palette Generator
                 </Link>
               </li>
               <li>
-                <Link href="/pastel/accessibility" className="text-muted-foreground hover:text-foreground transition-colors">
+                <Link href="/pastel/contrast" className="text-muted-foreground hover:text-foreground transition-colors">
                   Accessibility Tools
                 </Link>
               </li>

components/pastel/layout/Navbar.tsx

@@ -7,11 +7,10 @@ import { cn } from '@/lib/utils/cn';
 import { Palette } from 'lucide-react';
 
 const navigation = [
-  { name: 'Home', href: '/pastel' },
+  { name: 'Playground', href: '/pastel' },
-  { name: 'Playground', href: '/pastel/playground' },
+  { name: 'Harmony', href: '/pastel/harmony' },
-  { name: 'Palettes', href: '/pastel/palettes' },
+  { name: 'Contrast', href: '/pastel/contrast' },
-  { name: 'Accessibility', href: '/pastel/accessibility' },
+  { name: 'Names', href: '/pastel/names' },
-  { name: 'Named Colors', href: '/pastel/names' },
   { name: 'Batch', href: '/pastel/batch' },
 ];