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 "./palettes/*.{js,ts,jsx,tsx}";
-@source "./palettes/distinct/*.{js,ts,jsx,tsx}";
-@source "./palettes/gradient/*.{js,ts,jsx,tsx}";
-@source "./palettes/harmony/*.{js,ts,jsx,tsx}";
+@source "./distinct/*.{js,ts,jsx,tsx}";
+@source "./gradient/*.{js,ts,jsx,tsx}";
+@source "./harmony/*.{js,ts,jsx,tsx}";
 @source "./names/*.{js,ts,jsx,tsx}";
 @source "./batch/*.{js,ts,jsx,tsx}";
-@source "./accessibility/*.{js,ts,jsx,tsx}";
-@source "./accessibility/colorblind/*.{js,ts,jsx,tsx}";
-@source "./accessibility/contrast/*.{js,ts,jsx,tsx}";
+@source "./colorblind/*.{js,ts,jsx,tsx}";
+@source "./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>
-  );
-}