<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

:root {
  --safe-area-top: env(safe-area-inset-top);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left: env(safe-area-inset-left);
  --safe-area-right: env(safe-area-inset-right);
}

body {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

:root {
  --text-xs: clamp(0.75rem, 2.5vw, 0.875rem);   /* 12-14px */
  --text-sm: clamp(0.875rem, 3vw, 1rem);        /* 14-16px */
  --text-base: clamp(1rem, 3.5vw, 1.125rem);    /* 16-18px */
  --text-lg: clamp(1.125rem, 4vw, 1.25rem);     /* 18-20px */
  --text-xl: clamp(1.25rem, 4.5vw, 1.5rem);     /* 20-24px */
  --text-2xl: clamp(1.5rem, 5vw, 2rem);         /* 24-32px */
}

// tailwind.config.js
screens: {
  'xs': '375px',    // iPhone SE, small phones
  'sm': '390px',    // iPhone 14/15/16 base
  'md': '430px',    // iPhone Pro Max, large phones
  'lg': '768px',    // Tablets
  'xl': '1024px',   // Desktop
}

<div className="w-full max-w-screen-sm mx-auto px-4 
  pt-[env(safe-area-inset-top)] 
  pb-[env(safe-area-inset-bottom)]">
  {children}
</div>

<nav className="fixed bottom-0 left-0 right-0 
  bg-white border-t border-gray-200
  pb-[env(safe-area-inset-bottom)]">
  <div className="flex justify-around py-2">
    {/* Nav items with min-h-[44px] */}
  </div>
</nav>

<button className="min-h-[44px] min-w-[44px] px-4 py-3
  active:scale-95 transition-transform
  touch-manipulation">
  {label}
</button>

<div className="overflow-y-auto overscroll-contain
  -webkit-overflow-scrolling: touch
  scroll-snap-type-y-mandatory">
  {children}
</div>