/*
    1 - CSS variables.
 */
:root {
    /* reference only - does not alter media */
    --screen-xs: 576px;
    --screen-sm: 768px;
    --screen-md: 992px;
    --screen-lg: 1200px;
    --screen-xl: 1440px;
    /* end media sizes */


    /* START EDITS */
    /* sets the max width for content (not padding) */
    --max-width: 1400px;
    --max-width-sm: 800px;
    --max-width-md: 1200px;
    --max-width-lg: 1600px;
    --max-width-xl: 2000px;
    /* sets the amount of space around and between containers - particularly from content to screen left/right */
    --padding: 20px;

    /* fonts and text */
    --font-family: 'ff-tisa-sans-web-pro', sans-serif;
    --font-family-h: 'abril-text', serif;
    --font-family-alt: 'proxima-nova', sans-serif;

    --font-size: 16px;
    --font-size-sm: 12px;    
    --font-size-h1: 34px;
    --font-size-h2: 26px;
    --font-size-h3: 26px;
    --font-size-h4: 14px;
    --font-size-h5: 16px;
    --font-size-h6: 12px;

    --line-height: 1.4;
    --line-height-h: 1.2;

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

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

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

    /* colors */
    --black: #000000;
    --white: #ffffff;
    --error: #BE1F2D;
    --gray-dark: #333333;
    --gray-medium: #666666;
    --gray-light: #E8E8E8;

    /* universal color naming */
    --color-alpha: #03673C;
    --color-bravo: #E2D0A5;
    --color-charlie: #8DC057;
    --color-delta: #2D6095;
    --color-echo: #D1E3DB;
    --color-foxtrot: #F6F0E3;
    --color-golf: #EAF4E0;
    --color-hotel: #E8F0F3;
    /* WP block-classes follow: .has-alpha-background-color .has-bravo-color */

    --color-bg: var(--white);
    --color-text: var(--gray-medium);
    --color-text-other: var(--white);

    --color-link: var(--color-bravo);
    --color-link-hover: var(--color-alpha);

    /* border */
    --color-border: var(--gray-dark);
    --border-radius: 20px;

    /* buttons */
    --button-font-size: 18px;
    --button-font-family: var(--font-family-alt);

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

    --button-height: 40px;
    --button-border-radius: 20px;
    /* END EDITS */
}

@media all and (min-width: 992px) {
    :root {
        --font-size: 18px;

        --font-size-h1: 48px;
        --font-size-h2: 30px;
        --font-size-h3: 30px;
        --font-size-h4: 16px;
        --font-size-h5: 18px;
    }

}