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

:root {
    --default-size: 1rem;
    --default-font-size: var(--default-size);
    --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/**
* 0:    0       0px
* 1:    0.25    4px
* 2:    0.5     8px
* 3:    1       16px
* 4:    1.25    20px
* 5:    1.5     24px
* 6:    2       32px
* 7:    2.5     40px
*/
$spacing: (
    0: 0,
    1: #{calc(var(--default-size) / 4)},
    2: #{calc(var(--default-size) / 2)},
    3: var(--default-size),
    4: #{calc(var(--default-size) * 1.2)},
    5: #{calc(var(--default-size) * 1.5)},
    6: #{calc(var(--default-size) * 2)},
    7: #{calc(var(--default-size) * 2.5)},
);

:root {
    // Base
    --base-color: #eee;
    --base-color-text: #456;
    --base-color-background: #fff;
    --base-color-border: #999;
    --base-color-light: #fff;
    --base-color-lighter: #fff;
    --base-color-dark: #ddd;
    --base-color-darker: #999;

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

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

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

    // Danger
    --danger-color: #c82e2b;
    --danger-color-light: #db5c5a;
    --danger-color-lighter: #ffe8e8;
    --danger-color-dark: #952220;
    --danger-color-darker: #641715;

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

    // Warning
    --warning-color: #ffecb5;
    --warning-color-light: #fff3cd;
    --warning-color-lighter: #fff8e2;
    --warning-color-dark: #856404;
    --warning-color-darker: #664d03;

    // Header
    --header-font-family: "Montserrat", "Montserrat override", "Arial",
        "Helvetica", sans-serif;
    --header-font-weight: 800;
    --header-font-size-1: #{map-get($spacing, 7)};
    --header-font-size-2: #{map-get($spacing, 6)};
    --header-font-size-3: #{map-get($spacing, 5)};
    --header-font-size-4: #{map-get($spacing, 4)};
    --header-font-size-5: #{map-get($spacing, 3)};
    --header-color-text: var(--base-color-text);

    // Buttons
    --button-font-family: var(--header-font-family);
    --button-font-weight: 600;
    --button-color: var(--base-color-light);
    --button-color-text: var(--base-color-text);
    --button-disabled-color: var(--base-color-dark);
    --button-disabled-color-text: var(--base-color-light);
    --button-dropdown-color-border: var(--base-color-border);
    --button-dropdown-color: var(--base-color-light);
    --button-dropdown-color-hover: var(--primary-color-lighter);
    --button-primary-color: var(--primary-color);
    --button-primary-color-text: var(--base-color-light);
    --button-secondary-color: var(--base-color-darker);
    --button-secondary-color-text: var(--base-color-light);
    --button-danger-color: var(--danger-color);
    --button-danger-color-text: var(--base-color-light);

    // Card
    --card-color: var(--base-color);
    --card-color-text: var(--base-color-text);

    // Hero
    --hero-color-text: #fff;
    --hero-caption-color: rgba(0, 0, 0, 0.5);
    --hero-caption-color-text: #ddd;
    --hero-caption-color-link: #eee;
    --hero-shadow: 0 0 8px #000;

    // Input
    --input-clear-icon-color: var(--base-color-dark);
    --input-clear-icon-color-hover: var(--base-color-light);
    --input-color: var(--base-color-light);
    --input-color-border: var(--base-color-darker);

    // Pagination
    --pagination-color: var(--base-color-light);
    --pagination-color-active: var(--primary-color);
    --pagination-color-hover: var(--primary-color);
    --pagination-color-disabled: var(--base-color);
    --pagination-color-disabled-text: var(--base-color-darker);

    // Tab
    --tab-color: var(--base-color-light);
    --tab-color-text: var(--base-color-text);
    --tab-color-border: var(--base-color-border);
    --tab-color-hover: var(--base-color-dark);

    // Table
    --table-color: var(--base-color-light);
    --table-color-even: #f8f8f8;
    --table-color-border: var(--base-color-border);
    --table-color-hover: var(--table-color);

    // Accents
    --accent-1-color: #3d4e5d;
    --accent-1-color-text: #e6f5eb;
    --accent-2-color: #cce8fb;
    --accent-2-color-text: #063954;
    --accent-3-color: #b5d5b5;
    --accent-3-color-text: #3d4e5d;

    // SKIP BELOW
    --navbar-color: var(--base-color-light);
    --navbar-color-dropdown: var(--base-color-light);
    --navbar-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

    --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
    --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;

    // Editor
    --editor-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    --editor-backdrop: rgba(255, 255, 255, 0.75);
}

// --primary-color-hover: #f1fdff;

@media (prefers-color-scheme: dark) {
    :root {
        // Base
        --base-color: #222;
        --base-color-text: #ccc;
        --base-color-background: #eee;
        --base-color-border: #999;
        --base-color-light: #333;
        --base-color-lighter: #444;
        --base-color-dark: #666;
        --base-color-darker: #999;

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

        --button-color: var(--base-color-lighter);
        --button-color-text: var(--base-color-background);
        --button-primary-color-text: var(--base-color-background);
        --button-secondary-color-text: var(--base-color-background);
        --button-danger-color-text: var(--base-color-background);

        --footer-color-border: rgba(255, 255, 255, 0.1);

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

        // Editor
        --editor-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
        --editor-backdrop: rgba(0, 0, 0, 0.75);
    }
}