julienmonnerie/assets/css/partials/variables.scss

// ----------------------------------------------------------------------------
// VARIABLES
// ----------------------------------------------------------------------------

:root {

    // Fonts

    --text-font-family: Helvetica, Arial, sans-serif;
    --regular-font-weight: 400;
    --medium-font-weight: 500;
    --semi-bold-font-weight: 600;
    --bold-font-weight: 700;
    --text-font-size: 1rem;
    --text-line-height: calc(var(--text-font-size) * 1.2);

    // Dimensions

    --icon-size: 3.2rem;
    --sidebar-padding: 0.8rem;

    // Colors

    --black: #000;
    --white: #fff;
}

// Media queries

$tablet-media-query: 48rem;
$desktop-media-query: 62rem;

@media screen and (min-width: $tablet-media-query) {

    :root {

        // Fonts

        --text-font-size: 0.95rem;
        --text-line-height: calc(var(--text-font-size) * 1.1);

        // Dimensions

        --icon-size: 3rem;
    }
}

@media screen and (min-width: $desktop-media-query) {

    :root {

        // Fonts

        --text-font-size: 0.9rem;
        --text-line-height: calc(var(--text-font-size) * 1);

        // Dimensions

        --icon-size: 2.8rem;
    }
}