fix: make palette selector buttons clickable with hover/active states

- Added cursor-pointer class
- Added hover:scale-105 and active:scale-95 animations
- Added focus ring for keyboard navigation
- Fixed text color contrast on selected button

frontend/app/color-preview/page.tsx

@@ -93,11 +93,11 @@ export default function ColorPreview() {
             <button
               key={key}
               onClick={() => setSelected(key as keyof typeof palettes)}
-              className="p-4 rounded-lg transition-all"
+              className="p-4 rounded-lg transition-all cursor-pointer hover:scale-105 active:scale-95 focus:outline-none focus:ring-2"
               style={{
                 backgroundColor: selected === key ? p.colors.primary : p.colors.surface,
                 border: `2px solid ${selected === key ? p.colors.foreground : p.colors.muted}`,
-                color: selected === key ? palette.colors.foreground : p.colors.secondary,
+                color: selected === key ? p.colors.background : p.colors.secondary,
               }}
             >
               <div className="font-bold text-sm">{p.name}</div>