:root {
    /* Body Background Color */
    --color-background-body: linear-gradient(180deg, rgb(217 226 224 / 25%) 0%, rgb(217 226 224 / 0%) 38.89%), #fff;
    --color-transition-background-body:   linear-gradient(180deg, rgb(217 226 224 / 25%) 0%, rgb(217 226 224 / 0%) 38.89%) top / 100% 87.79px no-repeat,
    linear-gradient(180deg, rgb(232 236 235) 0%, rgb(217 226 224 / 0%) 38.89%) 0 87.79px / 100% calc(100% - 87.79px) no-repeat,
    #fff;

    /* Sections Colors */
    --color-section-background-1: linear-gradient(
        180deg,
        #d9e2e0 -109.43%,
        rgb(217 224 224 / 0%) 46.23%
    );
    --color-section-background-2: linear-gradient(180deg, #D9E2E0 -9.43%, rgb(217 226 224 / 0%) 3.23%);
    --color-section-background-3: linear-gradient(to bottom, rgb(217 226 224 / 38%), rgb(255 255 255 / 38%));
    
    /* OneTrust Cookie Banner and Video Modal Colors */
    --onetrust-background-color: #426bba;
    --onetrust-text-color: #fff;
    --onetrust-disabled-color: #e8e8e8;
    --onetrust-secondary-color: #373d42;
    --onetrust-logo-background-color: #f4f4f4;
    --onetrust-powered-by-color: #36454f;
    --onetrust-green-color: #008000;
    --onetrust-search-placeholder-text-color: #707070;

    /* ============================================
     BRAND COLORS — EMERALD
     ============================================ */
    --color-emerald-100: #f3f5f5;
    --color-emerald-200: #e8eceb;
    --color-emerald-300: #d9e0dd;
    --color-emerald-400: #b9c8c2;
    --color-emerald-500: #89a299;
    --color-emerald-600: #587b6e;
    --color-emerald-700: #436b5c;
    --color-emerald-800: #144633;
    --color-emerald-900: #0d2f22;

    /* BRAND COLORS — SAGE */
    --color-sage-100: #dbe3d4;
    --color-sage-200: #e1e8a5;
    --color-sage-500: #497527;
    --color-sage-600: #3d6221;

    /* BRAND COLORS — MARIGOLD */
    --color-marigold-100: #fffde9;
    --color-marigold-200: #fffbd7;
    --color-marigold-500: #ffb718;
    --color-marigold-600: #d5a106;

    /* BRAND COLORS — MAGENTA (SAVINGS $0 ACCENT) */
    --color-magenta-500: #ff00c7;

    /* BRAND COLORS — NEUTRAL (PEWTER) */
    --color-neutral-100: #fafafa;
    --color-neutral-200: #d2d3d3;
    --color-neutral-300: #8f9291;
    --color-neutral-400: #a3a3a3;
    --color-neutral-500: #525252;
    --color-neutral-900: #3d3d3d;

    /* GENERIC */
    --color-white: #fff;
    --color-black: #000;

    /* DENOTATIVE */
    --color-success: #16a34a;
    --color-error: #ba0000;
    --color-focused: #81afd1;

    /* SURFACES */
    --color-surface-background: #ecefee;
    --color-surface-modal: rgb(20 70 51 / 80%);

    /* ============================================
     TYPOGRAPHY — FONT FAMILIES
     ============================================ */
    --font-family-heading: "Helvetica Neue", sans-serif;
    --font-family-body: "Helvetica Neue", sans-serif;
    --font-family-buttons: "Helvetica Neue", sans-serif;
    --font-family-links: "Helvetica Neue", sans-serif;
    --font-family-captions: "Helvetica Neue", sans-serif;
    --font-family-light: "HelveticaNeueW01-45Ligh", sans-serif;
    --font-family-medium: "HelveticaNeueW01-65Medi", sans-serif;
    --font-family-bold: "HelveticaNeueW01-75Bold", sans-serif;
    --font-family-light-condensed: "Helvetica Neue LT W05_47 Lt Cn", sans-serif;
    --font-family-roma: "HelveticaNeueW01-55Roma", sans-serif;

    /* FONT SIZES — HEADINGS */
    --font-size-heading-jumbo: 32px;
    --font-size-heading-h1: 28px;
    --font-size-heading-h2: 24px;
    --font-size-heading-h3: 22px;
    --font-size-heading-h4: 18px;
    --font-size-heading-isi: 20px;
    --font-size-heading-form: 20px;

    /* FONT SIZES — BODY */
    --font-size-body-default: 16px;
    --font-size-body-small: 14px;
    --font-size-body-caption: 14px;
    --font-size-body-isi: 16px;

    /* FONT SIZES — BUTTONS & LINKS */
    --font-size-button: 16px;
    --font-size-button-header: 12px;
    --font-size-link-footer-primary: 12px;
    --font-size-link-footer-secondary: 13px;

    /* LINE HEIGHTS — HEADINGS */
    --line-height-heading-jumbo: 38px;
    --line-height-heading-h1: 34px;
    --line-height-heading-h2: 26px;
    --line-height-heading-h3: 28px;
    --line-height-heading-h4: 24px;
    --line-height-heading-isi: 28px;

    /* LINE HEIGHTS — BODY */
    --line-height-body-default: 24px;
    --line-height-body-small: 22px;
    --line-height-body-caption: 16px;
    --line-height-body-isi: 20px;

    /* LINE HEIGHTS — BUTTONS & LINKS */
    --line-height-button: 18px;
    --line-height-button-small: 18px;
    --line-height-link-footer-primary: 14px;
    --line-height-link-footer-secondary: 20px;
    --line-height-link-nav-mobile: 18px;

    /* FONT WEIGHTS */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* TYPOGRAPHY COLORS */
    --color-text-body: #3d3d3d;
    --color-text-body-alt: #212529;
    --color-text-heading-emerald: #144633;
    --color-text-heading-sage: #497527;
    --color-text-card-heading: #497527;
    --color-text-input-label: #144633;
    --color-text-isi-body: #3d3d3d;
    --color-text-form: #525252;
    --color-radio-bg: #d0dad6;

    /* ============================================
     SPACING
     ============================================ */
    --spacing-0: 0px;
    --spacing-4: 4px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-14: 14px;
    --spacing-16: 16px;
    --spacing-18: 18px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-26: 26px;
    --spacing-28: 28px;
    --spacing-30: 30px;
    --spacing-32: 32px;
    --spacing-36: 36px;
    --spacing-40: 40px;
    --spacing-44: 44px;
    --spacing-52: 52px;
    --spacing-56: 56px;
    --spacing-64: 64px;
    --spacing-72: 72px;
    --spacing-80: 80px;
    --spacing-92: 92px;
    --spacing-96: 96px;
    --spacing-100: 100px;
    --spacing-128: 128px;

    /* ============================================
     BORDER RADIUS
     ============================================ */
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-20: 20px;
    --radius-24: 24px;
    --radius-rounded: 100px;

    /* ============================================
     SECTIONS — PADDING
     ============================================ */
    --section-margin-small: 12px;
    --section-margin-medium: 24px;

    /* BREAKPOINTS
     ============================================ */
    --breakpoint-md: 768px;
    --breakpoint-xl: 1200px;

    /* ============================================
     LAYOUT & GRID
     ============================================ */
    --grid-gutter: 20px;
    --grid-max-width: 1060px;
    --container-max-width: 1140px;
    --form-wrapper-max-width: 966px;
    --container-padding: 12px;
    --viewport-width: 1440px;

    /* ============================================
     BUTTONS — PRIMARY
     ============================================ */
    --button-primary-text: #fff;
    --button-primary-bg: #436b5c;
    --button-primary-bg-hover: #144633;
    --button-primary-text-disabled: #6c757d;
    --button-primary-bg-disabled: #d2d3d3;

    /* BUTTONS — SECONDARY */
    --button-secondary-text: #144633;
    --button-secondary-bg: #ffb718;
    --button-secondary-bg-hover: #d5a106;
    --button-secondary-text-disabled: #6c757d;
    --button-secondary-bg-disabled: #d2d3d3;

    /* BUTTONS — TERTIARY */
    --button-tertiary-text: #144633;
    --button-tertiary-bg: #d9e0dd;
    --button-tertiary-text-active: #fff;
    --button-tertiary-bg-active: #144633;
    --button-tertiary-text-disabled: #6c757d;
    --button-tertiary-bg-disabled: #d2d3d3;

    /* BUTTONS — SHARED */
    --button-padding-vertical: 24px;
    --button-padding-horizontal: 18px;
    --button-border-radius: 200px;

    /* BUTTONS — MOBILE (<=768px) */
    --button-mobile-padding-vertical: 14px;
    --button-mobile-padding-horizontal: 10px;
    --button-mobile-font-size: 14px;

    /* BUTTONS — ICON ONLY */
    --button-icon-size: 38px;
    --button-icon-padding-vertical: 6px;
    --button-icon-padding-horizontal: 12px;
    --button-icon-asset-size: 16px;

    /* BUTTONS — HERO PRIMARY */
    --button-hero-primary-text: #144633;
    --button-hero-primary-bg: #ffb718;
    --button-hero-primary-bg-hover: #d5a106;

    /* BUTTONS — HERO SECONDARY */
    --button-hero-secondary-text: #fff;
    --button-hero-secondary-bg: #497527;
    --button-hero-secondary-bg-hover: #3d6221;

    /* BUTTONS — HERO TERTIARY */
    --button-hero-tertiary-text: #fff;
    --button-hero-tertiary-bg: #144633;
    --button-hero-tertiary-bg-hover: #0d2f22;

    /* BUTTONS — HERO SHARED */
    --button-hero-padding-vertical: 10px;
    --button-hero-padding-horizontal: 24px;
    --button-hero-icon-height: 24px;
    --button-hero-icon-size: 16px;
    --button-hero-mobile-width: 286px;
    --button-hero-mobile-height: 40px;
    --button-hero-mobile-padding: 8px 18px;
    --button-hero-tablet-height: 44px;
    --button-hero-tablet-width: 352px;

    /* IMAGE CAPTION */
    --font-size-image-caption: 12px;
    --line-height-image-caption: 14px;
    --caption-shadow: 0 0 12px rgb(0 0 0 / 100%);

    /* HERO LAYOUT */
    --hero-background: linear-gradient(
        180deg,
        var(--color-emerald-200) 0%,
        var(--color-emerald-200) 54.475%,
        transparent 100%
    );
    --hero-mobile-max-width: 375px;
    --hero-tablet-max-width: 836px;
    --hero-mobile-heading-max-width: 265px;
    --hero-mobile-heading-font-size: 24px;
    --hero-mobile-heading-line-height: 28px;
    --hero-mobile-illustration-width: 285px;
    --hero-mobile-illustration-height: 250px;
    --hero-tablet-illustration-width: 340px;
    --hero-tablet-illustration-height: 298px;
    --hero-desktop-illustration-width: 471px;
    --hero-desktop-illustration-height: 414px;
    --hero-desktop-illustration-left: 525px;
    --hero-tablet-illustration-top: -52px;
    --hero-desktop-illustration-top: -70px;
    --hero-mobile-text-overlap: -32px;

    /* ============================================
     LINKS
     ============================================ */
    --link-dark-text: #144633;
    --link-dark-text-active: #0d2f22;
    --link-dark-text-disabled: #6c757d;
    --link-light-text: #fff;
    --link-light-text-active: #436b5c;
    --link-light-text-disabled: #6c757d;
    --link-default: #467622;
    --link-default-hover: #385e1b;
    --link-footer-primary: #144633;
    --link-footer-primary-hover: #436b5c;
    --link-footer-secondary-hover: #497527;

    /* ============================================
     THIRD PARTY — RECAPTCHA
     ============================================ */
    --recaptcha-bg: #f9f9f9;
    --recaptcha-stroke: #d3d3d3;
    --recaptcha-text: #555;
    --recaptcha-spinner-blue: #70a2f5;
    --recaptcha-light-blue: #4285f4;
    --recaptcha-dark-blue: #1c3aa9;
    --recaptcha-gray: #ababab;
    --recaptcha-checkmark: #18a164;

    /* THIRD PARTY — SOCIAL */
    --vimeo-blue: #00adef;
    --facebook-bg: #1877f2;

    /* ============================================
     COMPONENTS — CARDS
     ============================================ */
    --card-flip-padding-vertical: 40px;
    --card-flip-padding-horizontal: 40px;
    --card-flip-content-gap: 32px;
    --card-copy-padding-vertical: 40px;
    --card-copy-padding-horizontal: 40px;
    --card-copy-button-padding: 12px;
    --card-full-width-padding-vertical: 40px;
    --card-full-width-padding-horizontal: 40px;
    --card-quick-tips-padding-vertical: 32px;
    --card-quick-tips-padding-horizontal: 32px;

    /* COMPONENTS — CAROUSEL */
    --carousel-button-size: 52px;
    --carousel-card-padding-vertical: 24px;
    --carousel-card-padding-horizontal: 24px;

    /* COMPONENTS — NAVIGATION */
    --nav-pill-padding-horizontal: 24px;
    --nav-desktop-link-padding-horizontal: 12px;
    --nav-desktop-link-padding-vertical: 14px;
    --nav-desktop-link-active-padding-horizontal: 14px;
    --nav-desktop-link-active-padding-top: 12px;
    --nav-desktop-link-active-padding-bottom: 7px;

    /* COMPONENTS — ISI */
    --isi-padding-horizontal: 42px;
    --isi-paragraph-spacing: 12px;
    --isi-heading-content-padding: 16px;
    --isi-top-heading-content-padding: 8px;
    --isi-spacing-blackbox-content: 16px;
    --isi-link-text-color: #497527;
    --isi-rail-padding: 32px;
    --isi-full-padding: 64px;

    /* COMPONENTS — PROGRESS BAR */
    --progress-bar-sticky-padding-horizontal: 200px;

    /* COMPONENTS — CONTENT SCROLL */
    --content-scroll-padding-vertical: 30px;
    --content-scroll-padding-horizontal: 24px;

    /* COMPONENTS — CONTROL LIST */
    --control-list-column-min-width: 320px;
    --control-list-content-spacing: 24px;
    --control-list-top-padding: 0px;
    --control-list-bottom-padding: 24px;
}