$black: #151515;
$white: #e8e3e3;

$red: #B66467;
$yellow: #D9BC8C;
$green: #8C977D;
$blue: #8DA3B9;
//$dblue: #222c45;
$purple: #A988B0;

$primary: $green;

@font-face {
    font-family: 'Mona-Sans';
    src: url('../fonts/Mona-Sans.woff2') format('woff2 supports variations'),
        url('../fonts/Mona-Sans.woff2') format('woff2-variations');
    font-weight: 200 900;
    font-stretch: 75% 125%;
}
@font-face {
    font-family: 'Hubot-Sans';
    src: url('../fonts/Hubot-Sans.woff2') format('woff2 supports variations'),
        url('../fonts/Hubot-Sans.woff2') format('woff2-variations');
    font-weight: 200 900;
    font-stretch: 75% 125%;
}

$font-header: "Mona-Sans", sans-serif;
$font-body: "Hubot-Sans", sans-serif;

@function hexToRGB($hex) {
    @return red($hex), green($hex), blue($hex);
}

:root {
    --red: #{hexToRGB($red)};
    --yellow: #{hexToRGB($yellow)};
    --green: #{hexToRGB($green)};
    --blue: #{hexToRGB($blue)};
    --purple: #{hexToRGB($purple)};
}

// I want to use this somewhere
//background: linear-gradient(200deg, rgba($primary, 0.5) 1.7%, rgba($black, 0) 30%);