Mobile-First Responsive Design Framework

## ROLE
You are a responsive design specialist who has built mobile-first design frameworks for applications serving 100M+ mobile users. You have deep expertise in fluid typography, container queries, CSS Grid, Flexbox, and touch interaction patterns. You test across 50+ device configurations and understand the nuances of iOS Safari, Chrome Android, and Samsung Internet rendering.

## OBJECTIVE
Build a comprehensive mobile-first responsive design framework that handles every screen size from 320px to 4K displays. The framework should include fluid scaling, adaptive component patterns, and touch-optimized interactions that deliver a native-like experience on mobile devices.

## TASK
Create a responsive framework for:

**Project Details:**
- Application Type: [WEB APP/E-COMMERCE/CONTENT SITE/DASHBOARD/LANDING PAGE]
- Primary Device Split: [MOBILE %/TABLET %/DESKTOP %]
- Minimum Supported Width: [320px/360px/375px]
- Maximum Content Width: [1200px/1440px/1920px]
- CSS Framework: [TAILWIND/VANILLA/BOOTSTRAP/CUSTOM]
- Complex Layout Needs: [DATA TABLES/DASHBOARDS/IMAGE GALLERIES/FORMS]
- Touch Interactions: [SWIPE/DRAG-DROP/PULL-TO-REFRESH/GESTURES]

## Framework Components

### 1. Breakpoint System
- Define breakpoints with mobile-first min-width approach
- Justify each breakpoint with real device data (iPhone SE, iPhone 15, iPad, iPad Pro, laptop, desktop, ultrawide)
- Container query breakpoints for component-level responsiveness
- Breakpoint debugging utility (visual indicator showing current breakpoint)

### 2. Fluid Typography Scale
- `clamp()`-based font sizes that scale smoothly between breakpoints
- Heading scale (h1-h6) with responsive line-height and letter-spacing
- Body text, captions, labels, and overline text sizes
- Viewport-based scaling with minimum and maximum size guards
- Reading width optimization (45-75 characters per line)

### 3. Responsive Layout Patterns
- **Single Column Stack**: mobile default with proper spacing
- **Sidebar + Main**: collapsible sidebar with overlay on mobile, persistent on desktop
- **Dashboard Grid**: 1-col mobile, 2-col tablet, 4-col desktop with drag-reorderable cards
- **Card Grid**: auto-fill/auto-fit with minimum card width constraints
- **Split Screen**: 50/50 on desktop, stacked on mobile with priority ordering
- **Holy Grail**: header, footer, main, two sidebars with proper collapse behavior

### 4. Adaptive Component Patterns
- **Navigation**: bottom tab bar (mobile) transitioning to top navbar (desktop) with hamburger intermediate
- **Data Tables**: horizontal scroll on mobile, card view alternative, column priority hiding
- **Forms**: single-column stacked on mobile, multi-column on desktop with proper input sizing (44px touch targets)
- **Modals**: full-screen sheet on mobile, centered dialog on desktop, bottom sheet for actions
- **Image Galleries**: swipeable carousel on mobile, grid masonry on desktop
- **Pricing Tables**: horizontal scroll cards on mobile, side-by-side comparison on desktop

### 5. Touch Optimization
- Touch target minimum sizing (48x48px with 8px spacing)
- Tap highlight and active state feedback
- Swipe gesture handling for carousels, drawers, and dismissible elements
- Pull-to-refresh implementation pattern
- Scroll snap for horizontal content sections
- Overscroll behavior control (contain vs none)
- Safe area insets for notched devices and home indicator

### 6. Performance Considerations
- Responsive images with `srcset`, `sizes`, and `<picture>` element patterns
- Art direction for different aspect ratios per breakpoint
- Conditional loading of heavy components based on viewport
- Connection-aware responsive behavior (Network Information API)
- Viewport meta tag configuration for optimal mobile rendering