:root {
    /* Section Colors */
    --color-background-color: #f0f2f2;
    --color-background-color-hcp: #f1f3f2;
    --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-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-base: #42711e;

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

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

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

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

    /* SURFACES */
    --color-surface-background: #ecefee;
    --color-surface-background-2: #e6e6e6;
    --color-surface-modal: rgb(7 65 44 / 70%);
    --shadow-surface-tab: -4px 0 4px 0 rgb(0 0 0 / 10%);
    --shadow-surface-panel: -4px 4px 4px 0 rgb(0 0 0 / 10%);

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

    /* Whitney SSm Pro — used in header / navigation */
    --font-family-whitney: "Whitney SSm Pro", sans-serif;

    /* Whitney — Figma design system (hero and other AAD components) */
    --font-family-whitney-figma: "Whitney", sans-serif;

    /* AAD TYPOGRAPHY — HEADINGS (Figma design tokens) */
    --aad-font-size-heading-h1: 38px;
    --aad-font-size-heading-h2: 28px;
    --aad-font-size-heading-h3: 24px;
    --aad-font-size-heading-h4: 20px;
    --aad-line-height-heading-h1: 48px;
    --aad-line-height-heading-h2: 35px;
    --aad-line-height-heading-h3: 34px;
    --aad-line-height-heading-h4: 28px;

    /* AAD TYPOGRAPHY — BODY (Figma design tokens) */
    --aad-font-size-body-default: 15px;
    --aad-line-height-body-default: 21px;
    --aad-color-text-body: #414042;

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

    /* FONT SIZES — COMPONENTS */
    --font-size-accordion-heading: 20px;

    /* FONT SIZES — BODY */
    --font-size-body-default: 16px;
    --font-size-body-medium: 15px;
    --font-size-body-small: 14px;
    --font-size-body-caption: 14px;
    --font-size-body-label: 12px;
    --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: 35px;
    --line-height-heading-h3: 28px;
    --line-height-heading-h4: 24px;
    --line-height-heading-h4-lg: 28px;
    --line-height-heading-isi: 28px;

    /* LINE HEIGHTS — COMPONENTS */
    --line-height-accordion-heading: 28px;

    /* LINE HEIGHTS — BODY */
    --line-height-body-default: 24px;
    --line-height-body-medium: 21px;
    --line-height-body-small: 22px;
    --line-height-body-caption: 16px;
    --line-height-body-label: 14px;
    --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;

    /* FONT WEIGHTS - Figma variable font optical sizes */
    --font-weight-alt-regular: 325;
    --font-weight-alt-medium: 350;
    --font-weight-alt-semibold: 375;
    --font-weight-alt-heavy: 450;

    /* 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-3: 3px;
    --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-24: 24px;
    --spacing-25: 25px;
    --spacing-26: 26px;
    --spacing-28: 28px;
    --spacing-30: 30px;
    --spacing-32: 32px;
    --spacing-34: 34px;
    --spacing-36: 36px;
    --spacing-40: 40px;
    --spacing-44: 44px;
    --spacing-50: 50px;
    --spacing-52: 52px;
    --spacing-56: 56px;
    --spacing-60: 60px;
    --spacing-64: 64px;
    --spacing-72: 72px;
    --spacing-76: 76px;
    --spacing-80: 80px;
    --spacing-92: 92px;
    --spacing-96: 96px;
    --spacing-100: 100px;

    /* ============================================
     BORDER RADIUS
     ============================================ */
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-10: 10px;
    --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;
    --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;

    /* HERO — AAD BUTTONS */
    --hero-btn-bg: #f0f2f2;
    --hero-btn-bg-hover: #dce0df;
    --hero-btn-text: #07412c;
    --hero-btn-font-size: 15px;
    --hero-btn-line-height: 21px;
    --hero-tablet-heading-font-size: 28px;
    --hero-tablet-heading-line-height: 31px;
    --hero-desktop-heading-font-size: 30px;
    --hero-desktop-heading-line-height: 31px;
    --hero-mobile-card-bg: #e1e8e6;

    /* ============================================
     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 */
    --pill-bg: var(--color-emerald-base);
    --pill-text: var(--color-white);
    --pill-border-radius: 48px;
    --pill-padding-horizontal: 12px;
    --pill-padding-vertical: 8px;
    --pill-font-size: 15px;
    --pill-line-height: 21px;
    --pill-mobile-padding-horizontal: 10px;
    --pill-mobile-padding-vertical: 2px;
    --pill-mobile-font-size: 11px;
    --pill-mobile-line-height: 15px;
    --pill-width: 55px;

    /* BUTTONS — FIGMA DEFAULT / SMALL */
    --font-size-button-figma: 15px;
    --font-size-button-figma-small: 11px;
    --line-height-button-figma: 21px;
    --line-height-button-figma-small: 15px;

    /* BUTTONS — FIGMA PRESSED GRADIENTS */
    --gradient-button-pressed-green: linear-gradient(
        46deg,
        rgb(41 67 57) 42%,
        rgb(59 110 23) 104%
    );
    --gradient-button-pressed-yellow: linear-gradient(
        to right,
        #e6a600,
        #fdcf00
    );
}