responsive-system

# Responsive System

Breakpoint system inspired by DesignCode UI (720/920/1200px).

## Agent Workflow (MANDATORY)

Before implementation:
1. **fuse-ai-pilot:explore-codebase** - Check existing breakpoints
2. **fuse-ai-pilot:research-expert** - Container queries support

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

## Breakpoint Scale

| Name | Width | Tailwind | Use Case |
|------|-------|----------|----------|
| xs | 0-479px | default | Mobile portrait |
| sm | 480-719px | `sm:` | Mobile landscape |
| md | 720-919px | `md:` | Tablet portrait |
| lg | 920-1199px | `lg:` | Tablet landscape |
| xl | 1200-1439px | `xl:` | Desktop |
| 2xl | 1440px+ | `2xl:` | Large desktop |

## Tailwind v4 Configuration

```css
/* app.css */
@import "tailwindcss";

@theme {
  --breakpoint-sm: 480px;
  --breakpoint-md: 720px;
  --breakpoint-lg: 920px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1440px;
}
```

## Mobile-First Pattern

```tsx
/* Start mobile, enhance upward */
<div className="
  grid grid-cols-1      /* mobile: 1 column */
  sm:grid-cols-2        /* sm: 2 columns */
  lg:grid-cols-3        /* lg: 3 columns */
  xl:grid-cols-4        /* xl: 4 columns */
  gap-4 sm:gap-6 lg:gap-8
">
```

## Container Queries (Modern)

```tsx
/* Parent container */
<div className="@container">
  {/* Child responds to parent, not viewport */}
  <div className="@md:flex @md:gap-4">
    <div className="@md:w-1/2">Left</div>
    <div className="@md:w-1/2">Right</div>
  </div>
</div>
```

## Container Query Breakpoints

```css
@theme {
  --container-3xs: 8rem;   /* 128px */
  --container-2xs: 12rem;  /* 192px */
  --container-xs: 16rem;   /* 256px */
  --container-sm: 20rem;   /* 320px */
  --container-md: 28rem;   /* 448px */
  --container-lg: 32rem;   /* 512px */
  --container-xl: 36rem;   /* 576px */
}
```

## Fluid Typography

```css
/* Clamp for smooth scaling */
.hero-title {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
  line-height: 1.1;
}

/* Tailwind approach */
className="tex