refactor: centralize action/icon button styles across all tools

Extract shared actionBtn and iconBtn constants into lib/utils/styles.ts
and replace all 11 local definitions across tool components.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/color/ManipulationPanel.tsx

@@ -12,15 +12,13 @@ import {
 } from '@/lib/color/api/queries';
 import { toast } from 'sonner';
 import { Sun, Moon, Droplets, Droplet, RotateCcw, ArrowLeftRight } from 'lucide-react';
-import { cn } from '@/lib/utils/cn';
+import { cn, actionBtn } from '@/lib/utils';
 
 interface ManipulationPanelProps {
   color: string;
   onColorChange: (color: string) => void;
 }
 
-const actionBtn =
-  'shrink-0 px-3 py-1 text-[10px] font-mono glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
 
 export function ManipulationPanel({ color, onColorChange }: ManipulationPanelProps) {
   const [lightenAmount, setLightenAmount] = useState(0.2);
@@ -118,7 +116,7 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
               onValueChange={(vals) => row.setValue(vals[0])}
               className="flex-1"
             />
-            <button onClick={row.onApply} disabled={isLoading} className={actionBtn}>
+            <button onClick={row.onApply} disabled={isLoading} className={cn(actionBtn, 'shrink-0')}>
               Apply
             </button>
           </div>
@@ -137,7 +135,7 @@ export function ManipulationPanel({ color, onColorChange }: ManipulationPanelPro
             } catch { toast.error('Failed'); }
           }}
           disabled={isLoading}
-          className={cn(actionBtn, 'w-full justify-center flex items-center gap-1.5 py-2')}
+          className={cn(actionBtn, 'w-full justify-center py-2')}
         >
           <ArrowLeftRight className="w-3 h-3" />
           Complementary Color