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

:root {

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

    --color-primary: #12839F;

    --color-primary-variant: #004D6D;

    --color-accent: #00D7A0;

    --color-accent-light: #B9F4E5;

    --color-black: #181818;

    --color-grey-dark: #2B3D50;

    --color-grey-medium: #8d96a1;

    --color-grey-light: #ccd0d5;

    --color-grey-lighter: #f4f5f6;

    --color-white: #ffffff;

    --color-highlight: #9dff00;


    /* 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 page grid flow */
    --grid-row-gap: 3rem;

    /* Spacing system internal flow */
    --internal-space-xs: 0.2rem;
    --internal-space-sm: 0.5rem;
    --internal-space-md: 1rem;
    --internal-space-lg: 1.5rem;
    --internal-space-xl: 2rem;

    /* Global Page Gutter (Horizontal) */
    --page-gutter: 3rem;

}

@media (max-width: 1200px) {
    :root {
        --grid-row-gap: 2.5rem;
        --internal-space-xs: 0.15rem;
        --internal-space-sm: 0.4rem;
        --internal-space-md: 0.75rem;
        --internal-space-lg: 1.25rem;
        --internal-space-xl: 1.75rem;
        --page-gutter: 3rem; 
    }
}

@media (max-width: 800px) {
    :root {
        --grid-row-gap: 2rem;
        --internal-space-xs: 0.1rem;
        --internal-space-sm: 0.35rem;
        --internal-space-md: 0.5rem;
        --internal-space-lg: 1.0rem;
        --internal-space-xl: 1.5rem;
        --page-gutter: 1.5rem; 
    }
}