:root {
    --color-primary-black: #000;
    --color-primary-white: #fff;
}

:root {
    --color-starter-theme-body-copy: #333;
    --color-starter-theme-primary: #1e2e82;
    --color-starter-theme-secondary: #9418a8;
    --color-starter-theme-light-black: #999;
    --expand-arrow-hover-color: #f0f0f0;
}

:root {
    --color-link-normal: var(--color-starter-theme-primary);
    --color-link-hover: var(--color-starter-theme-secondary);
    --color-link-visited: var(--color-starter-theme-primary);
}

:root {
    --color-alert-container-background: var(--color-primary-white);
    --color-alert-background-info: #00f3;
    --color-alert-background-warning: #ff03;
    --color-alert-background-critical: #f003;
    --color-alert-icon-info: #00f8;
    --color-alert-icon-warning: #ff08;
    --color-alert-icon-critical: #f008;
}

:root {
    --color-brand-navy: #003057;
    --color-brand-navy-opacity: rgba(0, 48, 87, 0.5);
    --color-brand-orange: #e1523e;
    --color-brand-pale-blue: #B7DDE1;
    --color-brand-teal: #006271;
    --color-brand-poppy: #DF1C00;
    --color-brand-peach: #FFF5EE;
    --color-black90: #414042;
    --color-medium-grey: #d9d9d9;
    --color-light-grey: #eaeaea;
    --color-light-grey-web: #f5f5f5;



}

:root {
    --font-size-body: 1.6rem;
    --font-size-h1: 4.8rem;
    --font-size-h2: 3rem;
    --font-size-h3: 2.4rem;
    --font-size-h4: 2.1rem;
    --font-size-h5: 1.8rem;
    --font-size-h6: 1.8rem;
}

:root {
    --font-weight-body: 400;
    --font-weight-h1: 400;
    --font-weight-h2: 700;
    --font-weight-h3: 500;
    --font-weight-h4: 400;
    --font-weight-h5: 700;
    --font-weight-h6: 600;
}

:root {
    --line-height-body: calc(26 / 16);
    --line-height-h1: calc(58 / 48);
    --line-height-h2: calc(36/30);
    --line-height-h3: calc(34 / 24);
    --line-height-h4: calc(26/21);
    --line-height-h5: calc(28/18);
    --line-height-h6: calc(26/16);
}

:root {
    --font-family-main: "Montserrat", sans-serif;
    --font-family-heading: "Lora", sans-serif;
}

:root {
    --bu: 1rem;
    --margin-small: var(--bu);
    --margin-medium: calc(var(--margin-small) * 2);
    --margin-normal: calc(var(--margin-medium) * 2);
    --margin-large: calc(var(--margin-normal) * 2);
    --margin-extra-large: calc(var(--margin-large) * 2);
}

:root {
    --content-width-normal: 144rem;
    --content-width-narrow: 96rem;
    --content-width-slim: 72rem;
}

@media screen and (width <= 1200px) {
    :root {
        --content-width-normal: 100%;
    }
}

@media screen and (width <= 800px) {
    :root {
        --content-width-narrow: 100%;
    }
}

:root {
    --size-xxx-small: 0.25rem;
    --size-xx-small: calc(var(--size-xxx-small) * 2);
    --size-x-small: calc(var(--size-xx-small) * 2);
    --size-small: calc(var(--size-xx-small) * 4);
    --size-medium: calc(var(--size-xx-small) * 8);
    --size-large: calc(var(--size-xx-small) * 16);
    --size-x-large: calc(var(--size-xx-small) * 32);
    --size-xx-large: calc(var(--size-xx-small) * 64);
}

:root {
    --z-index-9999: 9999;
}


:root {
    --mobile-inline-padding: 6vw;
}