:root[data-theme="ib"] {

    /* palette */
    --ib-navy-blue: #122f4f;
    --ib-navy-blue-light: #4a5f7f;
    --ib-olive: #8e9279;
    --ib-camel: #a3754d;
    --ib-stone: #e0dcd5;
    --ib-sand: #ccb291;
    --ib-gold: #d9b46f;
    --ib-light-blue: #f3f5f6;
    --ib-light-stone: #f9f8f7;
    --ib-green: #2b8b68;
    --ib-red: #bc0000;
    --ib-grey: #ebebeb;
    --ib-light-grey: #f8f8f8;
    --ib-dark-grey: #bebebe;
    --ib-orange: #f36641;

    /* colors */
    --colors-surface-primary: light-dark(var(--ib-light-blue), hsl(from var(--colors-background) h s calc(l + 10)));
    --colors-surface-secondary: light-dark(var(--ib-light-stone), hsl(from var(--colors-background) h s calc(l + 20)));
    --colors-surface-disabled: light-dark(var(--ib-stone), hsl(from var(--colors-background) h s calc(l + 30)));
    --colors-text: light-dark(var(--ib-navy-blue), var(--white));
    --colors-text-secondary: var(--ib-dark-grey);
    --colors-text-disabled: var(--ib-light-grey);
    --colors-error: var(--ib-red);
    --colors-warning: var(--ib-orange);
    --colors-success: var(--ib-green);
    --colors-info: var(--ib-navy-blue-light);
    --colors-brand-default-primary: var(--ib-navy-blue);
    --colors-brand-default-secondary: var(--white);

    /* border */
    --border-width: 1px;
    --border-color: var(--ib-grey);

    /* radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-xxl: 100px;

    /* links */
    --links-color: var(--colors-text);
    --links-color-hover: var(--ib-navy-blue-light);
    --links-color-active: var(--colors-text-secondary);
    --links-hover-text-decoration: underline;

    /* form */
    --form-field-background: var(--colors-surface-primary);
    --form-field-border-color: var(--ib-grey);
    --form-field-border-radius: var(--radius-sm);
    --form-field-min-height: 44px;
    --form-input-placeholder: var(--colors-text-secondary);
    --form-dropdown-hover: var(--colors-surface-primary);
    --form-dropdown-selected: var(--colors-surface-primary);
    --form-radio-grid-columns: auto-fit;

    /* billboard */
    --billboard-carousel-arrow-icon: arrow;
    --billboard-carousel-arrow-background-icon: var(--colors-background);
    --billboard-carousel-arrow-icon-color: var(--colors-text);
    --billboard-carousel-arrow-border-radius: var(--radius-sm);
    --billboard-carousel-arrow-disabled-color: var(--ib-dark-grey);

    /* carousel */
    --carousel-arrow-background: var(--colors-background);
    --carousel-arrow-color: var(--colors-text);
    --carousel-arrow-border-radius: none;
    --carousel-arrow-shadow: none;
    --carousel-dot-size: 8px;
    --carousel-dot-color: var(--colors-surface-secondary);
    --carousel-dot-color-active: var(--colors-text);
    --carousel-dot-border-color: transparent;

    /* panel */
    --panel-header-background: var(--colors-surface-secondary);
    --panel-header-text: var(--colors-text);

    /* buttons */

    --buttons-primary-background: var(--ib-olive);
    --buttons-primary-text: var(--white);
    --buttons-primary-border-color: var(--ib-olive);
    --buttons-primary-border-radius: var(--radius-sm);
    --buttons-primary-padding: 1.2rem 2.8rem;
    --buttons-primary-min-height: 5.2rem;
    --buttons-primary-font-family: var(--font-family-main-regular);
    --buttons-primary-font-size: 1.6rem;
    --buttons-primary-line-height: 2rem;
    --buttons-primary-letter-spacing: 0.1rem;
    --buttons-primary-text-transform: uppercase;
    --buttons-primary-font-weight: 700;

    --buttons-secondary-background: var(--colors-background);
    --buttons-secondary-text: var(--colors-text);
    --buttons-secondary-border-color: var(--colors-text);
    --buttons-secondary-border-radius: var(--radius-sm);
    --buttons-secondary-padding: 1.2rem 2.8rem;
    --buttons-secondary-min-height: 5.2rem;
    --buttons-secondary-font-family: var(--font-family-main-regular);
    --buttons-secondary-font-size: 1.6rem;
    --buttons-secondary-line-height: 2rem;
    --buttons-secondary-letter-spacing: 0.1rem;
    --buttons-secondary-text-transform: uppercase;
    --buttons-secondary-font-weight: 700;

    --buttons-a2c-background: var(--ib-navy-blue);
    --buttons-a2c-text: var(--white);
    --buttons-a2c-border-color: var(--ib-navy-blue);
    --buttons-a2c-border-radius: var(--radius-sm);
    --buttons-a2c-padding: 1.2rem 2.8rem;
    --buttons-a2c-min-height: 5.2rem;
    --buttons-a2c-font-family: var(--font-family-main-regular);
    --buttons-a2c-font-size: 1.6rem;
    --buttons-a2c-line-height: 2rem;
    --buttons-a2c-letter-spacing: 0.1rem;
    --buttons-a2c-text-transform: uppercase;
    --buttons-a2c-font-weight: 700;

    --buttons-preview-text: var(--ib-navy-blue);
    --buttons-preview-border-radius: var(--radius-sm);
    --buttons-preview-background: var(--ib-light-stone);
    --buttons-preview-padding: 1.2rem 2.8rem;
    --buttons-preview-border-color: var(--ib-light-stone);
    --buttons-preview-min-height: 5.2rem;
    --buttons-preview-font-family: var(--font-family-main-regular);
    --buttons-preview-font-size: 1.6rem;
    --buttons-preview-line-height: 2rem;
    --buttons-preview-letter-spacing: 0.1rem;
    --buttons-preview-text-transform: uppercase;
    --buttons-preview-font-weight: 700;

    --buttons-disabled-background: var(--ib-light-grey);
    --buttons-disabled-text: var(--ib-dark-grey);
    --buttons-disabled-border-color: transparent;
    --buttons-disabled-border-radius: var(--radius-sm);
    --buttons-disabled-padding: 1.2rem 2.8rem;
    --buttons-disabled-min-height: 5rem;
    --buttons-disabled-font-family: var(--font-family-main-regular);
    --buttons-disabled-font-size: 1.6rem;
    --buttons-disabled-line-height: 2rem;
    --buttons-disabled-letter-spacing: 0.1rem;
    --buttons-disabled-text-transform: uppercase;
    --buttons-disabled-font-weight: 700;

    --buttons-link-background: transparent;
    --buttons-link-text: var(--colors-text);
    --buttons-link-border-color: transparent;
    --buttons-link-border-radius: var(--radius-sm);
    --buttons-link-padding: 0;
    --buttons-link-min-height: 0rem;
    --buttons-link-font-family: var(--font-family-main-regular);
    --buttons-link-font-size: 1.6rem;
    --buttons-link-line-height: 2.2rem;
    --buttons-link-font-weight: 600;

    --buttons-button-link-background: transparent;
    --buttons-button-link-text: var(--white);
    --buttons-button-link-border-color: transparent;
    --buttons-button-link-border-radius: none;
    --buttons-button-link-padding: 0;
    --buttons-button-link-min-height: 0rem;
    --buttons-button-link-font-family: var(--font-family-main-regular);
    --buttons-button-link-font-size: 1.6rem;
    --buttons-button-link-line-height: 2rem;
    --buttons-button-link-letter-spacing: 0.1rem;
    --buttons-button-link-text-transform: uppercase;
    --buttons-button-link-font-weight: 700;
    --buttons-button-link-text-decoration: underline;

    --buttons-upsell-primary-background: var(--colors-background);
    --buttons-upsell-primary-text: var(--colors-text);
    --buttons-upsell-primary-border-color: var(--colors-text);
    --buttons-upsell-primary-border-radius: var(--radius-sm);
    --buttons-upsell-primary-padding: 0.8rem 1.2rem;
    --buttons-upsell-primary-min-height: 4rem;
    --buttons-upsell-primary-font-family: var(--font-family-main-regular);
    --buttons-upsell-primary-font-size: 1.6rem;
    --buttons-upsell-primary-line-height: 2.2rem;

    /* button */


    --button-sizes-normal-radius: var(--radius-sm);
    --button-sizes-normal-padding: 1.2rem 2.8rem;
    --button-sizes-normal-min-height: 5.2rem;
    --button-sizes-normal-font-family: var(--font-family-main-regular);
    --button-sizes-normal-font-size: 1.6rem;
    --button-sizes-normal-line-height: 2rem;
    --button-sizes-normal-letter-spacing: 0.1rem;
    --button-sizes-normal-text-transform: uppercase;
    --button-sizes-normal-font-weight: 700;

    --button-sizes-small-radius: var(--radius-sm);
    --button-sizes-small-padding: 0.8rem 1.2rem;
    --button-sizes-small-min-height: 4rem;
    --button-sizes-small-font-family: var(--font-family-main-regular);
    --button-sizes-small-font-size: 1.4rem;
    --button-sizes-small-line-height: 2rem;

    --button-sizes-xsmall-radius: var(--radius-sm);
    --button-sizes-xsmall-padding: 0.3rem 0.8rem;
    --button-sizes-xsmall-min-height: 2.4rem;
    --button-sizes-xsmall-font-family: var(--font-family-main-regular);
    --button-sizes-xsmall-font-size: 1.2rem;
    --button-sizes-xsmall-line-height: 1.4rem;


    --button-colors-primary-background: var(--colors-text);
    --button-colors-primary-text: var(--colors-background);
    --button-colors-primary-border-color: var(--colors-text);

    --button-colors-secondary-background: var(--ib-light-stone);
    --button-colors-secondary-text: var(--ib-navy-blue);
    --button-colors-secondary-border-color: var(--ib-light-stone);

    --button-colors-cta-background: var(--colors-text);
    --button-colors-cta-text: var(--colors-background);
    --button-colors-cta-border-color: var(--colors-text);

    --button-colors-ghost-background: transparent;
    --button-colors-ghost-text: var(--colors-text);
    --button-colors-ghost-border-color: var(--colors-text);

    --button-link-color: var(--colors-text);
    --button-link-color-hover: var(--colors-text-secondary);
    --button-link-text-decoration: underline;

    /* typography */
    --typography-default-font-size: 18;


    --typography-rules-headline1-font-family: var(--font-family-main-regular);
    --typography-rules-headline1-font-size: 3.6rem;
    --typography-rules-headline1-line-height: 4rem;
    --typography-rules-headline1-font-weight: 600;

    --typography-rules-headline2-font-family: var(--font-family-main-regular);
    --typography-rules-headline2-font-size: 2.4rem;
    --typography-rules-headline2-line-height: 2.8rem;

    --typography-rules-headline3-font-family: var(--font-family-main-regular);
    --typography-rules-headline3-font-size: 2.4rem;
    --typography-rules-headline3-line-height: 2.8rem;
    --typography-rules-headline3-font-weight: 600;

    --typography-rules-headline4-font-family: var(--font-family-main-regular);
    --typography-rules-headline4-font-size: 2.6rem;
    --typography-rules-headline4-line-height: 3.6rem;
    --typography-rules-headline4-font-weight: 600;

    --typography-rules-headline5-font-family: var(--font-family-main-regular);
    --typography-rules-headline5-font-size: 2.6rem;
    --typography-rules-headline5-line-height: 3.2rem;

    --typography-rules-headline6-font-family: var(--font-family-main-regular);
    --typography-rules-headline6-font-size: 1.8rem;
    --typography-rules-headline6-line-height: 2.4rem;
    --typography-rules-headline6-letter-spacing: 0.1rem;
    --typography-rules-headline6-text-transform: uppercase;
    --typography-rules-headline6-font-weight: 700;

    --typography-rules-headline7-font-family: var(--font-family-main-regular);
    --typography-rules-headline7-font-size: 1.8rem;
    --typography-rules-headline7-line-height: 2.4rem;
    --typography-rules-headline7-font-weight: 600;

    --typography-rules-headline8-font-family: var(--font-family-main-regular);
    --typography-rules-headline8-font-size: 1.8rem;
    --typography-rules-headline8-line-height: 2.4rem;
    --typography-rules-headline8-font-weight: 600;

    --typography-rules-headline9-font-family: var(--font-family-main-regular);
    --typography-rules-headline9-font-size: 1.8rem;
    --typography-rules-headline9-line-height: 2.4rem;
    --typography-rules-headline9-font-weight: 600;

    --typography-rules-headline10-font-family: var(--font-family-main-regular);
    --typography-rules-headline10-font-size: 1.4rem;
    --typography-rules-headline10-line-height: 1.6rem;
    --typography-rules-headline10-font-weight: 600;
    --typography-rules-headline10-text-transform: uppercase;

    --typography-rules-headline11-font-family: var(--font-family-main-regular);
    --typography-rules-headline11-font-size: 1.8rem;
    --typography-rules-headline11-line-height: 2.4rem;

    --typography-rules-headline12-font-family: var(--font-family-main-regular);
    --typography-rules-headline12-font-size: 2.6rem;
    --typography-rules-headline12-line-height: 3.4rem;

    --typography-rules-text1-font-family: var(--font-family-main-regular);
    --typography-rules-text1-font-size: 1.6rem;
    --typography-rules-text1-line-height: 2.2rem;

    --typography-rules-text2-font-family: var(--font-family-main-regular);
    --typography-rules-text2-font-size: 1.6rem;
    --typography-rules-text2-line-height: 2.2rem;
    --typography-rules-text2-font-weight: 600;

    --typography-rules-text3-font-family: var(--font-family-main-regular);
    --typography-rules-text3-font-size: 1.3rem;
    --typography-rules-text3-line-height: 1.6rem;
    --typography-rules-text3-letter-spacing: 0;

    --typography-rules-text4-font-family: var(--font-family-main-regular);
    --typography-rules-text4-font-size: 1.3rem;
    --typography-rules-text4-line-height: 1.6rem;
    --typography-rules-text4-font-weight: 600;

    --typography-rules-text5-font-family: var(--font-family-main-regular);
    --typography-rules-text5-font-size: 1.6rem;
    --typography-rules-text5-line-height: 2rem;

    --typography-rules-text6-font-family: var(--font-family-main-regular);
    --typography-rules-text6-font-size: 1.6rem;
    --typography-rules-text6-line-height: 2rem;
    --typography-rules-text6-font-weight: 600;

    --typography-rules-text7-font-family: var(--font-family-main-regular);
    --typography-rules-text7-font-size: 1.6rem;
    --typography-rules-text7-line-height: 2rem;

    --typography-rules-text8-font-family: var(--font-family-main-regular);
    --typography-rules-text8-font-size: 1rem;
    --typography-rules-text8-line-height: 1.4rem;

    --typography-rules-text9-font-family: var(--font-family-main-regular);
    --typography-rules-text9-font-size: 1rem;
    --typography-rules-text9-line-height: 1.4rem;
    --typography-rules-text9-font-weight: 600;

    --typography-rules-paragraph1-font-family: var(--font-family-main-regular);
    --typography-rules-paragraph1-font-size: 1.6rem;
    --typography-rules-paragraph1-line-height: 2.2rem;

    --typography-rules-paragraph2-font-family: var(--font-family-main-regular);
    --typography-rules-paragraph2-font-size: 1.6rem;
    --typography-rules-paragraph2-line-height: 2.2rem;
    --typography-rules-paragraph2-font-weight: 600;

    --typography-rules-paragraph3-font-family: var(--font-family-main-regular);
    --typography-rules-paragraph3-font-size: 1.8rem;
    --typography-rules-paragraph3-line-height: 2.6rem;
    --typography-rules-paragraph3-font-weight: 600;

    --typography-rules-paragraph4-font-family: var(--font-family-main-regular);
    --typography-rules-paragraph4-font-size: 1.6rem;
    --typography-rules-paragraph4-line-height: 2.4rem;

    --typography-rules-links1-font-family: var(--font-family-main-regular);
    --typography-rules-links1-font-size: 1.2rem;
    --typography-rules-links1-line-height: 1.8rem;

    --typography-rules-button1-font-family: var(--font-family-main-regular);
    --typography-rules-button1-font-size: 1.6rem;
    --typography-rules-button1-line-height: 2rem;
    --typography-rules-button1-letter-spacing: 0.1rem;
    --typography-rules-button1-text-transform: uppercase;
    --typography-rules-button1-font-weight: 700;

    --typography-rules-button2-font-family: var(--font-family-main-bold);
    --typography-rules-button2-font-size: 1.4rem;
    --typography-rules-button2-line-height: 2rem;

    --typography-rules-disclaimer1-font-family: var(--font-family-main-regular);
    --typography-rules-disclaimer1-font-size: 1rem;
    --typography-rules-disclaimer1-line-height: 1.4rem;

    --typography-rules-disclaimer2-font-family: var(--font-family-main-bold);
    --typography-rules-disclaimer2-font-size: 1rem;
    --typography-rules-disclaimer2-line-height: 1.4rem;

    --typography-rules-caption1-font-family: var(--font-family-main-regular);
    --typography-rules-caption1-font-size: 1.3rem;
    --typography-rules-caption1-line-height: 1.6rem;

    --typography-rules-caption2-font-family: var(--font-family-main-regular);
    --typography-rules-caption2-font-size: 1.3rem;
    --typography-rules-caption2-line-height: 1.6rem;
    --typography-rules-caption2-font-weight: 600;

    --typography-rules-ribbons1-font-family: var(--font-family-main-regular);
    --typography-rules-ribbons1-font-size: 1.3rem;
    --typography-rules-ribbons1-line-height: 1.3rem;
    --typography-rules-ribbons1-font-weight: 600;

    /* ecommerce */
    --free-gift-background: var(--ib-light-blue);
    --sticky-message-background: var(--ib-navy-blue);
    --product-image-background-bland: var(--ib-light-stone);
    --product-image-aspect-ratio: 1 / 1;
    --star: var(--ib-navy-blue);
    --star-inactive: var(--ib-dark-grey);
    --sale-price-color: var(--colors-text);
    --crossed-price-color: var(--colors-text);
    --discount-message-color: var(--colors-text);
    --discount-message-background: var(--ib-light-blue);
    --ribbon-background: var(--ib-olive);
    --ribbon-text: var(--white);
    --ribbon-border-radius: none;
    --ribbon-oos-background: var(--ib-dark-grey);
    --ribbon-oos-text-color: var(--white);
    --ribbon-secondary-background: var(--ib-olive);
    --ribbon-secondary-text-color: var(--white);
    --ribbon-just-added-background: var(--colors-surface-secondary);
    --ribbon-just-added-text-color: var(--colors-text);
    --bundle-ribbon-background: var(--ib-camel);
    --bundle-ribbon-text: var(--white);
    --media-gallery-gap-d-t: var(--spacing-xs);
    --featured-articles-layout: emphasized;
    --category-page-title-justify: center;
    --category-header-layout: vertical;
    --related-category-background: var(--ib-light-stone);
    --related-category-text: var(--colors-text);
    --related-category-background-hover: var(--ib-navy-blue);
    --related-category-text-hover: var(--white);
    --related-category-radius: var(--radius-xxl);
    --related-category-border: transparent;
    --related-category-border-hover: transparent;
    --review-summary-background: var(--colors-text-disabled);
    --review-summary-border: var(--ib-grey);
    --checkout-header-background: var(--colors-surface-secondary);
    --checkout-loyalty-text: var(--colors-text);
    --checkout-check-icon-background: var(--colors-text);

    /* layout */
    --layout-announcements-bar-background: var(--ib-navy-blue);
    --layout-announcements-bar-text: var(--white);
    --layout-homepage-header-scheme: dark;
    --layout-footer-main-background: var(--ib-stone);
    --layout-footer-main-text: var(--ib-navy-blue);
    --layout-footer-newsletter-background: var(--ib-stone);
    --layout-footer-newsletter-text: var(--ib-navy-blue);
    --layout-footer-secondary-background: var(--ib-light-stone);
    --layout-footer-secondary-text: var(--ib-navy-blue);

    /* rewards */
    --rewards-intro-svg-display: none;
    --rewards-progress-display: none;
    --rewards-flow-number-background: transparent;
    --rewards-border-color: transparent;
    --rewards-completed-icon: ;

    --rewards-rules-icons-signup: ;
    --rewards-rules-icons-purchase: ;
    --rewards-rules-icons-newsletter: ;
    --rewards-rules-icons-referral: ;
    --rewards-rules-icons-birthday: ;
    --rewards-rules-icons-facebook-like: ;
    --rewards-rules-icons-instagram-follow: ;
    --rewards-rules-icons-review: ;
    --rewards-rules-icons-anniversary: ;
}

:root[data-theme="ib"] {
    @media (min-width: 768px) {
        --typography-rules-headline1-font-size: 6rem;
        --typography-rules-headline1-line-height: 6.8rem;
        --typography-rules-headline2-font-size: 3.6rem;
        --typography-rules-headline2-line-height: 4.2rem;
        --typography-rules-headline3-font-size: 3.6rem;
        --typography-rules-headline3-line-height: 4.2rem;
        --typography-rules-headline9-font-size: 2.2rem;
        --typography-rules-headline9-line-height: 2.8rem;
        --typography-rules-headline10-font-size: 1.6rem;
        --typography-rules-headline10-line-height: 2rem;
        --typography-rules-headline11-font-size: 2.2rem;
        --typography-rules-headline11-line-height: 2.8rem;
        --typography-rules-paragraph1-font-size: 1.8rem;
        --typography-rules-paragraph1-line-height: 2.2rem;
        --typography-rules-paragraph2-font-size: 1.8rem;
        --typography-rules-paragraph2-line-height: 2.2rem;
        --typography-rules-disclaimer1-font-size: 1.6rem;
        --typography-rules-disclaimer2-font-size: 1.6rem;
        --typography-rules-ribbons1-font-size: 2rem;
        --typography-rules-ribbons1-line-height: 2rem;
    }
}