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

:root {
    --color-brand-red: #e31937;
    --color-brand-blue: #0069aa;
    --color-brand-blue-tertiary: #b4c9e5;
    --color-brand-light-grey: #f5f5f5;
    --color-brand-dark-grey: #666666;
    --color-black-20-percent: rgb(from var(--color-primary-black) r g b / 20%);
}

:root {
    --color-link-normal: var(--color-brand-blue);
    --color-link-hover: var(--color-brand-blue);
    --color-link-visited: var(--color-brand-blue);
}

:root {
    --color-alert-container-background: var(--color-primary-white);
    --color-alert-background-info: var(--color-brand-light-grey);
    --color-alert-background-warning: var(--color-brand-light-grey);
    --color-alert-background-critical: var(--color-brand-light-grey);
    --color-alert-text-info: var(--color-primary-black);
    --color-alert-text-warning: var(--color-primary-black);
    --color-alert-text-critical: var(--color-primary-black);
    --color-alert-icon-info: var(--color-primary-black);
    --color-alert-icon-warning: var(--color-brand-blue);
    --color-alert-icon-critical: var(--color-brand-red);
}

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

:root {
    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
}

:root {
    --font-weight-body: var(--font-weight-light);
    --font-weight-h1: var(--font-weight-light);
    --font-weight-h2: var(--font-weight-light);
    --font-weight-h3: var(--font-weight-bold);
    --font-weight-h4: var(--font-weight-bold);
    --font-weight-h5: var(--font-weight-bold);
    --font-weight-h6: var(--font-weight-regular);
}

:root {
    --font-family-h1: var(--font-family-main-condensed);
    --font-family-h2: var(--font-family-main-condensed);
    --font-family-h3: var(--font-family-main-condensed);
    --font-family-h4: var(--font-family-main);
    --font-family-h5: var(--font-family-main);
    --font-family-h6: var(--font-family-main);
}

:root {
    --line-height-body: 1.5;
    --line-height-h1: 6.4rem;
    --line-height-h2: 6.4rem;
    --line-height-h3: 4.0rem;
    --line-height-h4: 3.0rem;
    --line-height-h5: 2.6rem;
    --line-height-h6: 2.8rem;
}

:root {
    --font-family-main: "Open Sans", sans-serif;
    --font-family-main-condensed: "Open Sans Condensed", sans-serif;
}

:root {
    --bu: 1rem;
}

:root {
    --content-width-x-large: 130rem;
    --content-width-large: 112rem;
    --content-width-medium: 96rem;
    --content-width-small: 72rem;
}

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

@media screen and (width <= 960px) {
    :root {
        --content-width-medium: 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 {
    --border-radius-common: 1.2rem;
    --border-radius-large: 2rem;
}

:root {
    --minimum-inline-padding: var(--size-medium);
}

:root {
    --cookie-banner-z-index: 3;
    /* Above content (a hovered gallery tile lifts itself to 1), below the header and the
       cookie banner, which both sit at 3. */
    --z-index-back-to-top: 2;
}