/* ============================= */
/* Root variable and base styles */
/* ============================= */

:root {

    --font-main: "Reddit Sans", sans-serif;

    --color-primary: #343C60;

    --color-primary-dark: #262D4D;

    --color-primary-medium: #6E77A0;

    --color-primary-light: #CED4F1;

    --color-primary-lightest: #f3f5fe;

    --color-accent: #1F2EF8;

    --color-accent-dark: #1B00CC;

    --color-accent-medium: #80A6F2;

    --color-accent-light: #C5E4FF;

    --color-accent-lightest: #ECF5FF;

    --color-white: #ffffff;

    --color-highlight: #00d5ff;


    /* Z-Index Scale */
    --z-negative: -1;
    --z-base: 0;
    --z-overlay: 100;
    --z-header: 1000;
    --z-drawer: 2000;
    --z-modal: 9000;
    --z-max: 99999;

    /* Spacing System */
    --spacing-image-flow: 2rem;
    --spacing-grid-row: 2.5rem;
    --spacing-grid-col: 2rem;
    /* Desktop Default */

}

@media (max-width: 1200px) {
    :root {
        --spacing-image-flow: 1.5rem;
        --spacing-grid-col: 1.5rem;
    }
}

@media (max-width: 800px) {
    :root {
        --spacing-image-flow: 1rem;
        --spacing-grid-row: 1.5rem;
        --spacing-grid-col: 1rem;
    }
}