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

@@ -0,0 +1,141 @@
+'use client';
+
+import { useState } from 'react';
+import { ColorPicker } from '@/components/pastel/color/ColorPicker';
+import { PaletteGrid } from '@/components/pastel/color/PaletteGrid';
+import { ExportMenu } from '@/components/pastel/tools/ExportMenu';
+import { Button } from '@/components/ui/Button';
+import { Select } from '@/components/ui/Select';
+import { useGeneratePalette } from '@/lib/pastel/api/queries';
+import { Loader2, Palette } from 'lucide-react';
+import { toast } from 'sonner';
+
+type HarmonyType =
+  | 'monochromatic'
+  | 'analogous'
+  | 'complementary'
+  | 'split-complementary'
+  | 'triadic'
+  | 'tetradic';
+
+export default function HarmonyPage() {
+  const [baseColor, setBaseColor] = useState('#ff0099');
+  const [harmonyType, setHarmonyType] = useState<HarmonyType>('complementary');
+  const [palette, setPalette] = useState<string[]>([]);
+
+  const paletteMutation = useGeneratePalette();
+
+  const generateHarmony = async () => {
+    try {
+      const result = await paletteMutation.mutateAsync({
+        base: baseColor,
+        scheme: harmonyType,
+      });
+
+      // Combine primary and secondary colors into flat array
+      const colors = [result.palette.primary, ...result.palette.secondary];
+      setPalette(colors);
+      toast.success(`Generated ${harmonyType} harmony palette`);
+    } catch (error) {
+      toast.error('Failed to generate harmony palette');
+      console.error(error);
+    }
+  };
+
+  const harmonyDescriptions: Record<HarmonyType, string> = {
+    monochromatic: 'Single color with variations',
+    analogous: 'Colors adjacent on the color wheel (±30°)',
+    complementary: 'Colors opposite on the color wheel (180°)',
+    'split-complementary': 'Base color + two colors flanking its complement',
+    triadic: 'Three colors evenly spaced on the color wheel (120°)',
+    tetradic: 'Four colors evenly spaced on the color wheel (90°)',
+  };
+
+  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">Harmony Palette Generator</h1>
+          <p className="text-muted-foreground">
+            Create color harmonies based on color theory principles
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          {/* Controls */}
+          <div className="space-y-6">
+            <div className="p-6 border rounded-lg bg-card">
+              <h2 className="text-xl font-semibold mb-4">Base Color</h2>
+              <ColorPicker color={baseColor} onChange={setBaseColor} />
+            </div>
+
+            <div className="p-6 border rounded-lg bg-card">
+              <h2 className="text-xl font-semibold mb-4">Harmony Type</h2>
+              <div className="space-y-4">
+                <Select
+                  label="Harmony"
+                  value={harmonyType}
+                  onChange={(e) => setHarmonyType(e.target.value as HarmonyType)}
+                >
+                  <option value="monochromatic">Monochromatic</option>
+                  <option value="analogous">Analogous</option>
+                  <option value="complementary">Complementary</option>
+                  <option value="split-complementary">Split-Complementary</option>
+                  <option value="triadic">Triadic</option>
+                  <option value="tetradic">Tetradic (Square)</option>
+                </Select>
+
+                <p className="text-sm text-muted-foreground">
+                  {harmonyDescriptions[harmonyType]}
+                </p>
+
+                <Button
+                  onClick={generateHarmony}
+                  disabled={paletteMutation.isPending}
+                  className="w-full"
+                >
+                  {paletteMutation.isPending ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Generating..
+                    </>
+                  ) : (
+                    <>
+                      <Palette className="mr-2 h-4 w-4" />
+                      Generate Harmony
+                    </>
+                  )}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Results */}
+          <div className="space-y-6">
+            {palette.length > 0 && (
+              <>
+                <div className="p-6 border rounded-lg bg-card">
+                  <h2 className="text-xl font-semibold mb-4">
+                    Generated Palette ({palette.length} colors)
+                  </h2>
+                  <PaletteGrid colors={palette} />
+                </div>
+
+                <div className="p-6 border rounded-lg bg-card">
+                  <ExportMenu colors={palette} />
+                </div>
+              </>
+            )}
+
+            {palette.length === 0 && (
+              <div className="p-12 border rounded-lg bg-card text-center text-muted-foreground">
+                <Palette className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                <p>Select a harmony type and click Generate to create your palette</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}