/*
    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: 1200px;
    --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;

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

    --font-family: "Inter", sans-serif;
    --font-family-alt: sans-serif;

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

    --font-weight: 500;
    --line-height: 1.6;
    --spacing-text: 20px;

    --font-family-headline: sans-serif;
    --line-height-headline: 1;
    --spacing-headline: 20px;

    --font-size-headline1: 40px;
    --font-weight-headline1: 800;
    --font-size-headline2: 32px;
    --font-weight-headline2: 800;
    --font-size-headline3: 24px;
    --font-weight-headline3: 700;
    --font-size-headline4: 20px;
    --font-weight-headline4: 400;
    --font-size-headline5: 16px;
    --font-weight-headline5: 400;
    --font-size-headline6: 12px;
    --font-weight-headline6: 400;

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

    /* universal color naming */
    --color-alpha: #16697a;
    --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(--black);
    --color-text-other: var(--white);

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

    /* border */
    --color-border: var(--gray-dark);
    --border-radius: 0px;
    --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(--color-bravo);
    --secondary-button-border-color: var(--color-bravo);
    --secondary-button-color: var(--white);
    --secondary-button-hover-bg: var(--white);
    --secondary-button-hover-color: var(--color-bravo);
    /* END EDITS */
}

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

        --font-size-headline1: 50px;
        --font-size-headline2: 40px;
    }

}