$baseFont: "source-sans-pro", Arial, sans-serif;

$fontSizeBase: 20px;

$baseViewportWidth: 1520px;
$baseViewportHeight: 970px;
$minSizeRatio: 0.7;
$maxSizeRatio: 1;

$xxs: 420px;
$xs: 576px;
$sm: 768px;
$md: 992px;
$lg: 1200px;
$xl: 1370px;
$xxl: 1570px;

:root {
    --container-padding: 1.5rem;

    --block-padding: 4.5rem;
    --block-padding-narrow: 2rem;

    --item-gap: 1.5rem;

    --white: #ffffff;
    --black: #1c1c22;
    --gray: #aaaaaa;
    --lightGray: #cccccc;
    --red: #ff4942;
    --outline: #0909ff;

    --xl-font-size: max(30px, 3rem); // 60px
    --lg-font-size: max(24px, 1.55rem); // 31px
    --md-font-size: max(19px, 1.05rem); // 21px
    --base-font-size: max(16px, 0.85rem); // 17px
    --xs-font-size: max(14px, 0.7rem); // 14px

    //--xl-line-height: max(37px, 3.7rem); // 60px / 74px
    //--lg-line-height: max(30px, 2rem); // 31px / 40px
    //--md-line-height: max(25px, 1.4rem); // 21px / 28px
    //--base-line-height: max(23px, 1.25rem); // 17px / 25px
    //--xs-line-height: max(19px, 10.25rem); // 14px / 21px

    --xl-line-height: 1.23;
    --lg-line-height: 1.33;
    --md-line-height: 1.4;
    --base-line-height: 1.5;
    --xs-line-height: 1.5;

    --mobile-menu: #{$md};
}

$white: var(--white);
$black: var(--black);
$gray: var(--gray);
$lightGray: var(--lightGray);
$red: var(--red);

$baseFontColor: $black;
$headingColor: $baseFontColor;
$baseBgColor: $white;

$outline: var(--outline);
$outlineOffset: 0.3rem;

$containerPadding: var(--container-padding);

$blockPadding: var(--block-padding);
$blockPaddingNarrow: var(--block-padding-narrow);

$itemGap: var(--item-gap);

$head1FontSize: var(--xl-font-size);
$head2FontSize: var(--lg-font-size);
$head3FontSize: var(--md-font-size);
$baseFontSize: var(--base-font-size);
$smallFontSize: var(--xs-font-size);

$head1LineHeight: var(--xl-line-height);
$head2LineHeight: var(--lg-line-height);
$head3LineHeight: var(--md-line-height);
$baseLineHeight: var(--base-line-height);
$smallLineHeight: var(--xs-line-height);

$baseFontWeight: 400;

$mobileMenu: $md;

$transitionSpeedTiming: 0.2s ease-out;

/* laptop < 1370 */
@media screen and (max-width: $xl) {
    :root {
        --block-padding: 3.5rem;
    }
}

@media screen and (max-width: $lg) {
}

@media screen and (max-width: $md) {
    :root {
        --block-padding: 3rem;
    }
}

/* mobile < 768 */
@media screen and (max-width: $sm) {
    :root {
        --block-padding: 2.5rem;
    }
}

@media screen and (max-width: $xs) {
}

@media screen and (max-width: $xxs) {
}
