/*
 * Storefront/User UI readability patch.
 * Scope: public storefront + customer/auth/account pages only (body.storefront-app).
 * Admin typography is intentionally untouched.
 *
 * Goal: make every existing typography step slightly larger while preserving
 * the current hierarchy and responsive breakpoints.
 */

.storefront-app .text-xs { font-size: 13px !important; }
.storefront-app .text-sm { font-size: 15px !important; }
.storefront-app .text-base { font-size: 17px !important; }
.storefront-app .text-lg { font-size: 19px !important; }
.storefront-app .text-xl { font-size: 21px !important; }
.storefront-app .text-2xl { font-size: 25px !important; }
.storefront-app .text-3xl { font-size: 31px !important; }
.storefront-app .text-4xl { font-size: 37px !important; }
.storefront-app .text-5xl { font-size: 49px !important; }

.storefront-app [class~="text-[7px]"] { font-size: 8px !important; }
.storefront-app [class~="text-[8px]"] { font-size: 9px !important; }
.storefront-app [class~="text-[9px]"] { font-size: 10px !important; }
.storefront-app [class~="text-[10px]"] { font-size: 11px !important; }
.storefront-app [class~="text-[11px]"] { font-size: 12px !important; }
.storefront-app [class~="text-[13px]"] { font-size: 14px !important; }
.storefront-app [class~="text-[14px]"] { font-size: 15px !important; }
.storefront-app [class~="text-[15px]"] { font-size: 16px !important; }
.storefront-app [class~="text-[16px]"] { font-size: 17px !important; }
.storefront-app [class~="text-[17px]"] { font-size: 18px !important; }
.storefront-app [class~="text-[28px]"] { font-size: 29px !important; }

/* Tailwind sm breakpoint. Keep responsive typography behavior intact. */
@media (min-width: 640px) {
    .storefront-app [class~="sm:text-xs"] { font-size: 13px !important; }
    .storefront-app [class~="sm:text-sm"] { font-size: 15px !important; }
    .storefront-app [class~="sm:text-base"] { font-size: 17px !important; }
    .storefront-app [class~="sm:text-lg"] { font-size: 19px !important; }
    .storefront-app [class~="sm:text-xl"] { font-size: 21px !important; }
    .storefront-app [class~="sm:text-2xl"] { font-size: 25px !important; }
    .storefront-app [class~="sm:text-3xl"] { font-size: 31px !important; }
    .storefront-app [class~="sm:text-4xl"] { font-size: 37px !important; }
    .storefront-app [class~="sm:text-5xl"] { font-size: 49px !important; }
    .storefront-app [class~="sm:text-[9px]"] { font-size: 10px !important; }
    .storefront-app [class~="sm:text-[10px]"] { font-size: 11px !important; }
    .storefront-app [class~="sm:text-[11px]"] { font-size: 12px !important; }
    .storefront-app [class~="sm:text-[13px]"] { font-size: 14px !important; }
    .storefront-app [class~="sm:text-[14px]"] { font-size: 15px !important; }
    .storefront-app [class~="sm:text-[17px]"] { font-size: 18px !important; }
    .storefront-app [class~="sm:text-[28px]"] { font-size: 29px !important; }
}

/* Tailwind md breakpoint. */
@media (min-width: 768px) {
    .storefront-app [class~="md:text-base"] { font-size: 17px !important; }
    .storefront-app [class~="md:text-lg"] { font-size: 19px !important; }
    .storefront-app [class~="md:text-3xl"] { font-size: 31px !important; }
    .storefront-app [class~="md:text-4xl"] { font-size: 37px !important; }
}