/*common variables*/

:root {
    --container-width: 1400px;
    --side-spacing: 20px;
    --font-scale: 1;
    --font-scale--internal: .7;
    --raw-font-minimal: 14px;
    --raw-font-minimal--big: 20px;
    --raw-font-small: 1.5rem;
    --raw-font-medium: 2rem;
    --raw-font-big: 2.5rem;
    --raw-font-large: 3.5rem;
    --raw-font-bigger: 7rem;
}

:root.prefers_high_visibility {
    --raw-font-minimal: 16px;
}


/* font variables */

:root {
    --font-small: max(var(--raw-font-minimal), calc(var(--raw-font-small) * var(--font-scale)));
    --font-medium: max(var(--raw-font-minimal), calc(var(--raw-font-medium) * var(--font-scale)));
    --font-big: max(var(--raw-font-minimal--big), calc(var(--raw-font-big) * var(--font-scale)));
    --font-large: max(var(--raw-font-minimal--big), calc(var(--raw-font-large) * var(--font-scale)));
    --font-bigger: max(var(--raw-font-minimal), calc(var(--raw-font-bigger) * var(--font-scale)));
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

:root.prefers_high_visibility {
    --font-weight-light: 500;
    --font-weight-regular: 500;
    --font-weight-medium: 600;
    --font-weight-semibold: 700;
    --font-weight-bold: 700;
}

@media (min-width: 480px) {
     :root {
        --font-scale--internal: .8;
    }
}

@media (min-width: 992px) {
     :root {
        --font-scale--internal: .9;
    }
}

@media (min-width: 1440px) {
     :root {
        --font-scale--internal: 1;
    }
}


/* colors */

:root {
    --color-black: #000000;
    --color-dark: #131A2D;
    --color-accent: #F49D14;
    --color-accent--hover: #ffb049;
    --color-accent2: #F49D14;
    --color-accent2--hover: #ffb049;
    --color-blue: #EAEEFA;
    --color-light: #FAFBFE;
    --color-white: #FFFFFF;
}

:root.prefers_high_visibility {
    --color-black: #000000;
    --color-dark: #070b16;
    --color-accent: #693f00;
    --color-accent--hover: #e08a00;
    --color-accent2: #ffb742;
    --color-accent2--hover: #ffa71b;
    --color-blue: #f2f6ff;
    --color-light: #FAFBFE;
    --color-white: #FFFFFF;
}


/*
breakpoints:
xs -> s
-480px

s -> md
-992px

md -> lg
-1440px
*/