/*
    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: 600px;
    --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-style: normal;
    --font-variant: normal;
    --weight-normal: 300;
    --weight-medium: 400;
    --weight-bold: 700;

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

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

    --font-weight: 300;
    --letter-spacing: 1px;
    --line-height: 1.8;
    --spacing-text: 20px;

    --font-family-headline: "Rubik", sans-serif;
    --letter-spacing-headline: 1px;
    --line-height-headline: 1.3;
    --spacing-headline: 20px;

    --font-size-headline1: 32px;
    --font-weight-headline1: 300;
    --font-size-headline2: 28px;
    --font-weight-headline2: 400;
    --font-size-headline3: 24px;
    --font-weight-headline3: 400;
    --font-size-headline4: 21px;
    --font-weight-headline4: 300;
    --font-size-headline5: 16px;
    --font-weight-headline5: 400;
    --font-size-headline6: 12px;
    --font-weight-headline6: 400;

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

    /* universal color naming */
    --color-alpha: #000000;
    --color-bravo: #ffffff;
    --color-charlie: #1d1d1d;
    --color-delta: #e6e6e6;
    --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(--color-black);
    --color-text: var(--color-white);
    --color-text-other: var(--color-gray-light);

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

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

    /* buttons */
    --button-border: 2px;
    --button-border-radius: 0;
    --button-font-family: var(--font-family);
    --button-font-size: 14px;
    --button-line-height: 1.2;
    --button-padding: 13px 26px;
    --button-weight: 400;

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

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

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

        --font-size-headline1: 80px;
        --font-size-headline2: 32px;
        --font-size-headline3: 26px;
        --font-size-headline4: 22px;
    }

}