/**
 * Mobile Typography - Optimized for customer-facing pages
 * Only applies on mobile devices (max-width: 640px)
 * Desktop uses default Tailwind sizes
 *
 * Mobile Text Size Scale (14px base):
 * .text-xs:   0.70rem ≈ 9.8px
 * .text-sm:   0.80rem ≈ 11.2px
 * .text-base: 0.90rem ≈ 12.6px
 * .text-lg:   1.00rem = 14px
 * .text-xl:   1.15rem ≈ 16.1px
 * .text-2xl:  1.30rem ≈ 18.2px
 * .text-3xl:  1.45rem ≈ 20.3px
 */

/* Mobile only - screens smaller than 640px (Tailwind's sm breakpoint) */
@media (max-width: 639px) {
  html {
    font-size: 14px;
  }

  /* Override Tailwind text sizes for mobile-optimized scaling */
  .text-xs { font-size: 0.70rem !important; }
  .text-sm { font-size: 0.80rem !important; }
  .text-base { font-size: 0.90rem !important; }
  .text-lg { font-size: 1.00rem !important; }
  .text-xl { font-size: 1.15rem !important; }
  .text-2xl { font-size: 1.30rem !important; }
  .text-3xl { font-size: 1.45rem !important; }
}

/* Desktop (640px and above) - uses default Tailwind sizes */
/* No overrides needed, Tailwind defaults apply automatically */