@use 'node_modules/sass-hex-rgb' as rgb;
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

$dark-100: #29292a;
$dark-200: #212123;
$dark-300: #121214;

$blue-100: #5689f7;
$blue-200: #437af1;
$blue-300: #2160ec;
$blue-400: #174bbb;

$green: #67c157;
$red: #f26c4b;

$light-100: #eee;

// prettier-ignore
$colours: (
    "text": $light-100,

    "background-primary": $dark-300,
    "background-secondary": $dark-200,
    "background-tertiary": $dark-100,

    "primary": $blue-300,
    "primary-hover": $blue-400,

    "secondary": $blue-200,
    "secondary-hover": $blue-100,

    "green": $green,
    "red": $red
);

:root {
    font-size: 16px;

    --font-family: 'Quicksand', sans-serif;

    @each $variable, $colour in $colours {
        --#{$variable}: #{$colour};
        --#{$variable}-rgb: #{rgb.toValues($colour)};
    }
}

head,
body {
    background-color: var(--background-primary);
    font-family: var(--font-family);
    color: var(--text);
}