Responsive Design Test Page

CSS Variables Test

This text uses the apple-space CSS variable.

Background using apple-space variable

Grid Layout Test

Item 1
Item 2
Item 3
Item 4

Button Styles Test

Hover Me Success Button Warning Button

Typography Test

Heading 1

Heading 2

Heading 3

This is a paragraph demonstrating the improved typography system with better line heights and spacing.

This is small text showing proper scaling.

Mobile-Specific Styles

This section has special styling that only applies on mobile devices (screens smaller than 768px).

Focus Management Test

Link Focus

Fluid Typography Test

This text uses fluid typography that scales smoothly between breakpoints.

Accessibility Features Test

This container demonstrates focus trapping capabilities.