/* Typography Styles */
@media (max-width: 1023px) {
    :root {
        --font-h1: 700 calc(var(--rpx) * 30)/1.1 var(--font-primary);        /* mobile/H1: 30px, line-height: 110% */
        --font-h2: 700 calc(var(--rpx) * 30)/1.1 var(--font-primary);        /* mobile/H2: 30px, line-height: 110% */
        --font-h3: 600 calc(var(--rpx) * 28)/1.15 var(--font-primary);       /* mobile/H3: 28px, line-height: 115% */
        --font-h4: 600 calc(var(--rpx) * 23)/1.15 var(--font-primary);       /* mobile/H4: 23px, line-height: 115% */
        --font-h5: 600 calc(var(--rpx) * 18)/1.15 var(--font-primary);       /* Оставляем предыдущее значение */

        --font-numbers: 600 calc(var(--rpx) * 35)/1.15 var(--font-primary);  /* Оставляем предыдущее значение */
        --font-numbers2: 600 calc(var(--rpx) * 60)/1.15 var(--font-primary);

        --font-p1: 500 calc(var(--rpx) * 14)/1.3 var(--font-primary);        /* mobile/P1: 14px, line-height: 130% */
        --font-p1-semibold: 600 calc(var(--rpx) * 14)/1.3 var(--font-primary); /* mobile/P1 (Semibold): 14px, line-height: 130% */
        --font-p2: 500 calc(var(--rpx) * 14)/1.5 var(--font-primary);        /* Оставляем предыдущее значение */
        --font-buttons: 600 calc(var(--rpx) * 14)/1 var(--font-primary);     /* mobile/button: 14px, line-height: 17px (≈1) */
        --font-search: 400 calc(var(--rpx) * 14)/1.2 var(--font-primary);    /* Оставляем предыдущее значение */
        --font-search-medium: 500 calc(var(--rpx) * 14)/1.2 var(--font-primary); /* Оставляем предыдущее значение */
        --font-menu: 500 calc(var(--rpx) * 20)/1.2 var(--font-primary);      /* mobile/burger menu items: 20px, line-height: 24px (1.2) */
        --font-menu-12: 500 calc(var(--rpx) * 12)/1.17 var(--font-primary);  /* mobile/item: 12px, line-height: 14px (≈1.17) */
        --font-input: 500 calc(var(--rpx) * 14)/1.2 var(--font-primary);     /* Оставляем предыдущее значение */
        --font-input-low: 600 calc(var(--rpx) * 10)/1.2 var(--font-primary); /* Оставляем предыдущее значение */
    }
}

@media (min-width: 1024px) {
    :root {
        --font-h1: 700 calc(var(--rpx) * 50)/1.15 var(--font-primary);
        --font-h2: 700 calc(var(--rpx) * 45)/1.1 var(--font-primary);
        --font-h3: 600 calc(var(--rpx) * 35)/1.15 var(--font-primary);
        --font-h4: 600 calc(var(--rpx) * 26)/1.15 var(--font-primary);
        --font-h5: 600 calc(var(--rpx) * 24)/1.15 var(--font-primary);
        --font-numbers: 600 calc(var(--rpx) * 35)/1.15 var(--font-primary);
        --font-numbers2: 600 calc(var(--rpx) * 60)/1.15 var(--font-primary);
        --font-p1: 500 calc(var(--rpx) * 18)/1.5 var(--font-primary);
        --font-p1-semibold: 600 calc(var(--rpx) * 18)/1.5 var(--font-primary);
        --font-p2: 500 calc(var(--rpx) * 14)/1.5 var(--font-primary);
        --font-buttons: 600 calc(var(--rpx) * 18)/1.2 var(--font-primary);
        --font-search: 400 calc(var(--rpx) * 14)/1.2 var(--font-primary);
        --font-search-medium: 500 calc(var(--rpx) * 14)/1.2 var(--font-primary);
        --font-menu: 500 calc(var(--rpx) * 20)/1.2 var(--font-primary);
        --font-menu-12: 500 calc(var(--rpx) * 12)/1.2 var(--font-primary);
        --font-input: 500 calc(var(--rpx) * 14)/1.2 var(--font-primary);
        --font-input-low: 600 calc(var(--rpx) * 10)/1.2 var(--font-primary);
    }
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

h1, .h1 {
    font: var(--font-h1);
}

h2, .h2 {
    font: var(--font-h2);
}

h3, .h3 {
    font: var(--font-h3);
}

h4, .h4 {
    font: var(--font-h4);
}

h5, .h5 {
    font: var(--font-h5);
}

.font-item {
    font: var(--font-menu-12);
}

.font-input {
    font: var(--font-input-low);
}

label {
    font: var(--font-input);
    color: var(--text);
    display: block;
}

p {
    margin: 0;
}

.p1 {
    font: var(--font-p1);
}

.p2 {
    font: var(--font-p2);
}

.p3 {
    font: var(--font-p3);
}

.p4 {
    font: var(--font-search);
}

.button-2 {
    font: var(--font-buttons);
}