:root,
::after,
::before {
    /* ------------------------------------------------------------ *\
	core
\* ------------------------------------------------------------ */
    /*  colors  */
    /* --- primary --- */
    --core-color-red: #d11414;
    --core-color-darkblue: #071338;
    --core-color-darkred: #b52727;

    /* --- secondary --- */
    --core-color-failure: #d11414;
    --core-color-failure-contrast: #b93f3c;
    --core-color-errorfilled: #ffefef;
    --core-color-charcoal: #383839;

    /* --- grayscales --- */
    --core-color-white: #ffffff;
    --core-color-lightgray: #e3eaf2;
    --core-color-gray: #c9cbd4;
    --core-color-coolgray: #e3eaf2;
    --core-color-deepgray: #181819;
    --core-color-othergray: #f9f9fb;

    /* --- system agnostic colors --- */
    --system-agnostic-color-brown: #3c3c3c;

    /*  fonts  */
    --core-font-primary: "PT Sans", sans-serif;
    --core-font-secondary: "Open Sans", sans-serif;

    /* ------------------------------------------------------------ *\
	semantic
\* ------------------------------------------------------------ */
    /*  colors  */
    --semantic-color-primary: var(--core-color-red);
    --semantic-color-accent: var(--core-color-darkblue);
    --semantic-color-vibrant: var(--core-color-brightblue);
    --semantic-color-prominent: var(--core-color-darkblue);

    --semantic-color-success: var(--core-color-red);
    --semantic-color-success-vibrant: var(--core-color-success-vibrant);
    --semantic-color-error: var(--core-color-failure);
    --semantic-color-error-contrast: var(--core-color-failure-contrast);

    --semantic-color-white: var(--core-color-white);
    --semantic-color-neutral: var(--core-color-lightgray);
    --semantic-color-subtle: var(--core-color-gray);
    --semantic-color-othergray: var(--core-color-othergray);
    --semantic-color-shadegray: var(--core-color-gray);
    --semantic-color-deepgray: var(--core-color-deepgray);
    --semantic-color-black: var(--core-color-deepgray);
    --semantic-color-red: var(--core-color-red);
    --semantic-color-darkred: var(--core-color-darkred);
    --semantic-color-charcoal: var(--core-color-charcoal);

    /*  backgrounds  */
    --semantic-background-color-primary: var(--core-color-white);
    --semantic-background-color-accent: var(--semantic-color-charcoal);
    --semantic-background-color-subtle: var(--core-color-gray);
    --semantic-background-color-shade: var(--semantic-color-prominent);
    --semantic-background-color-dark: var(--core-color-deepgray);
    --semantic-background-color-neutral: var(--core-color-lightgray);
    --semantic-background-color-error: var(--core-color-errorfilled);

    /*  fills  */
    --semantic-fill-color-neutral: var(--core-color-lightgray);
    --semantic-fill-color-subtle: var(--core-color-gray);
    --semantic-fill-color-accent: var(--semantic-color-prominent);
    --semantic-fill-color-success: var(--semantic-color-success);

    /*  borders  */
    --semantic-border-color-subtle: var(--core-color-gray);
    --semantic-border-color-default: var(--core-color-coolgray);
    --semantic-border-color-prominent: var(--core-color-gray);

    /*  text  */
    /* --- text font --- */
    --semantic-text-font-primary: var(--core-font-primary);
    --semantic-text-font-secondary: var(--core-font-secondary);

    /* --- text color --- */
    --semantic-text-color-base: var(--core-color-deepgray);
    --semantic-text-color-darkblue: var(--core-color-darkblue);
    --semantic-text-color-primary: var(--core-color-darkblue);
    --semantic-text-color-vibrant: var(--core-color-success);
    --semantic-text-color-accent: var(--core-color-mediumblue);
    --semantic-text-color-prominent: var(--core-color-darkblue);

    --semantic-text-color-almostblack: var(--core-color-deepgray);
    --semantic-text-color-white: var(--core-color-white);
    --semantic-text-color-black: var(--semantic-color-black);
    --semantic-text-color-darkgray: var(--semantic-color-deepgray);
    --semantic-text-color-deepgray: var(--core-color-deepgray);
    --semantic-text-color-lightgray: var(--core-color-lightgray);

    /* ------------------------------------------------------------ *\
    component
\* ------------------------------------------------------------ */

    /*  _body  */
    --body-background-color: var(--semantic-background-color-primary);
    --body-text-font: var(--semantic-text-font-primary);
    --body-text-font-alt: var(--semantic-text-font-secondary);
    --body-text-color: var(--semantic-text-color-deepgray);
    --body-text-color-emphasis: var(--semantic-text-color-prominent);
    --body-text-color-success: var(--semantic-text-color-vibrant);
    --body-text-color-accent: var(--semantic-text-color-accent);
    --body-text-color-darkgray: var(--semantic-text-color-darkgray);

    /*  accordion  */
    --accordion-background-color: var(--semantic-background-color-neutral);
    --accordion-icon-color: var(--semantic-fill-color-accent);
    --accordion-border-color: var(--semantic-border-color-subtle);
    --accordion-header-text-color: var(--semantic-text-color-primary);

    /*  anchor  */
    --anchor-text-color-accent: var(--semantic-text-color-accent);
    --anchor-text-color-white: var(--semantic-text-color-white);
    --anchor-text-color-subtle: var(--semantic-text-color-darkblue);
    --anchor-text-color-contrast: #0645ad;
    --anchor-text-color-vibrant: var(--semantic-text-color-deepgray);
    --anchor-text-color-paging: var(--semantic-color-primary);

    /*  badge  */
    --badge-color-subtle: var(--semantic-color-primary);
    --badge-color-vibrant: var(--semantic-color-success);
    --badge-color-prominent: var(--semantic-color-prominent);
    --badge-text-color: var(--semantic-text-color-white);

    /*  banner  */
    --banner-background-color: var(--semantic-background-color-accent);
    --banner-text-color: var(--semantic-text-color-white);

    /*  buttons  */
    --button-dropshadow: rgba(0, 0, 0, 0.2);
    --button-text-font: var(--semantic-text-font-primary);
    --button-text-color: var(--semantic-text-color-white);

    /* --- primary button --- */
    --button-background-primary: var(--semantic-color-success);
    --button-background-primary-active: var(--semantic-color-success);
    --button-primary-overlay-highlight: rgba(255, 255, 255, 0);
    --button-primary-overlay-shade: rgba(0, 0, 0, 0.15);

    /* --- secondary button --- */
    --button-background-secondary: var(--semantic-color-success);
    --button-background-secondary-hover: var(--semantic-color-darkred);
    --button-secondary-overlay-highlight: rgba(0, 0, 0, 0);
    --button-secondary-overlay-midpoint: rgba(0, 0, 0, 0.0384375);
    --button-secondary-overlay-shade: rgba(0, 0, 0, 0.09);
    --button-stroke-color-secondary: var(--semantic-color-white);

    /* --- outline button --- */
    --button-outline-border-color-accent: var(
        --semantic-background-color-accent
    );
    --button-outline-border-stroke-color-secondary: var(--semantic-color-red);

    /*  callout  */
    --callout-border-color-prominent: var(--semantic-color-prominent);
    --callout-border-color-accent: var(--semantic-color-accent);
    --callout-text-color-prominent: var(--semantic-text-color-prominent);

    /*  custom captcha [uses default SF colors] */
    --captcha-background-color: #f1f5fb;
    --captcha-logo-color: #78869a;
    --captcha-loader-color: #1996d9;

    /*  checkbox  */
    --checkbox-text-font: var(--semantic-text-font-secondary);
    --checkbox-text-color: var(--semantic-text-color-black);
    --checkbox-border-color-alt: var(--semantic-border-color-prominent);
    --checkbox-border-color-checked: var(--semantic-color-accent);
    --checkbox-background-color: rgba(255, 255, 255, 0.1); /* verify */
    --checkbox-background-color-default: var(
        --semantic-background-color-primary
    );
    --checkbox-background-color-checked: var(
        --semantic-background-color-accent
    );
    --checkbox-boxshadow-customize: rgba(0, 160, 221, 0.5);

    /*  containers  */
    --container-text-color-vibrant: var(--semantic-text-color-vibrant);
    --container-text-font-primary: var(--semantic-text-font-primary);
    --container-text-color-default: var(--semantic-text-color-darkblue);
    --container-background-color: var(--semantic-background-color-primary);
    --container-background-color-alt: var(--semantic-background-color-neutral);
    --container-fill-color-neutral: var(--semantic-fill-color-neutral);
    --container-boxshadow-color: rgba(187, 209, 227, 0.5);
    --container-border-color-default: var(--semantic-border-color-default);
    --container-border-color-subtle: var(--semantic-border-color-subtle);

    /* --- container head --- */
    --container-head-text-color: var(--semantic-text-color-white);
    --container-head-text-color-alt: var(--semantic-text-color-lightgray);
    --container-head-border-color: var(--semantic-color-accent);
    --container-head-background-color: var(--semantic-color-accent);
    --container-head-background-gradient-shade: rgba(0, 0, 0, 0.15);
    --container-head-background-gradient-highlight: rgba(255, 255, 255, 0.15);
    --container-head-background-gradient-highlight-subtle: rgba(
        255,
        255,
        255,
        0
    );

    /*  disclaimer  */
    --disclaimer-text-color-base: var(--semantic-text-color-base);
    --disclaimer-font-family: var(--semantic-text-font-secondary);
    --disclaimer-background-color: var(--semantic-background-color-subtle);

    /*  divider  */
    --divider-color: var(--semantic-color-neutral);
    --divider-color-default: var(--semantic-border-color-default);
    --divider-color-dark: var(--semantic-border-color-prominent);
    --divider-color-subtle: var(--semantic-border-color-subtle);

    /*  footer  */
    --footer-text-color-base: var(--semantic-text-color-white);
    --footer-text-color-anchor: var(--semantic-color-othergray);
    --footer-background-color: var(--semantic-background-color-accent);

    /*  hero  */
    --hero-text-color-prominent: var(--semantic-text-color-white);
    --hero-text-color-subdued: rgba(191, 205, 224, 0.5);
    --hero-text-color-subtle: var(--semantic-text-color-lightgray);
    --hero-background-color-accent: var(--semantic-background-color-accent);
    --hero-background-color-prominent: var(--semantic-background-color-shade);
    --hero-background-gradient-highlight: rgba(13, 10, 45, 0.1);
    --hero-background-gradient-midpoint: rgba(12, 39, 93, 0.3);
    --hero-background-gradient-shade: var(--semantic-color-prominent);

    /*  header  */
    --header-text-contrast: var(--semantic-text-color-almostblack);
    --header-text-primary: var(--semantic-text-color-primary);
    --header-text-prominent: var(--semantic-text-color-prominent);
    --header-text-accent: var(--semantic-text-color-accent);
    --header-text-darkgray: var(--semantic-text-color-darkgray);

    /*  input-field  */
    --input-background-color-default: var(--semantic-background-color-primary);
    --input-border-color-default: var(--semantic-border-color-default);
    --input-border-color-subtle: var(--semantic-border-color-subtle);
    --input-text-color-placeholder: var(--semantic-color-subtle);
    --input-text-color-contrast: var(--semantic-text-color-black);
    --input-text-color-default: var(--semantic-color-black);
    --input-boxshadow-autofill: var(--semantic-color-white);

    /* ---  input-field::active --- */
    --input-border-color-active: var(--semantic-border-color-default);
    --input-boxshadow-color-highlight-active: var(
        --semantic-border-color-default
    );
    --input-boxshadow-color-midpoint-active: var(--semantic-color-subtle);
    --input-boxshadow-color-fade-active: var(--semantic-color-neutral);

    /* ---  input-field::error --- */
    --input-text-color-error: var(--semantic-color-error);
    --input-border-color-error: var(--semantic-color-error);
    --input-text-color-error-contrast: var(--semantic-color-error-contrast);
    --input-border-color-error-contrast: var(--semantic-color-error-contrast);
    --input-background-color-error: var(--semantic-background-color-error);
    --input-errormessage-border-color: var(--semantic-color-white);
    --input-errormessage-dropshadow: rgba(0, 0, 0, 0.25);

    /* ---  input-field::disabled --- */
    --input-background-color-disabled: var(--semantic-background-color-neutral);
    --input-border-color-disabled: var(--semantic-border-color-subtle);

    /*  loader  */
    --loader-background-color: var(--semantic-background-color-primary);
    --loader-line-color-background: var(--semantic-color-subtle);
    --loader-line-color-highlight: var(--semantic-color-success-vibrant);
    --loader-text-color: var(--semantic-text-color-vibrant);

    /*  modal  */
    --modal-header-text-color: var(--semantic-text-color-prominent);
    --modal-content-background-color: var(--semantic-background-color-primary);
    --modal-content-header-text-color: var(--semantic-text-color-darkblue);
    --modal-background-color: rgba(0, 0, 0, 0.6);

    /*  nav  */
    --nav-text-color: var(--semantic-text-color-white);
    --nav-icon-color: var(--semantic-fill-color-accent);
    --nav-background-color: var(--semantic-background-color-shade);
    --nav-background-secondary-color: var(--semantic-background-color-shade);
    --nav-background-color-secondary: var(--semantic-background-color-primary);

    /* ---  nav funnel --- */
    --nav-funnel-background-gradient-highlight: rgba(13, 10, 45, 0.1);
    --nav-funnel-background-color-accent: var(
        --semantic-background-color-accent
    );

    /*  pagination  */
    --pagination-text-color-alt: var(--semantic-text-color-white);

    /*  radio button  */
    --radio-label-border-color: var(--semantic-border-color-subtle);
    --radio-border-color-stroke: var(--semantic-color-black);
    --radio-border-color-selected: var(--semantic-color-success);
    --radio-border-color-overlay: var(--semantic-color-white);
    --radio-label-text-color: var(--semantic-text-color-almostblack);
    --radio-fill-color-selected: rgba(12, 166, 105, 0.1);
    --radio-tap-highlight: rgba(255, 255, 255, 0);

    /*  section  */
    --section-text-color-white: var(--semantic-text-color-white);
    --section-text-color-lightgray: var(--semantic-text-color-lightgray);
    --section-background-color-prominent: var(
        --semantic-background-color-white
    );

    /*  tab  */
    --tab-text-color-loading: var(--semantic-color-subtle);
    --tab-text-color-default: var(--semantic-text-color-primary);
    --tab-background-color-gradient-hightlight: rgba(255, 255, 255, 0);
    --tab-background-color-gradient-shade: rgba(0, 0, 0, 0.15);
    --tab-background-color: var(--semantic-background-color-accent);
    --tab-body-background-color: var(--semantic-background-color-primary);

    /*  tooltip  */
    --tooltip-background-color: var(--semantic-color-deepgray);
    --tooltip-text-color: var(--semantic-text-color-white);

    /*  warning banner  */
    --warning-text-font: var(--semantic-text-font-secondary);
    --warning-text-color-default: var(--semantic-text-color-black);
    --warning-background-color: rgba(237, 242, 244, 0.95);
    --warning-button-text-color: var(--semantic-text-color-white);

    /*  vector  */
    --vector-background-color-vibrant: var(--semantic-color-vibrant);
    --vector-background-color-accent: var(--semantic-color-accent);
    --vector-border-color-vibrant: var(--semantic-color-vibrant);
    --vector-border-color-accent: var(--semantic-color-accent);
    --vector-border-color-subtle: var(--semantic-border-color-subtle);
    --vector-fill-color-white: var(--semantic-color-white);
    --vector-fill-color-subtle: var(--semantic-fill-color-subtle);
    --vector-fill-color-shadegray: var(--semantic-color-shadegray);
    --vector-fill-color-success: var(--semantic-fill-color-success);
    --vector-fill-color-success-vibrant: var(--semantic-color-success-vibrant);
    --vector-uislider-handle-gray: #d4e2eb;
    --vector-watermark-color: rgba(191, 205, 224, 0.5);
    --vector-sf-fly-top-dropshadow: rgba(12, 37, 70, 0.3);
    --vector-sf-fly-bot-dropshadow: rgba(12, 37, 70, 0.24);
    --vector-map-fade-midpoint: rgba(246, 246, 244, 0.2);
    --vector-asset-dropshadow: rgba(0, 0, 0, 0.25);
    --vector-image-overlay-gradient-highlight: rgba(255, 255, 255, 0);
    --vector-image-overlay-gradient-shade: rgba(0, 0, 0, 0.15);
    --vector-contentspacer-subtle: var(--semantic-border-color-subtle);

    /* unique colors not in use [second half of the modal on people/index */
    --modal-step-bullet-color: #f46119;
    --modal-step-text-color: #b1b1b1;
    --modal-step-loading-color: #6b6b6b;
}

.header-alt {
    --nav-background-color: var(--semantic-background-color-primary);
}

.header-alt .header__nav.is-active {
    --nav-background-color: var(--semantic-color-prominent);
}

@media screen and (min-width: 768px) {
    .header-alt .nav li:first-of-type {
        --nav-text-color: var(--semantic-text-color-primary);
    }
}