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

:root {
    // yes
    --default-font-size: 18px;
    --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    // --default-font-family: "Nunito", "Nunito override", "Arial", "Helvetica",
    //     sans-serif;

    // yes
    --base-color: #eee;
    --base-color-text: #456;
    --base-color-border: #999;
    --base-color-light: #fff;

    --base-color-dark: #ddd;
    --base-color-darker: #999;

    // yes
    --base-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

    --link-color: var(--primary-color);

    --primary-color-lighter: #cce8fb;
    --primary-color-light: #67bbf4;

    // yes
    --primary-color: #35a5f1;
    --primary-color-hover: #f1fdff;

    --primary-color-dark: #0e80ce;
    --primary-color-darker: #095589;

    --danger-color-lighter: #f3c8c8;
    --danger-color-light: #db5c5a;

    // yes
    --danger-color: #c82e2b;

    --danger-color-dark: #952220;
    --danger-color-darker: #641715;

    // yes
    --success-color: #198754;

    // yes
    --warning-color: #fff3cd;

    --header-font-family: "Montserrat", "Montserrat override", "Arial",
        "Helvetica", sans-serif;

    --navbar-color: var(--base-color-light);
    --navbar-color-dropdown: var(--base-color-light);

    --card-color: var(--base-color-light);

    --footer-color: var(--base-color);
    --footer-color-text: #888;
    --footer-color-border: rgba(0, 0, 0, 0.1);

    // yes
    --accent-1-color: #3d4e5d;
    --accent-1-color-text: #e6f5eb;

    // yes
    --accent-2-color: #cce8fb;
    --accent-2-color-text: #063954;

    // yes
    --banner-yellow-color: #ffd75a;
    --banner-yellow-color-text: #333;
    --banner-green-color: #198754;
    --banner-green-color-text: #fff;
    --banner-red-color: #952220;
    --banner-red-color-text: #fff;
    --banner-purple-color: #707;
    --banner-purple-color-text: #fff;
}

// @media (prefers-color-scheme: dark) {
//     :root {
//         // yes
//         --base-color: #222;
//         --base-color-text: rgba(255, 255, 255, 0.9);
//         --base-color-border: #000;
//         --base-color-light: #333;

//         // no
//         --base-color-dark: #444;
//         --base-color-darker: #999;

//         --footer-color-text: #999;
//         --footer-color-border: rgba(255, 255, 255, 0.1);

//         --primary-color-lighter: #095589;
//         --primary-color-light: #0e80ce;

//         // yes
//         --primary-color: #35a5f1;

//         --primary-color-dark: #67bbf4;
//         --primary-color-darker: #cce8fb;

//         --danger-color-lighter: #f3c8c8;
//         --danger-color-light: #db5c5a;

//         --danger-color: #db5c5a;
//         --danger-color-dark: #952220;
//         --danger-color-darker: #641715;

//         // yes
//         --accent-2-color: #063954;
//         --accent-2-color-text: #cce8fb;
//     }
// }

/* interim */
$font-size: var(--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,
);