/*
    1 - CSS variables.
 */

:root {
    /* min-width reference only - does not alter media
       max-width requires -1 pixel */
    --screen-xs: 576px;
    --screen-sm: 768px;
    --screen-md: 992px;
    --screen-lg: 1200px;
    --screen-xl: 1440px;
    /* end media sizes */

/*
// Most used breakpoints
$break-huge: 1440px;
$break-wide: 1280px;
$break-xlarge: 1080px;
$break-large: 960px;    // admin sidebar auto folds
$break-medium: 782px;   // adminbar goes big
$break-small: 600px;
$break-mobile: 480px;
$break-zoomed-in: 280px;
/*

    /* START EDITS */
    --page-width-small: 450px;
    --page-width-medium: 900px;
    --page-width-large: 1200px;
    --page-width: 1400px;
    --page-width-extra: 1600px;
    --padding: 20px;

    /* fonts and text */
    --font-family: 'Asap', sans-serif;
    --font-family-h: 'Gafata', sans-serif;
    --font-family-alt: 'Asap Condensed', sans-serif;

    --font-size: 18px;
    --font-size-sm: 14px;
    --font-size-lg: 20px;
    --font-size-h1: 30px;
    --font-size-h2: 16px;
    --font-size-h3: 20px; /* not set */
    --font-size-h4: 20px; /* not set */
    --font-size-h5: 20px; /* not set */
    --font-size-h6: 20px; /* not set */

    --line-height: 1.2;
    --line-height-h: 1;

    --spacing-text: 20px;
    --spacing-h: 20px;

    --font-style: normal;
    --font-variant: normal;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    --font-weight: 400;
    --font-weight-h: 400;

    /* colors */
    --black: #000000;
    --white: #ffffff;
    --error: #d50404;
    --gray-dark: #333333;
    --gray-medium: #888888;
    --gray-light: #b5b5b5;

    /* universal color naming */
    --color-alpha: #5fac55; /* green */
    --color-bravo: #224635; /* dark green */
    --color-charlie: rgba(168,200,83,0.22); /* menu green */
    --color-delta: #fcde50; /* yellow */
    --color-echo: #eb9743; /* orange */
    --color-foxtrot: #e06937; /* red */
    --color-golf: #ecf3d8; /* menu green no alpha*/
    --color-hotel: #e4f4e5; /* light green */
    --color-india: #ffeede; /* light orange */
    --color-juliett: #ffe2da; /* light red */


    --color-bg: var(--white);
    --color-text: var(--color-bravo);
    --color-text-other: var(--white);

    --color-link: var(--color-text);
    --button-bg: var(--color-alpha);
    --color-link-hover: var(--color-alpha);
    --button-hover-bg: var(--white);

    /* border */
    --color-border: var(--gray-dark);
    --border-radius: 0px;
    /* END EDITS */
}

@media all and (min-width: 782px) {
    :root {
        --font-size: 26px;
        --font-size-sm: 20px;
        --line-height: 1.4;

        --font-size-h1: 40px;
        --font-size-h2: 24px;
    }

}