:root {
    --font-bold: 600;
    --font-light: 300;
    --font-size-large: 18px;
    --font-size-big: 16px;
    --font-size-regular: 14px;
    --font-size-small: 12px;

    --letter-spacing: -0.01em;

    --padding-default: 14px;
    --padding-icon-right: 19px;

    --transition-soft: 0.3s;

    --height-list-item: 48px;

    --height-button: 42px;

    --line-height-default: 102.86%;

    --area-top: 0;
    --area-top: constant(safe-area-inset-top);
    --area-top: env(safe-area-inset-top);
    --area-bottom: 0;
    --area-bottom: constant(safe-area-inset-bottom);
    --area-bottom: env(safe-area-inset-bottom);

    --width-laptop: 1200px;

    --height-banner: 62px;
    --height-header: 62px;
    --height-footer: 31px;
    --height-content: calc(
        100vh - var(--height-banner) - var(--height-header) - var(--height-footer) - 2 *
            var(--padding-default)
    );

    --login-form-width: 640px;
}

@media (min-width: 1440px) {
    :root {
        --font-size-large: 20px;
        --font-size-big: 18px;
        --font-size-regular: 16px;
        --font-size-small: 14px;

        --padding-default: 20px;
        --padding-icon-right: 24px;

        --height-list-item: 64px;
        --height-button: 52px;
    }
}