/* Important declarations in this layer take precedence over legacy overrides. */
@layer typography {
    body.app-body, body.store-body, body.auth-body {
        --ui-page: 26px;
        --ui-section: 22px;
        --ui-card: 16px;
        --ui-body: 15px;
        --ui-price: 20px;
        --ui-metric: 26px;
        --ui-scale: 1;
        font-size: calc(var(--ui-body) * var(--ui-scale)) !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;
    }
    body.app-body.font-compact { --ui-scale: .96; }
    body.app-body.font-normal { --ui-scale: 1; }
    body.app-body.font-comfort { --ui-scale: 1.08; }

    :is(.app-body, .store-body, .auth-body) :is(h1, h2, h3, h4) {
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
    }
    :is(.app-body, .store-body, .auth-body) h1 { font-size: calc(var(--ui-page) * var(--ui-scale)) !important; }
    :is(.app-body, .store-body, .auth-body) h2 { font-size: calc(var(--ui-section) * var(--ui-scale)) !important; }
    :is(.app-body, .store-body, .auth-body) :is(h3, h4) { font-size: calc(var(--ui-card) * var(--ui-scale)) !important; }
    :is(.app-body, .store-body, .auth-body) :is(p, li, td, .muted, .empty-cart) {
        font-size: calc(var(--ui-body) * var(--ui-scale)) !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;
    }
    :is(.app-body, .store-body, .auth-body) :is(strong, b) { font-weight: 600 !important; letter-spacing: 0 !important; }
    :is(.app-body, .store-body, .auth-body) :is(label, legend, small, th, .eyebrow, .page-kicker, .form-help, .badge, .status-pill, .section-badge, .section-state, .form-note, .section-live-preview > span) {
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;
    }
    :is(.app-body, .store-body, .auth-body) :is(button, .primary-link, .secondary-link, .ghost-link, .store-nav a, .footer-links a, .nav-text, .profile-menu-link, .customer-tabs a, .customer-tabs button, .deployment-shortcuts a, .reorder-button, .section-toggle, .mobile-bottom-nav a) {
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
    }
    :is(.app-body, .store-body, .auth-body) :is(button, .primary-link, .secondary-link, .ghost-link, nav a) :is(span, strong, b) {
        font-size: inherit !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }
    :is(.app-body, .store-body, .auth-body) :is(input, select, textarea) {
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;
    }
    @media (min-width: 1025px) {
        :is(.app-body, .store-body, .auth-body) :is(input, select, textarea) {
            font-size: calc(var(--ui-body) * var(--ui-scale)) !important;
        }
        .app-body #modal-title { font-size: 20px !important; }
        .app-body #entity-modal .form { padding: 16px !important; border: 0 !important; border-radius: 6px !important; }
    }
    .app-body :is(.panel-head > span, .panel-head > small, .brand small, .account small, .nav-section-toggle, .summary-card small, .kpi small, .kpi em, .role-dashboard-card small, .deployment-stepper span) {
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
    }
    .app-body :is(.role-dashboard-intro h2, .role-dashboard-intro h1, .ops-hero h1, .ops-hero h2, .deployment-guide-copy h2, .deployment-hero h2) {
        font-size: calc(var(--ui-page) * var(--ui-scale)) !important;
    }
    .app-body :is(.account-grid strong, .hero-status-grid strong, .role-workflow-step strong, .event-list strong, .delivery-route-summary strong, .deployment-stepper strong, .deployment-guide-actions strong, .deployment-action strong, .section-live-preview strong) {
        font-size: calc(var(--ui-card) * var(--ui-scale)) !important;
        line-height: 1.35 !important;
    }
    .app-body :is(.kpi strong, .summary-card > strong, .role-dashboard-card > strong, .deployment-kpis strong, .analytics-card > strong) {
        font-size: calc(var(--ui-metric) * var(--ui-scale)) !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }
    .store-body :is(.product-body h3, .section-product-info strong, .hero-float strong, .category-grid strong, .hero-pick strong, .plan-grid h3, .shop-hero-panel-card strong, .track-card h3, .customer-subscription-card h3, .cart-line strong, .section-category-grid strong) {
        font-size: calc(var(--ui-card) * var(--ui-scale)) !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }
    .store-body :is(.product-price > strong, .price strong, .product-meta > strong, .section-product-price b, .hero-price-card > strong, .plan-price, .customer-wallet-summary strong, .cart-total strong, .checkout-summary-card > strong) {
        font-size: var(--ui-price) !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }
    .store-body .product-price { font-size: var(--ui-price) !important; }
    .store-body :is(.customer-kpis strong, .track-summary-card strong) { font-size: var(--ui-metric) !important; line-height: 1.25 !important; }
    .store-body :is(.shop-address-toggle > strong, .shop-hero-progress strong, .trust-strip strong, .footer-contact h3, .footer-links h3, .footer-brand strong) {
        font-size: var(--ui-card) !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
    }
    .store-body :is(.shop-address-toggle small, .section-product-info small, .section-product-price del, .shop-header-actions #cart-count) {
        font-size: 13px !important;
        font-weight: 500 !important;
    }
    .store-body .section-quantity strong { font-size: 14px !important; }
    .store-body .managed-banner .managed-section-heading h2 { font-size: var(--ui-section) !important; }
    .auth-body :is(.auth-copy strong, .auth-benefits strong) { font-size: var(--ui-card) !important; line-height: 1.35 !important; }
    .app-body :is(.icon-only, .icon-action), .app-body .panel-head .create-button { font-size: 0 !important; }
    @media (max-width: 1024px) {
        body.app-body, body.store-body, body.auth-body {
            --ui-page: 22px;
            --ui-section: 20px;
            --ui-card: 15px;
            --ui-body: 14px;
            --ui-price: 18px;
            --ui-metric: 22px;
        }
        .store-body .mobile-bottom-nav a { font-size: 12px !important; }
        .app-body .topbar > .menu { font-size: 0 !important; }
    }
}