/**
    1.00 - CSS variables.
 */
:root {
    /* reference only - does not alter media queries - minimum values */
    --screen-sm: 0px;
    --screen-md: 688px;
    --screen-lg: 960px;
    --screen-xl: 1248px;
    /* end media sizes */


    /* START EDITS */
    --max-width-sm: 560px;
    --max-width-md: 940px;
    --max-width-lg: 1200px;
    --max-width-xl: 1600px;
    --gap: 20px 30px;
    --padding: 20px;

    /* fonts and text */
    --text-align: left;

    --font-family: "Spectral", serif;
    --font-family-alt: "Space Grotesk", sans-serif;
    --font-size: 17px;
    --font-style: normal;
    --font-variant: normal;
    --font-weight: 400;
    --font-weight-bold: 700;
    --letter-spacing: 0.3px;
    --line-height: 1.63;

    /* headline defaults override as necessary */
    --font-family-headline: "Inconsolata", sans-serif;
    --font-size-headline: 36px;
    --font-style-headline: normal;
    --font-variant-headline: normal;
    --font-weight-headline: 600;
    --font-weight-bold-headline: 800;
    --letter-spacing-headline: normal;
    --line-height-headline: 1.1;

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

    /* basic colors */
    --black: #000000;
    --white: #ffffff;
    --error: #4c1b31;
    --gray-dark: #333333;
    --gray-medium: #666666;
    --gray-light: #b5b5b5;

    /* universal color naming */
    --color-alpha: #040b2b;
    --color-bravo: #f6f5f3;
    --color-charlie: #143d6b;
    --color-delta: #2f240e;
    --color-echo: #0e194d;
    --color-foxtrot: #f5ebda;
    --color-golf: #4382cb;
    --color-hotel: #1b1509;

    --color-bg: var(--color-bravo);
    --color-text: var(--color-alpha);

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

    /* buttons and links */
    --color-link: var(--color-delta);
    --color-link-hover: var(--color-golf);
    --link-underline: none;

    --button-border: 2px;
    --button-border-radius: 32px;
    --button-font-family: var(--font-family);
    --button-font-size: 16px;
    --button-font-weight: var(--font-weight-bold);
    --button-height: 3lh;

    --button-bg: var(--color-golf);
    --button-border-color: var(--color-delta);
    --button-color: var(--color-bravo);
    --button-hover-bg: var(--color-delta);
    --button-hover-color: var(--color-golf);

    --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: 688px) {
    :root {
    }
}