@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;1000&display=swap");

:root {
    --base-colour: #efefef;
    --base-colour-text: #333;
}

@media (prefers-color-scheme: dark) {
    :root {
        --base-colour: #333;
        --base-colour-text: #efefef;
    }
}

$default-font-family: "Nunito", "Nunito override", "Arial", "Helvetica",
    sans-serif;
$default-font-size: 18px;

$base-colour: #efefef;

/* interim */
$font-size: $default-font-size;

/* old variables */

$font-color: rgba(255, 255, 255, 1);
$background-color: rgba(40, 44, 48, 1);

$primary-color-lighter: #cce8fb;
$primary-color-light: #67bbf4;
$primary-color: #35a5f1;
$primary-color-dark: #0e80ce;
$primary-color-darker: #095589;

$secondary-color: #9ca8b0;
$secondary-color-dark: #6e7f8a;
$secondary-color-darker: #49545c;

$danger-color-lighter: #f3c8c8;
$danger-color-light: #db5c5a;
$danger-color: #c82e2b;
$danger-color-dark: #952220;
$danger-color-darker: #641715;

$success-color-lighter: #b5f1d5;
$success-color-light: #26d081;
$success-color: #198754;
$success-color-dark: #12653e;
$success-color-darker: #0c4329;

$warning-color-lighter: #fff8e2;
$warning-color-light: #fff6d9;
$warning-color: #fff3cd;
$warning-color-dark: #ffd75a;
$warning-color-darker: #ffc203;

$border-color: #dddddd;
$secondary-background-color: #efefef;

$outline-color: rgba(0, 0, 0, 0.5);
$outline-hover-color: #fff;

$spacer: (
    0: 0,
    1: 0.5rem,
    2: 0.75rem,
    3: 1rem,
    4: 1.5rem,
    5: 3rem,
);