@font-face {
    font-family: 'TehranLightIranSans';
    src: url('/fonts/iran-sans-mobile-noen.ttf') format('truetype');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'IRANSansX';
    src: url('/fonts/iran-sans-mobile-noen.ttf') format('truetype');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --tehranlight-font-family:
        'IRANSansX',
        'TehranLightIranSans',
        Tahoma,
        Arial,
        sans-serif;
}

html,
body,
*,
*::before,
*::after,
body *,
body *::before,
body *::after,
button,
input,
select,
textarea,
option,
optgroup,
table,
code,
kbd,
samp,
pre,
legend,
datalist,
output,
summary,
dialog,
svg text,
::file-selector-button,
input::placeholder,
textarea::placeholder {
    font-family: var(--tehranlight-font-family) !important;
}

button,
input,
select,
textarea,
option,
optgroup,
::file-selector-button {
    font-family: var(--tehranlight-font-family) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    font-family: var(--tehranlight-font-family) !important;
}

/* TehranLight centralized typography scale — V49
   Single source of truth for storefront, account, admin and print typography.
   The scale is intentionally compact, similar to dense Iranian e-commerce layouts:
   navigation/meta stay small, body text stays readable, and headings remain restrained.
   Tune these values here; feature stylesheets consume the tokens. */
:root {
    /* V49.2 — Digikala-inspired visual calibration.
       Tiny legacy text is lifted into the 12px floor; navigation/card/body text
       is concentrated around 12–14px; section/page headings are deliberately restrained. */
    --tl-type-100: 12px;
    --tl-type-200: 12px;
    --tl-type-300: 13px;
    --tl-type-400: 13px;
    --tl-type-500: 14px;
    --tl-type-600: 14px;
    --tl-type-700: 16px;
    --tl-type-800: 18px;
    --tl-type-900: 20px;
    --tl-type-1000: 22px;
    --tl-type-1100: 24px;
    --tl-type-1200: 28px;
    --tl-type-1300: 32px;
    --tl-type-1400: 36px;
    --tl-type-1500: 40px;
    --tl-type-1600: 44px;

    --tl-type-fluid-caption: clamp(12px, .72vw, 13px);
    --tl-type-fluid-body: clamp(13px, .9vw, 14px);
    --tl-type-fluid-subtitle: clamp(14px, 1.1vw, 16px);
    --tl-type-fluid-title: clamp(18px, 1.45vw, 22px);
    --tl-type-fluid-page-title: clamp(20px, 1.8vw, 26px);
    --tl-type-fluid-display: clamp(24px, 2.4vw, 34px);

    /* Semantic aliases for all new UI from this version onward. */
    --tl-text-caption: var(--tl-type-100);
    --tl-text-meta: var(--tl-type-200);
    --tl-text-small: var(--tl-type-300);
    --tl-text-body: var(--tl-type-400);
    --tl-text-body-strong: var(--tl-type-500);
    --tl-text-control: var(--tl-type-500);
    --tl-text-card-title: var(--tl-type-400);
    --tl-text-price: var(--tl-type-500);
    --tl-text-subtitle: var(--tl-type-700);
    --tl-text-section-title: var(--tl-type-800);
    --tl-text-page-title: var(--tl-type-900);
    --tl-text-display: var(--tl-type-fluid-display);
}

@media (max-width: 840px) {
    :root {
        /* Mobile mirrors the dense Digikala-style hierarchy:
           readable cards/navigation, restrained headings and no oversized hero type. */
        --tl-type-100: 12px;
        --tl-type-200: 12px;
        --tl-type-300: 12px;
        --tl-type-400: 13px;
        --tl-type-500: 14px;
        --tl-type-600: 14px;
        --tl-type-700: 16px;
        --tl-type-800: 18px;
        --tl-type-900: 20px;
        --tl-type-1000: 22px;
        --tl-type-1100: 24px;
        --tl-type-1200: 26px;
        --tl-type-1300: 28px;
        --tl-type-1400: 32px;
        --tl-type-1500: 36px;
        --tl-type-1600: 40px;
    }
}

/* V49.2 calibration notes:
   - 12px: minimum visible/meta/badge/navigation floor.
   - 13–14px: product cards, menus, forms, controls and prices.
   - 16–18px: subtitles and section headings.
   - 20–24px: page titles.
   - 28px+: exceptional hero/display emphasis only.
   All V49-converted first-party stylesheets consume this one scale. */