component-variants

# Component Variants

Three-style system inspired by DesignCode UI: Glass, Outline, Flat.

## Agent Workflow (MANDATORY)

Before implementation:
1. **fuse-ai-pilot:explore-codebase** - Check existing variant patterns
2. **fuse-ai-pilot:research-expert** - cva/class-variance-authority docs

After: Run **fuse-ai-pilot:sniper** for validation.

## The Three Styles

| Style | Characteristics | Use Case |
|-------|-----------------|----------|
| **Glass** | Blur + transparency + glow | Premium, modern, hero |
| **Outline** | Border only, no fill | Secondary actions |
| **Flat** | Solid color, no effects | Dense UI, fallback |

## Implementation with CVA

```tsx
import { cva, type VariantProps } from "class-variance-authority";

const cardVariants = cva(
  "rounded-2xl p-6 transition-all duration-200", // base
  {
    variants: {
      variant: {
        glass: [
          "bg-white/80 backdrop-blur-xl",
          "border border-white/20",
          "shadow-xl shadow-black/5",
        ],
        outline: [
          "bg-transparent",
          "border-2 border-primary/30",
          "hover:border-primary/50",
        ],
        flat: [
          "bg-surface",
          "border border-border",
        ],
      },
      size: {
        sm: "p-4 rounded-xl",
        default: "p-6 rounded-2xl",
        lg: "p-8 rounded-3xl",
      },
    },
    defaultVariants: {
      variant: "glass",
      size: "default",
    },
  }
);

interface CardProps extends VariantProps<typeof cardVariants> {
  children: React.ReactNode;
}

export function Card({ variant, size, children }: CardProps) {
  return (
    <motion.div
      className={cardVariants({ variant, size })}
      whileHover={{ y: -4 }}
    >
      {children}
    </motion.div>
  );
}
```

## Button Variants

```tsx
const buttonVariants = cva(
  "inline-flex items-center justify-center font-medium transition-all",
  {
    variants: {
      variant: {
        glass: [
          "bg-white/20 backdrop-blur-md",
          "border bor