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/distinct/page.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState } from 'react';
+import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
+import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
+import { useGenerateDistinct } from '@/lib/pastel/api/queries';
+import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+export default function DistinctPage() {
+  const [count, setCount] = useState(8);
+  const [metric, setMetric] = useState<'cie76' | 'ciede2000'>('ciede2000');
+  const [colors, setColors] = useState<string[]>([]);
+  const [stats, setStats] = useState<{
+    min_distance: number;
+    avg_distance: number;
+    generation_time_ms: number;
+  } | null>(null);
+
+  const generateMutation = useGenerateDistinct();
+
+  const handleGenerate = async () => {
+    try {
+      const result = await generateMutation.mutateAsync({
+        count,
+        metric,
+      });
+      setColors(result.colors);
+      setStats(result.stats);
+      toast.success(`Generated ${result.colors.length} distinct colors`);
+    } catch (error) {
+      toast.error('Failed to generate distinct colors');
+    }
+  };
+
+  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">Distinct Colors Generator</h1>
+          <p className="text-muted-foreground">
+            Generate visually distinct colors using simulated annealing
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Controls */}
+          <div className="lg:col-span-1">
+            <div className="p-6 border rounded-lg bg-card space-y-6">
+              <div>
+                <h2 className="text-xl font-semibold mb-4">Settings</h2>
+              </div>
+
+              <div>
+                <label htmlFor="count" className="text-sm font-medium mb-2 block">
+                  Number of Colors
+                </label>
+                <Input
+                  id="count"
+                  type="number"
+                  min={2}
+                  max={100}
+                  value={count}
+                  onChange={(e) => setCount(parseInt(e.target.value))}
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Higher counts take longer to generate
+                </p>
+              </div>
+
+              <Select
+                label="Distance Metric"
+                value={metric}
+                onChange={(e) => setMetric(e.target.value as 'cie76' | 'ciede2000')}
+              >
+                <option value="cie76">CIE76 (Faster)</option>
+                <option value="ciede2000">CIEDE2000 (More Accurate)</option>
+              </Select>
+
+              <Button
+                onClick={handleGenerate}
+                disabled={generateMutation.isPending}
+                className="w-full"
+              >
+                {generateMutation.isPending ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Generating..
+                  </>
+                ) : (
+                  'Generate Colors'
+                )}
+              </Button>
+
+              {generateMutation.isPending && (
+                <div className="text-sm text-muted-foreground text-center">
+                  This may take a few moments..
+                </div>
+              )}
+
+              {stats && (
+                <div className="pt-4 border-t space-y-2">
+                  <h3 className="font-semibold text-sm">Statistics</h3>
+                  <div className="space-y-1 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Min Distance:</span>
+                      <span className="font-mono">{stats.min_distance.toFixed(2)}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Avg Distance:</span>
+                      <span className="font-mono">{stats.avg_distance.toFixed(2)}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Generation Time:</span>
+                      <span className="font-mono">
+                        {(stats.generation_time_ms / 1000).toFixed(2)}s
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Results */}
+          <div className="lg:col-span-2 space-y-6">
+            <div className="p-6 border rounded-lg bg-card">
+              <h2 className="text-xl font-semibold mb-4">
+                Generated Colors {colors.length > 0 && `(${colors.length})`}
+              </h2>
+              <PaletteGrid colors={colors} />
+            </div>
+
+            {colors.length > 0 && (
+              <div className="p-6 border rounded-lg bg-card">
+                <ExportMenu colors={colors} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}