/*
    1 - CSS variables.
 */
:root {
    /* reference only - does not alter media */
    --screen-xs: 600px;
    --screen-sm: 782px;
    --screen-md: 960px;
    --screen-lg: 1080px;
    --screen-xl: 1440px;
    /* end media sizes */
    /* NOTE https://github.com/WordPress/gutenberg/blob/wp/6.8/packages/base-styles/_breakpoints.scss */


    /* START EDITS */
    /* sets the max width for content (not padding) */
    --max-width-xs: 800px;
    --max-width-sm: 1000px;
    --max-width-md: 1400px;
    --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;
    --padding-large: 100px;

    /* fonts and text */
    --font-style: normal;
    --font-variant: normal;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 700;

    --font-family: gotham, sans-serif;
    --font-family-alt: ibm-plex-mono, sans-serif;

    --font-size: 18px;
    --wp--preset--font-size--small: 12px;
    --wp--preset--font-size--medium: 16px;
    --wp--preset--font-size--large: 20px;
    --wp--preset--font-size--x-large: 40px;

    --font-weight: 400;
    --line-height: 1.5;
    --spacing-text: 20px;

    --font-family-headline: gotham, sans-serif;
    --line-height-headline: 1.3;
    --spacing-headline: 20px;

    --font-size-headline1: 28px;
    --font-weight-headline1: 500;
    --font-size-headline2: 24px;
    --font-weight-headline2: 500;
    --font-size-headline3: 20px;
    --font-weight-headline3: 500;
    --font-size-headline4: 18px;
    --font-weight-headline4: 500;
    --font-size-headline5: 16px;
    --font-weight-headline5: 500;
    --font-size-headline6: 12px;
    --font-weight-headline6: 500;

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

    /* universal color naming */
    --color-alpha: #ff5013; /* orange */
    --color-bravo: #14aaec; /* blue */
    --color-charlie: #08bb6b; /* green */
    --color-delta: #fffaf6; /* beige */
    --color-echo: #2f2f2f; /* dark gray */
    
    --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(--black);
    --color-text-other: var(--white);

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

    /* border */
    --color-border: var(--black);
    --border-radius: 15px;
    --border-radius-large: 80px;
    --image-border-radius: 0px;

    /* buttons */
    --button-font-size: 16px;
    --button-font-family: var(--font-family);
    --button-weight: var(--weight-bold);
    --button-height: 50px;
    --button-border: 2px;
    --button-border-radius: 32px;

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

    --secondary-button-bg: var(--white);
    --secondary-button-border-color: var(--color-alpha);
    --secondary-button-color: var(--color-alpha);
    --secondary-button-hover-bg: var(--color-alpha);
    --secondary-button-hover-color: var(--white);
    /* END EDITS */
}

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

        --font-size-headline1: 36px;
        --font-size-headline2: 30px;
        --font-size-headline3: 24px;

        --wp--preset--font-size--large: 26px;
    }

}