@font-face {
    font-family: "Roboto-Bold";
    font-weight: bold;
    font-weight: bolder;
    src: url("../fonts/roboto/Roboto-Bold.ttf");
}

@font-face {
    font-family: "Roboto-Regular";
    src: url("../fonts/roboto/Roboto-Regular.ttf");
}

@font-face {
    font-family: "Roboto-Light";
    src: url("../fonts/roboto/Roboto-Light.ttf");
}

@font-face {
    font-family: "Roboto-Thin";
    src: url("../fonts/roboto/Roboto-Thin.ttf");
}

@font-face {
    font-family: "SF-Pro-Light";
    src: url("../fonts/San Francisco Pro Text/SFProText-Light.ttf")
}

:root {
    --br-0: 0;
    --br-xs: 4px;
    --br-s: 8px;
    --br-m: 12px;
    --br-l: 16px;
    --br-xl: 20px;
    --br-2xl: 24px;
    --br-3xl: 32px;
    --br-4xl: 40px;
    --br-6xl: 56px;
    --br-7xl: 64px;
}
/* Общие стили для всех шрифтов */
p,
.f-14-400,
.f-14-500,
.f-15-400,
.f-16-400,
.f-16-500,
.f-16-600,
.f-17-600,
.f-17-400,
.f-18-400,
.f-18-500,
.f-18-600,
.f-20-400,
.f-20-500,
.f-24-400,
.f-24-600,
.f-28-600,
.f-30-500,
.f-40-500,
label,
.label,
.f-13,
.f-15,
.f-15-gray,
.f-17-bold,
.f-17-blue,
.f-20-bold,
.f-20-bold-500 {
    font-family: 'SF-Pro-Light', 'Roboto-Light', Verdan, Geneva, Tahoma, sans-serif;
    margin: 0 !important;
}

/* Общие стили для одинаковых line-height и letter-spacing */
.f-14,
.f-15,
.f-16,
.f-17 {
    line-height: 20px;
    letter-spacing: -0.24px;
}

.f-18,
.f-20,
.f-24 {
    letter-spacing: -0.5px;
}

.f-17-600,
.f-17-400,
.f-17-blue {
    letter-spacing: -0.41px;
    line-height: 22px;
}

.f-20-bold,
.f-20-bold-500 {
    font-size: 1.333em;
    font-weight: 600;
    color: var(--text-primary);
}

/* Конкретные размеры и веса */
.f-14-400 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.f-14-500 {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.f-15-400 {
    font-size: 15px;
    font-weight: 400;
}

.f-16-400 {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.f-16-500 {
    font-size: 16px;
    font-weight: 500;
}
.f-16-600{
    font-size: 16px;
    font-weight: 600;
}

.f-17-400 {
    font-size: 17px;
    font-weight: 400;
}

.f-17-600 {
    font-size: 17px;
    font-weight: 600;
}

.f-18-400 {
    font-size: 18px;
    font-weight: 400;
}

.f-18-500 {
    font-size: 18px;
    font-weight: 500;
}

.f-18-600 {
    font-size: 18px;
    font-weight: 600;
}

.f-18-600 {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}

.f-20-400 {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

.f-20-500{
    font-size: 20px;
    font-weight: 500;
}

.f-24-400 {
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
}

.f-24-600 {
    font-size: 24px;
    font-weight: 600;
    line-height: 24px;
}

.f-28-600 {
    font-size: 28px;
    font-weight: 600;
    line-height: 35px;
}

.f-30-500 {
    font-size: 30px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -1px;
}

.f-40-500 {
    font-size: 40px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -1px;
}

/* Дополнительные стили для цветов */
.text-black {
    color: var(--text-primary);
}

.text-white {
    color: var(--text-primary-inverse);
}

.text-blue {
    color: var(--text-brand);
}

.text-gray {
    color: var(--text-secondary);
}

.text-red {
    color: #EB1729;
}

.text-gren {
    color: #28A745;
}

/* Конкретные стили для текста */
label {
    /*font-weight: 600;*/
    font-size: 1em;
    color: var(--text-primary);
}
.label {
    font-weight: 400;
    font-size: 1.133em;
    color: var(--text-primary);
}

.f-13 {
    font-size: 0.867em;
    line-height: 18px;
    letter-spacing: -0.08px;
    color: var(--text-primary);
}

.f-15 {
    font-size: 1em;
    line-height: 20px;
    letter-spacing: -0.4px;
    color: var(--text-brand);
}

.f-15-gray {
    font-size: 1em;
    line-height: 20px;
    letter-spacing: -0.24px;
    color: var(--text-tertiary);
}

.f-17-bold {
    font-weight: 600;
    color: var(--text-primary);
}

.f-17-blue {
    font-size: 1.133em;
    color: var(--text-brand);
}

/* Адаптация размеров шрифта */
@media (max-width: 1200px) {
    .f-14-400 {
        font-size: 13px;
    }

    .f-15-400 {
        font-size: 14px;
    }

    .f-16-400, .f-16-500 {
        font-size: 15px;
    }

    .f-17-400, .f-17-600 {
        font-size: 16px;
    }

    .f-18-500, .f-18-600 {
        font-size: 17px;
    }

    .f-20-400, .f-20-bold, .f-20-bold-500 {
        font-size: 18px;
    }

    .f-24-400, .f-24-600 {
        font-size: 22px;
    }

    .f-30-500 {
        font-size: 26px;
    }

    .f-40-500 {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .f-14-400 {
        font-size: 12px;
    }

    .f-15-400 {
        font-size: 13px;
    }

    .f-16-400, .f-16-500 {
        font-size: 14px;
    }

    .f-17-400, .f-17-600 {
        font-size: 15px;
    }

    .f-18-500, .f-18-600 {
        font-size: 16px;
    }

    .f-20-400, .f-20-bold, .f-20-bold-500 {
        font-size: 17px;
    }

    .f-24-400, .f-24-600 {
        font-size: 20px;
    }

    .f-30-500 {
        font-size: 20px;
        line-height: 20px;
    }

    .f-40-500 {
        font-size: 22px;
        line-height: 20px;
    }
}

@media (max-width: 480px) {
    .f-14-400 {
        font-size: 11px;
    }

    .f-15-400 {
        font-size: 12px;
    }

    .f-16-400, .f-16-500 {
        font-size: 13px;
    }

    .f-17-400, .f-17-600 {
        font-size: 14px;
    }

    .f-18-500, .f-18-600 {
        font-size: 15px;
    }

    .f-20-400, .f-20-bold, .f-20-bold-500 {
        font-size: 16px;
    }

    .f-24-400, .f-24-600 {
        font-size: 18px;
    }

    .f-30-500 {
        font-size: 18px;
    }

    .f-40-500 {
        font-size: 20px;
    }
}