// Colors

$dark: #5C6163;
$main-color: #1971D4;
$main-color-hover: #2A86ED;
$secondary-main: #1D252C;
$gray: rgba(0, 0, 0, 0.20);
$light-gray: rgba(0, 0, 0, 0.06);

//Fonts

@mixin branded-font {
    font-family: 'Helvetica Neue', sans-serif;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@mixin base-font {
    font-family: 'Helvetica Neue', sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// Functions

@function get-desktop-vw($target) {
    $vw-context: (1800 * 0.01) * 1px;
    @return ($target/$vw-context) * 1vw;
}

@function get-mobile-vw($target) {
    $vw-context: (320 * 0.01) * 1px;
    @return ($target/$vw-context) * 1vw;
}