:root {

    /* ==========================================================================
    COLORS
    ========================================================================== */

    --mcg-green: #34D3BD; /* Bright Teal */
    --mcg-green-light: #7BE6D6; /* Soft Teal Tint */
    --mcg-green-lighter: #E5FAF7;
    --mcg-green-even-lighter: #EDF8F4;
    --mcg-cyan-light: #DBFFFA99;
    --mcg-teal-light: #34D3BD1A;
    --mcg-blue-light: #4A6F75; /* Muted Slate Blue */
    --mcg-blue: #0E4F56; /* Deep Teal */
    --mcg-blue-dark: #16484A;
    --mcg-blue-darker: #083A40; /* Gardian Dark Teal */
    --mcg-dark: #2B3F42; /* Charcoal Teal */
    --mcg-darker: #164849;
    --mcg-white: #FFFFFF;
    --mcg-orange: #FD7F20; /* Signal Orange */
    --mcg-yellow: #FACC15;
    --mcg-yellow-dark: #EBAF00;
    --mcg-gray: #9AA6AC; /* Neutral Mid Gray */
    --mcg-gray-dark: #9CA3AF;
    --mcg-gray-darker: #767676;
    --mcg-gray-light: #E6ECEF; /* Cool Light Gray */
    --mcg-gray-lighter: #F0F5F4;
    --mcg-cream: #FAF9F7;  /* Soft Warm White */
    --mcg-red: #E5533D;

    /* ==========================================================================
    DEFAULT FLOW
    ========================================================================== */

    --mcg-logo-width: auto;
    --mcg-logo-height: auto;
    --mcg-header-background: var(--mcg-cream);
    --mcg-header-button-background: var(--mcg-orange);
    --mcg-header-button-color: var(--mcg-white);

    --mcg-banner-title-1-color: var(--mcg-blue-dark);
    --mcg-banner-title-2-color: var(--mcg-green);
    --mcg-banner-title-3-color: var(--mcg-darker);
    --mcg-banner-button-background: var(--mcg-orange);
    --mcg-banner-button-color: var(--mcg-white);
    --mcg-banner-icon-color: var(--mcg-white);

    --mcg-home-stepper-background: var(--mcg-green);
    --mcg-home-stepper-box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
    --mcg-home-stepper-color: var(--mcg-blue-darker);
    --mcg-home-stepper-background-with-gradient: linear-gradient( var(--mcg-green), var(--mcg-green-light));

    /* ==========================================================================
    CHECKBOX
    ========================================================================== */

    --mcg-checkbox-background: var(--mcg-white);
    --mcg-checkbox-border-color: var(--mcg-gray-light);
    --mcg-checkbox-checked-background: var(--mcg-green);
    --mcg-checkbox-checked-border-color: var(--mcg-green);
    --mcg-checkbox-darker-border-color: var(--mcg-gray-darker);

    /* ==========================================================================
    CHECKOUT FLOW
    ========================================================================== */

    /* GENERAL */
    --checkout-main-background: linear-gradient(90deg, var(--mcg-cream) 41.83%, var(--mcg-cyan-light) 83.65%, var(--mcg-teal-light) 100%), var(--mcg-white);

    --mcg-checkout-logo-width: auto;
    --mcg-checkout-logo-height: auto;
    --checkout-header-background: var(--mcg-cream);
    --checkout-header-button-background: var(--mcg-orange);
    --checkout-header-button-color: var(--mcg-white);

    --checkout-burger-menu-background: var(--mcg-orange);
    --checkout-burger-menu-color: var(--mcg-white);
    --checkout-burger-menu-box-shadow: 0px 14px 5px rgba(0, 0, 0, 0.01), 0px 8px 5px rgba(0, 0, 0, 0.05), 0px 3px 3px rgba(0, 0, 0, 0.09), 0px 1px 2px rgba(0, 0, 0, 0.1);
    --checkout-burger-menu-border-radius: 8px;
    --checkout-burger-menu-close-background: var(--mcg-green);
    --checkout-burger-menu-close-color: var(--mcg-blue-darker);
    --checkout-burger-menu-close-box-shadow: -13px 16px 8px rgba(0, 0, 0, 0.01), -8px 9px 7px rgba(0, 0, 0, 0.05), -3px 4px 5px rgba(0, 0, 0, 0.09), -1px 1px 3px rgba(0, 0, 0, 0.1);
    --checkout-burger-menu-close-border-radius: 8px;

    /* ICONS */
    --svg-ico-color-1: #FE7F20;
    --svg-ico-color-2: #34D1BC;
    --svg-ico-color-3: #135259;
    --svg-ico-color-4: #E2E8EB;

    /* CHECKOUT STEPPER */
    --checkout-stepper-background: linear-gradient(90deg, var(--mcg-blue) 0%, var(--mcg-blue-darker) 100%);
    --checkout-stepper-counter-background: var(--mcg-green-light);
    --checkout-stepper-counter-color: var(--mcg-blue-darker);

    --checkout-step-label-font: var(--font-regular-14);
    --checkout-step-label-color: var(--mcg-blue-light);
    --checkout-step-label-active-color: var(--mcg-green);
    --checkout-step-label-done-color: var(--mcg-blue-light);

    --checkout-step-circle-font: var(--font-semi-bold-14);
    --checkout-step-circle-icon-color: var(--mcg-white);

    --checkout-step-circle-background: var(--mcg-blue-light);
    --checkout-step-circle-active-background: var(--mcg-green);
    --checkout-step-circle-done-background: var(--mcg-blue-light);

    --checkout-step-circle-color: var(--mcg-white);
    --checkout-step-circle-active-color: var(--white);
    --checkout-step-circle-done-color: var(--mcg-white);

    --checkout-step-connector-color: var(--mcg-blue-light);
    --checkout-step-connector-active-color: var(--mcg-green);
    --checkout-step-connector-done-color: var(--mcg-blue-light);

    /* STEP 1 */
    --checkout-step1-card-background: linear-gradient(180deg, #FFFFFF 0%, #EDFAF8 100%);
    --checkout-step1-card-border: 2px solid var(--mcg-gray-light);
    --checkout-step1-card-active-background: var(--mcg-green-even-lighter);
    --checkout-step1-card-active-border: var(--mcg-green);

    /* STEP 3 */
    --checkout-step3-mark-background: var(--mcg-green-lighter);
    --checkout-step3-mark-icon-color: var(--mcg-green);
    --checkout-step3-mark-color: var(--mcg-gray);

    /* STEP 4 */
    --checkout-step4-product-card-background: linear-gradient(180deg, var(--mcg-white) 0%, #EDFAF8 100%);
    --checkout-step4-product-card-border: var(--mcg-gray-light);
    --checkout-step4-product-card-border-select: var(--mcg-green);

    --checkout-step4-addon-card-background: linear-gradient(180deg, var(--mcg-white) 0%, #FFF4EC 100%);
    --checkout-step4-addon-card-border: var(--mcg-gray-light);
    --checkout-step4-addon-card-border-select: #FDC094;

    /* STEP 5 */
    --checkout-step5-mark-background: var(--mcg-green-lighter);
    --checkout-step5-mark-icon-color: var(--mcg-green);
    --checkout-step5-mark-title-color: var(--mcg-dark);
    --checkout-step5-mark-content-color1: var(--mcg-gray);
    --checkout-step5-mark-content-color2: var(--mcg-gray);

    /* ==========================================================================
    FOOTER
    ========================================================================== */

    --mcg-footer-background: var(--mcg-blue-darker);
    --mcg-footer-title-color: var(--mcg-white);
    --mcg-footer-link-color: var(--mcg-gray);
    --mcg-footer-default-color: var(--mcg-gray);
    --mcg-footer-logo-width: auto;
    --mcg-footer-logo-height: auto;
    --mcg-footer-button-background: var(--mcg-orange);
    --mcg-footer-button-color: var(--mcg-white);

    /* ==========================================================================
    QUOTE FLOW
    ========================================================================== */

    --quote-main-background: linear-gradient(90deg, var(--mcg-cream) 41.83%, var(--mcg-cyan-light) 83.65%, var(--mcg-teal-light) 100%), var(--mcg-white);

    --mcg-quote-logo-width: auto;
    --mcg-quote-logo-height: auto;
    --quote-header-background: var(--mcg-cream);
    --quote-header-button-background: var(--mcg-orange);
    --quote-header-button-color: var(--mcg-white);

    --quote-burger-menu-background: var(--mcg-orange);
    --quote-burger-menu-color: var(--mcg-white);
    --quote-burger-menu-box-shadow: 0px 14px 5px rgba(0, 0, 0, 0.01), 0px 8px 5px rgba(0, 0, 0, 0.05), 0px 3px 3px rgba(0, 0, 0, 0.09), 0px 1px 2px rgba(0, 0, 0, 0.1);
    --quote-burger-menu-border-radius: 8px;
    --quote-burger-menu-close-background: var(--mcg-green);
    --quote-burger-menu-close-color: var(--mcg-blue-darker);
    --quote-burger-menu-close-box-shadow: -13px 16px 8px rgba(0, 0, 0, 0.01), -8px 9px 7px rgba(0, 0, 0, 0.05), -3px 4px 5px rgba(0, 0, 0, 0.09), -1px 1px 3px rgba(0, 0, 0, 0.1);
    --quote-burger-menu-close-border-radius: 8px;

    /* CHECKOUT STEPPER */
    --quote-stepper-background: transparent;
    --quote-stepper-counter-background: var(--mcg-green-light);
    --quote-stepper-counter-color: var(--mcg-blue-darker);

    --quote-step-label-font: var(--font-regular-14);
    --quote-step-label-color: var(--mcg-blue-light);
    --quote-step-label-active-color: var(--mcg-green);
    --quote-step-label-done-color: var(--mcg-blue-light);

    --quote-step-circle-font: var(--font-semi-bold-14);
    --quote-step-circle-icon-color: var(--mcg-white);

    --quote-step-circle-background: var(--mcg-blue-light);
    --quote-step-circle-active-background: var(--mcg-green);
    --quote-step-circle-done-background: var(--mcg-blue-light);

    --quote-step-circle-color: var(--mcg-white);
    --quote-step-circle-active-color: var(--white);
    --quote-step-circle-done-color: var(--mcg-white);

    --quote-step-connector-color: transparent;
    --quote-step-connector-active-color: transparent;
    --quote-step-connector-done-color: transparent;

    /* STEP 2 */
    --quote-step2-selection-color: var(--mcg-green, var(--mcg-orange));
    --quote-step2-selection-light-color: var(--mcg-green-light);
    --quote-step2-option-background: linear-gradient(180deg, var(--mcg-white) 0%, #EDFAF8 100%);
    --quote-step3-option-selected-background: linear-gradient(180deg, var(--mcg-white) 0%, #EDFAF8 100%);
    --quote-step2-option-border: 2px solid var(--mcg-gray-light);
    --quote-step2-option-width: 440px;
    --quote-step2-option-height: 90px;
    --quote-step2-title: var(--mcg-blue-light);
    --quote-step2-subtitle: var(--mcg-blue-light);
    --quote-step2-label-color: var(--mcg-darker);
    --quote-step2-description-color: var(--mcg-blue-dark);
    --quote-step2-radio-border: 1px solid var(--mcg-gray-darker);

    /* STEP 3 */
    --quote-step3-selection-color: var(--mcg-green);
    --quote-step3-selection-light-color: var(--mcg-green-light);
    --quote-step3-option-width: 440px;
    --quote-step3-option-height: 90px;
    --quote-step3-selection-color: var(--mcg-green, var(--mcg-orange));
    --quote-step3-title-color: var(--mcg-dark);
    --quote-step3-card-border: 2px solid var(--mcg-gray-light);
    --quote-step3-card-background: linear-gradient(180deg, var(--mcg-white) 0%, #EDFAF8 100%);
    --quote-step3-card-selected-background: linear-gradient(180deg, var(--mcg-white) 0%, #EDFAF8 100%);
    --quote-step3-card-selected-border: var(--mcg-green);
    --quote-step3-label-color: var(--mcg-darker);

    /* STEP 4 */

    /* STEP 5 */
    --quote-step5-button-next-border: transparent;
    --quote-step5-button-next-background: var(--mcg-orange);
    --quote-step5-button-next-color: var(--mcg-dark);
    --quote-step5-button-save-border: 2px solid var(--mcg-orange);
    --quote-step5-button-save-background: var(--mcg-white);
    --quote-step5-button-save-color: var(--mcg-dark);

    /* STEP 6 */
    --quote-step6-button-next-border: transparent;
    --quote-step6-button-next-background: var(--mcg-orange);
    --quote-step6-button-next-color: var(--mcg-dark);
    --quote-step6-button-save-border: 2px solid var(--mcg-orange);
    --quote-step6-button-save-background: var(--mcg-white);
    --quote-step6-button-save-color: var(--mcg-dark);


    /* ==========================================================================
    FORMS & FIELDS
    ========================================================================== */

    --mcg-form-edit-button: var(--mcg-green);
    --mcg-form-close-button: var(--mcg-orange);

    /* SELECT */
    --mcg-select-box-shadow: 0 0 0 1px var(--dxp-g-root, #fff), 0 0 0 4px var(--dxp-g-brand-1);

    --mcg-select-color: var(--mcg-dark);
    --mcg-select-font: var(--font-regular-16);

    --mcg-select-placeholder-color: var(--mcg-gray-dark);
    --mcg-select-placeholder-font: var(--font-regular-16);
    --mcg-select-disabled-placeholder-color: var(--mcg-gray-dark);
    --mcg-select-disabled-placeholder-font: var(--font-regular-16);

    --mcg-select-border: 1px solid var(--mcg-gray-light);
    --mcg-select-background-color: unset;
    --mcg-select-background-image: url("data:image/svg+xml,%3Csvg width='22' height='11' viewBox='0 0 22 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4462 9.96363C11.0749 10.2741 10.5345 10.2741 10.1632 9.96363L0.360727 1.76715C-0.356153 1.16772 0.0677246 -2.98937e-07 1.00219 -2.17243e-07L20.6072 1.49668e-06C21.5417 1.57837e-06 21.9655 1.16773 21.2486 1.76715L11.4462 9.96363Z' fill='%23FD7F20'/%3E%3C/svg%3E");

    --mcg-select-disabled-border: unset;
    --mcg-select-disabled-background-color: var(--mcg-gray-light);
    --mcg-select-disabled-background-image: url("data:image/svg+xml,%3Csvg width='22' height='11' viewBox='0 0 22 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4462 9.96363C11.0749 10.2741 10.5345 10.2741 10.1632 9.96363L0.360727 1.76715C-0.356153 1.16772 0.0677246 -2.98937e-07 1.00219 -2.17243e-07L20.6072 1.49668e-06C21.5417 1.57837e-06 21.9655 1.16773 21.2486 1.76715L11.4462 9.96363Z' fill='%239AA6AC'/%3E%3C/svg%3E");

    --mcg-select-inquiry-border: 1px solid var(--mcg-blue);
    --mcg-select-error-border: 1px solid var(--mcg-red);

    /* ==========================================================================
    MISC
    ========================================================================== */

    --mcg-badge-background: var(--mcg-green);
    --mcg-badge-span-color: var(--mcg-blue-darker);
    --mcg-badge-p-color: var(--mcg-gray);

    --mcg-bonus-background: linear-gradient(90deg, var(--mcg-green) 0%, var(--mcg-green-light) 100%);
    --mcg-bonus-color: var(--mcg-blue-darker);
    --mcg-bonus-icon-color: var(--mcg-blue-darker);


    /* ==========================================================================
    TABLET
    ========================================================================== */

    @media (max-width: 768px) {
        --mcg-checkout-logo-width: auto;
        --mcg-checkout-logo-height: auto;
    }


    /* ==========================================================================
    MOBILE
    ========================================================================== */

    @media (max-width: 475px) {
        --mcg-checkout-logo-width: auto;
        --mcg-checkout-logo-height: auto;
        --quote-step2-subtitle: var(--mcg-blue-darker);
    }

}