:root,
::after,
::before {
    /* ------------------------------------------------------------ *\
	core
\* ------------------------------------------------------------ */
    /*  colors  */
    /* --- primary --- */
    --core-color-black: #181819;
    --core-color-yellow: #f7df66;
    --core-color-darkYellow: #efcb35;
    --core-color-blue: #2879a8;
    --core-color-trendblue: #5f8aa3;

    /* --- secondary --- */
    --core-color-success: #181819;
    --core-color-success-vibrant: #ffed78;
    --core-color-failure: #ea2c46;
    --core-color-failure-contrast: #b93f3c;
    --core-color-errorfilled: #ffefef;
    --core-color-offer-blue: #d8f4f7;

    /* --- grayscales --- */
    --core-color-white: #ffffff;
    --core-color-gray: rgba(245, 245, 245, 0.96);
    --core-color-bordergray: #bdbdbd;
    --core-color-shadegray: #5b5b5b;
    --core-color-lightgray: #f5f5f5;
    --core-color-medgray: #c9cbd4;
    --core-color-darkgray: #4c4c4c;
    --core-color-almostblack: #181f25;
    --core-color-footer-black: #181819;

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

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

    /* pdf upsell variables*/
    --core-pdf-font: "Open Sans", sans-serif;
    --core-pdf-black: #383839;
    --core-pdf-white: #ffffff;
    --core-pdf-darkBlack: #000;
    --core-pdf-limeGreen: #b4ff4a;
    --core-pdf-gray: #404040;
    --core-pdf-blue: #007cff;

    --core-discount-green: #44a54d;

    /* ------------------------------------------------------------ *\
	semantic
\* ------------------------------------------------------------ */
    /*  colors  */
    --semantic-color-primary: var(--core-color-black);
    --semantic-color-accent: var(--core-color-success-vibrant);
    --semantic-color-vibrant: var(--core-color-success-vibrant);
    --semantic-color-prominent: var(--core-color-white);
    --semantic-color-darkyellow: var(--core-color-darkYellow);

    --semantic-color-success: var(--core-color-success);
    --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-offer-blue: var(--core-color-offer-blue);

    --semantic-color-white: var(--core-color-white);
    --semantic-color-neutral: var(--core-color-lightgray);
    --semantic-color-subtle: var(--core-color-shadegray);
    --semantic-color-shadegray: var(--core-color-shadegray);
    --semantic-color-medgray: var(--core-color-medgray);
    --semantic-color-darkgray: var(--core-color-darkgray);
    --semantic-color-black: var(--core-color-almostblack);
    --semantic-color-blue: var(--core-color-blue);

    /*  backgrounds  */
    --semantic-background-color-primary: var(--core-color-white);
    --semantic-background-color-accent: var(--semantic-color-accent);
    --semantic-background-color-subtle: var(--core-color-shadegray);
    --semantic-background-color-shade: var(--semantic-color-prominent);
    --semantic-background-color-dark: var(--core-color-almostblack);
    --semantic-background-color-neutral: var(--core-color-lightgray);
    --semantic-background-color-error: var(--core-color-errorfilled);
    --semantic-background-color-success: var(--semantic-color-success-vibrant);
    --semantic-background-color-vibrant: var(--semantic-color-vibrant);
    --semantic-background-color-black: var(--core-color-black);
    --semantic-background-color-coreyellow: var(--core-color-yellow);

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

    /*  borders  */
    --semantic-border-color-subtle: var(--core-color-black);
    --semantic-border-color-default: var(--core-color-lightgray);
    --semantic-border-color-inputs: var(--core-color-medgray);
    --semantic-border-color-prominent: var(--core-color-black);

    /*  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-black);
    --semantic-text-color-primary: var(--core-color-black);
    --semantic-text-color-vibrant: var(--core-color-success);
    --semantic-text-color-accent: var(--core-color-black);
    --semantic-text-color-prominent: var(--core-color-black);
    --semantic-text-color-success: var(--core-color-success);
    --semantic-text-color-trend: var(--core-color-trendblue);

    --semantic-text-color-almostblack: var(--core-color-almostblack);
    --semantic-text-color-white: var(--core-color-white);
    --semantic-text-color-black: var(--semantic-color-black);
    --semantic-text-color-darkgray: var(--semantic-color-darkgray);
    --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-base);
    --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-success);
    --accordion-border-color: var(--semantic-border-color-subtle);
    --accordion-header-text-color: var(--semantic-text-color-success);

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

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

    /*  banner  */
    --banner-background-color: var(--semantic-background-color-success);
    --banner-text-color: var(--semantic-text-color-black);

    /*  buttons  */
    --button-dropshadow: rgba(0, 0, 0, 0.2);
    --button-dropshadow-alt: rgba(255, 255, 255, 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-background-dark-yellow: var(--semantic-color-darkyellow);
    --button-primary-overlay-highlight: rgba(255, 255, 255, 0);
    --button-primary-overlay-shade: rgba(0, 0, 0, 0.15);

    /* --- secondary button --- */
    --button-background-secondary: none;
    --button-background-secondary-hover: var(
        --semantic-background-color-accent
    );
    --button-background-secondary-active: var(
        --semantic-background-color-vibrant
    );
    --button-stroke-color-secondary: var(--semantic-color-accent);
    --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);

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

    /*  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-default);
    --checkbox-border-color-checked: var(--semantic-color-success);
    --checkbox-border-color-checked-yellow: 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-success
    );
    --checkbox-boxshadow-customize: var(--semantic-color-accent);

    /*  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-base);
    --container-text-color-accent: var(--semantic-text-color-accent);
    --container-background-color: var(--semantic-background-color-primary);
    --container-background-color-vibrant: var(
        --semantic-background-color-vibrant
    );
    --container-background-color-alt: var(--semantic-background-color-neutral);
    --container-fill-color-neutral: var(--semantic-fill-color-neutral);
    --container-boxshadow-color: rgba(0, 0, 0, 0.2);
    --container-border-color-default: var(--semantic-border-color-default);
    --container-border-color-dark: var(--semantic-border-color-prominent);
    --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-black);
    --container-head-border-color: var(--semantic-color-prominent);
    --container-head-background-color: var(--semantic-background-color-black);
    --container-head-background-color-alt: var(
        --semantic-color-success-vibrant
    );
    --container-head-background-color-white: var(--semantic-color-prominent);
    --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-white);
    --disclaimer-background-color: var(--semantic-color-darkgray);

    /*  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);
    --divider-color-trends: var(--core-color-bordergray);

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

    /*  hero  */
    --hero-text-color-prominent: var(--semantic-text-color-base);
    --hero-text-color-subdued: rgba(191, 205, 224, 0.5);
    --hero-text-color-subtle: var(--semantic-text-color-lightgray);
    --hero-text-color-white: var(--semantic-text-color-white);
    --hero-background-color-accent: var(--semantic-background-color-accent);
    --hero-background-color-prominent: var(--semantic-background-color-shade);
    --hero-background-color-yellow: var(--semantic-background-color-coreyellow);
    --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);
    --header-text-success: var(--semantic-text-color-success);

    /*  input-field  */
    --input-background-color-default: var(--semantic-background-color-primary);
    --input-border-color-default: var(--semantic-border-color-inputs);
    --input-border-color-subtle: var(--semantic-border-color-subtle);
    --input-text-color-placeholder: var(--semantic-color-medgray);
    --input-text-color-placeholder-alt: var(--semantic-color-shadegray);
    --input-text-color-contrast: var(--semantic-text-color-black);
    --input-text-color-default: var(--semantic-text-color-primary);
    --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-neutral);
    --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-base);
    --modal-background-color: rgba(0, 0, 0, 0.6);

    /*  nav  */
    --nav-text-color: var(--semantic-text-color-black);
    --nav-icon-color: var(--semantic-fill-color-base);
    --nav-background-color: var(--semantic-background-color-shade);
    --nav-background-color-alt: var(--semantic-background-color-coreyellow);
    --nav-background-color--mobile: var(--core-color-black);
    --nav-background-color-vibrant: var(--semantic-background-color-vibrant);

    /* ---  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);

    /*  placeholder loader */
    --placeholder-background-gradient-highlight: var(
        --semantic-fill-color-neutral
    );
    --placeholder-background-gradient-highlight-odd: var(
        --semantic-fill-color-white
    );
    --placeholder-background-gradient-shade: var(--semantic-fill-color-subtle);

    /*  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: var(--semantic-color-offer-blue);
    --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-shade
    );

    /*  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-background-color-complete: var(--semantic-background-color-black);
    --tab-body-background-color: var(--core-color-lightgray);

    /*  tooltip  */
    --tooltip-background-color: var(--semantic-color-darkgray);
    --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-prominent: var(--semantic-color-prominent);
    --vector-background-color-accent: var(--semantic-background-color-accent);
    --vector-background-color-success: var(--semantic-background-color-success);
    --vector-background-color-darkaccent: var(--semantic-color-blue);
    --vector-background-color-black: var(--semantic-background-color-black);
    --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-border-color-success: var(--semantic-color-success);
    --vector-border-color-prominent: var(--semantic-color-prominent);
    --vector-border-color-darkaccent: var(--semantic-color-blue);
    --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-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;

    /* unique color for deseased tag */
    --deceased-tag-text-color: #181819;
    --deceased-tag-background-color: #c9cbd4;

    /* pdf variables */
    --pdf-banner-black: var(--core-pdf-black);
    --pdf-font-style: var(--core-pdf-font);
    --pdf-font-color-white: var(--core-pdf-white);
    --pdf-font-color-black: var(--core-pdf-darkBlack);
    --pdf-font-color-gray: var(--core-pdf-gray);
    --pdf-btn-color: var(--core-pdf-limeGreen);
    --pdf-btn-color-black: var(--core-pdf-darkBlack);
    --pdf-section-color-green: var(--core-pdf-limeGreen);
    --pdf-font-color-green: var(--core-pdf-limeGreen);
    --pdf-section-color-blue: var(--core-pdf-blue);
}