:root {
    /* Section Colors */
    --color-background-color: #f0f2f2;
    --color-gray-color: #f5f5f5;

    /* 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: #f2f5f5;
    --color-emerald-200: #e8eceb;
    --color-emerald-300: #d9e0dd;
    --color-emerald-400: #b9c8c2;
    --color-emerald-500: #90aaa4;
    --color-emerald-600: #587b6e;
    --color-emerald-700: #436b5c;
    --color-emerald-800: #144633;
    --color-emerald-850: #07412c;
    --color-emerlad-875: #00452b;
    --color-emerald-900: #0d2f22;
    --color-emerald-base: #07412c;

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

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

    /* BRAND COLORS — NEUTRAL (PEWTER) */
    --color-neutral-100: #fafafa;
    --color-neutral-200: #d2d3d3;
    --color-neutral-225: #d7d7d7;
    --color-neutral-300: #8f9291;
    --color-neutral-400: #6c757d;
    --color-neutral-500: #3d3d3d;
    --color-neutral-550: #414042;
    --color-neutral-600: #414042;
    --color-neutral-border: #b7b7b7;

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

    /* DENOTATIVE */
    --color-success: #16a34a;
    --color-error: #ba0000;
    --color-error-bright: #ed1c24;
    --color-focused: #81afd1;
    --color-brand-red-500: #d26027;

    /* SURFACES */
    --color-body-background: #f1f3f2;
    --color-surface-background: #ecefee;
    --color-surface-background-2: #e6e6e6;
    --color-surface-modal: rgb(7 65 44 / 70%);

    /* ============================================
     TYPOGRAPHY — FONT FAMILIES
     ============================================ */
    --font-family-heading: "Whitney SSm Pro", sans-serif;
    --font-family-body: "Helvetica Neue", sans-serif;
    --font-family-whitney: "Whitney SSm Pro", 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-whitney-figma: "Whitney", sans-serif;

    /* FONT SIZES — HEADINGS */
    --font-size-heading-jumbo: 38px;
    --font-size-heading-h1: 32px;
    --font-size-heading-h2: 30px;
    --font-size-heading-h3: 28px;
    --font-size-heading-h4: 26px;
    --font-size-heading-h5: 24px;
    --font-size-heading-isi: 22px;
    --font-size-callout: 26px;

    /* FONT SIZES — HEADINGS (MDD H0–H7 + Eyebrow) */
    --font-size-heading-h0: 38px;
    --font-size-heading-h6: 22px;
    --font-size-heading-h7: 20px;
    --font-size-heading-eyebrow: 20px;

    /* FONT SIZES — HEADINGS (MDD Mobile H0–H7 + Eyebrow) */
    --font-size-heading-h0-mobile: 28px;
    --font-size-heading-h1-mobile: 28px;
    --font-size-heading-h2-mobile: 24px;
    --font-size-heading-h3-mobile: 20px;
    --font-size-heading-h4-mobile: 18px;
    --font-size-heading-h5-mobile: 18px;
    --font-size-heading-h6-mobile: 18px;
    --font-size-heading-h7-mobile: 18px;
    --font-size-heading-eyebrow-mobile: 20px;

    /* FONT SIZES — HEADINGS (DEFAULT) */
    --font-size-default-h5: 24px;

    /* FONT SIZES — BODY */
    --font-size-body-large: 16px;
    --font-size-body-default: 15px;
    --font-size-body-small: 14px;
    --font-size-body-caption: 14px;
    --font-size-body-label: 12px;
    --font-size-body-isi: 16px;
    --font-size-body-medium: 15px;

    /* FONT SIZES — BODY (MOBILE) */
    --font-size-body-caption-mobile: 11px;
    --font-size-body-label-mobile: 12px;

    /* 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;
    --font-size-button-figma-small: 11px;
    --font-size-button-figma-large: 15px;

    /* LINE HEIGHTS — HEADINGS */
    --line-height-heading-jumbo: 40px;
    --line-height-heading-h1: 38px;
    --line-height-heading-h2: 35px;
    --line-height-heading-h3: 36px;
    --line-height-heading-h4: 32px;
    --line-height-heading-h5: 32px;
    --line-height-heading-isi: 28px;
    --line-height-callout: 32px;

    /* LINE HEIGHTS — HEADINGS (MDD H0–H7 + Eyebrow) */
    --line-height-heading-h0: 40px;
    --line-height-heading-h6: 32px;
    --line-height-heading-h7: 24px;
    --line-height-heading-eyebrow: 24px;

    /* LINE HEIGHTS — HEADINGS (MDD Mobile H0–H7 + Eyebrow) */
    --line-height-heading-h0-mobile: 28px;
    --line-height-heading-h1-mobile: 30px;
    --line-height-heading-h2-mobile: 30px;
    --line-height-heading-h3-mobile: 30px;
    --line-height-heading-h4-mobile: 24px;
    --line-height-heading-h5-mobile: 24px;
    --line-height-heading-h6-mobile: 24px;
    --line-height-heading-h7-mobile: 24px;
    --line-height-heading-eyebrow-mobile: 24px;

    /* LINE HEIGHTS — HEADINGS (DEFAULT) */
    --line-height-default-h3: 36px;

    /* LINE HEIGHTS — BODY */
    --line-height-body-large: 20px;
    --line-height-body-default: 21px;
    --line-height-body-small: 22px;
    --line-height-body-caption: 16px;
    --line-height-body-label: 14px;
    --line-height-body-isi: 20px;
    --line-height-body-medium: 22px;
    --line-height-body-action: 24px;

    /* LINE HEIGHTS — BODY (MOBILE) */
    --line-height-body-caption-mobile: 13px;
    --line-height-body-label-mobile: 12px;

    /* 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;
    --line-height-button-figma-small: 15px;
    --line-height-button-figma-large: 21px;

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

    /* FONT WEIGHTS for Whitney family */
    --font-weight-light-whitney: 300;
    --font-weight-default-whitney: 325;
    --font-weight-medium-whitney: 350;
    --font-weight-semibold-whitney: 375;
    --font-weight-bold-whitney: 400;
    --font-weight-black-whitney: 475;

    /* 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-card-heading-light: #81a354;
    --color-text-input-label: #144633;
    --color-text-isi-body: #3d3d3d;

    /* ============================================
     SPACING
     ============================================ */
    --spacing-0: 0px;
    --spacing-1: 1px;
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-5: 5px;
    --spacing-6: 6px;
    --spacing-8: 8px;
    --spacing-10: 10px;
    --spacing-12: 12px;
    --spacing-14: 14px;
    --spacing-15: 15px;
    --spacing-16: 16px;
    --spacing-18: 18px;
    --spacing-20: 20px;
    --spacing-22: 22px;
    --spacing-24: 24px;
    --spacing-25: 25px;
    --spacing-26: 26px;
    --spacing-28: 28px;
    --spacing-30: 30px;
    --spacing-32: 32px;
    --spacing-34: 34px;
    --spacing-35: 35px;
    --spacing-36: 36px;
    --spacing-40: 40px;
    --spacing-42: 42px;
    --spacing-44: 44px;
    --spacing-48: 48px;
    --spacing-50: 50px;
    --spacing-52: 52px;
    --spacing-56: 56px;
    --spacing-60: 60px;
    --spacing-62: 62px;
    --spacing-64: 64px;
    --spacing-68: 68px;
    --spacing-72: 72px;
    --spacing-76: 76px;
    --spacing-80: 80px;
    --spacing-84: 84px;
    --spacing-88: 88px;
    --spacing-92: 92px;
    --spacing-96: 96px;
    --spacing-100: 100px;
    --spacing-200: 200px;

    /* ============================================
     BORDER RADIUS
     ============================================ */
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-14: 14px;
    --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;
    --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 — GREEN (Figma: Default/Green, Emerald-850) */
    --button-green-bg: #07412c;
    --button-green-bg-hover: #42711e;
    --button-pressed-gradient: linear-gradient(
        46deg,
        rgb(41 67 57) 42%,
        rgb(59 110 23) 104%
    );
    --button-yellow-bg-active: #e8b800;
    --button-green-text: #fff;
    --button-yellow-pressed-gradient: linear-gradient(
        270deg,
        #fdcf00 0%,
        #e6a600 100%
    );
    --button-eyebrow-bg-active: linear-gradient(
        71deg,
        #294339 42.01%,
        #3b6e17 103.94%
    );

    /* BUTTONS — OUTLINE (Figma: Default/Outline) */
    --button-outline-bg: transparent;
    --button-outline-stroke: #07412c;
    --button-outline-text: #07412c;
    --button-outline-bg-hover: #07412c;
    --button-outline-text-hover: #fff;

    /* BUTTONS — YELLOW (Figma: Default/Yellow, Marigold-400) */
    --button-yellow-bg: #fdcf00;
    --button-yellow-bg-hover: #e6a600;
    --button-yellow-text: #414042;

    /* BUTTONS — EYEBROW */
    --button-eyebrow-primary-bg: #e6a600;
    --button-eyebrow-primary-bg-hover: #d5a106;
    --button-eyebrow-primary-text: #414042;
    --button-eyebrow-secondary-bg: #414042;
    --button-eyebrow-secondary-bg-hover: #2a2a2a;
    --button-eyebrow-secondary-text: #fff;

    /* BUTTONS — SECONDARY CTA (Figma: Button/Secondary) */
    --button-secondary-cta-bg: #f0f2f2;
    --button-secondary-cta-stroke: #07412c;
    --button-secondary-cta-text: #07412c;
    --button-secondary-cta-bg-hover: #07412c;
    --button-secondary-cta-text-hover: #fff;

    /* BUTTONS — ANIMATED (Figma: Animated Button & SZ Animated) */
    --button-animated-bg: #fff;
    --button-animated-bg-hover: #ffd100;
    --button-animated-stroke: #07412c;
    --button-animated-text: #07412c;
    --button-animated-stripe: #ffd100;
    --button-animated-font-size: 14px;
    --button-animated-line-height: 20px;
    --button-animated-sz-mobile-bg: #07412c;
    --button-animated-sz-mobile-text: #fff;

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

    /* SURFACE SHADOWS */
    --shadow-surface-tab: -4px 0 2px rgb(0 0 0 / 10%);
    --shadow-surface-panel: -4px 4px 4px 0 rgb(0 0 0 / 10%);

    /* HERO MDD LAYOUT */
    --hero-mdd-mobile-max-width: 375px;
    --hero-mdd-desktop-width: 1024px;
    --hero-mdd-desktop-height: 524px;
    --hero-mdd-tablet-width: 800px;
    --hero-mdd-tablet-height: 410px;
    --hero-mdd-gradient: linear-gradient(to bottom, #00452b, #001d11);
    --hero-mdd-overlay-width: 665px;
    --hero-mdd-overlay-height: 397px;
    --hero-mdd-overlay-left: 7px;
    --hero-mdd-overlay-top: 114px;
    --hero-mdd-tablet-overlay-width: 530px;
    --hero-mdd-tablet-overlay-height: 220px;
    --hero-mdd-tablet-overlay-left: 7px;
    --hero-mdd-tablet-overlay-top: 112px;
    --hero-mdd-banner-bg: #e6a600;
    --hero-mdd-button-bg: #fdcf00;
    --hero-mdd-button-bg-hover: #e6ba00;
    --hero-mdd-button-text: var(--color-neutral-550);
    --hero-mdd-badge-desktop-width: 273px;
    --hero-mdd-badge-desktop-height: 258px;
    --hero-mdd-badge-tablet-width: 197px;
    --hero-mdd-badge-tablet-height: 187px;
    --hero-mdd-badge-mobile-width: 146px;
    --hero-mdd-badge-mobile-height: 138px;
    --hero-mdd-icon-size: 55px;

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

    /* ============================================
     COMPONENTS — PILL
     ============================================ */
    --color-pill-green: #edf1e9;
    --color-pill-marigold: rgb(253 207 0 / 10%);
    --font-size-pill-small: 12px;
}