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

    /* palette */
    --tgr-raisin-black: #1e1e1e;
    --tgr-baby-blue: #bedff7;
    --tgr-air-blue: #76a4c4;
    --tgr-alice-blue: #e6f0f8;
    --tgr-light-blue: #f6f8fa;
    --tgr-neutral: #f4f1ee;
    --tgr-cream: #da9f94;
    --tgr-green: #478978;
    --tgr-red: #b6475f;
    --tgr-light-grey: #f8f8f8;
    --tgr-grey: #ebebeb;
    --tgr-dark-grey: #808080;
    --tgr-orange: #f36641;

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

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

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

    /* links */
    --links-color: var(--colors-text);
    --links-color-hover: var(--tgr-air-blue);
    --links-color-active: var(--tgr-air-blue);
    --links-hover-text-decoration: underline;

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

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

    /* 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(--tgr-dark-grey);

    /* carousel */
    --carousel-arrow-background: var(--colors-background);
    --carousel-arrow-color: var(--colors-text);
    --carousel-arrow-border-radius: var(--radius-sm);
    --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;

    /* buttons */

    --buttons-primary-background: var(--tgr-raisin-black);
    --buttons-primary-text: var(--white);
    --buttons-primary-border-color: transparent;
    --buttons-primary-border-radius: var(--radius-xxl);
    --buttons-primary-padding: 1.2rem 2.8rem;
    --buttons-primary-min-height: 5rem;
    --buttons-primary-font-family: var(--font-family-main-bold);
    --buttons-primary-font-size: 1.6rem;
    --buttons-primary-line-height: 2rem;
    --buttons-primary-text-transform: capitalize;

    --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-xxl);
    --buttons-secondary-padding: 1.2rem 2.8rem;
    --buttons-secondary-min-height: 5rem;
    --buttons-secondary-font-family: var(--font-family-main-bold);
    --buttons-secondary-font-size: 1.6rem;
    --buttons-secondary-line-height: 2rem;
    --buttons-secondary-text-transform: capitalize;

    --buttons-a2c-background: var(--tgr-raisin-black);
    --buttons-a2c-text: var(--white);
    --buttons-a2c-border-color: transparent;
    --buttons-a2c-border-radius: var(--radius-xxl);
    --buttons-a2c-padding: 1.2rem 2.8rem;
    --buttons-a2c-min-height: 5rem;
    --buttons-a2c-font-family: var(--font-family-main-bold);
    --buttons-a2c-font-size: 1.6rem;
    --buttons-a2c-line-height: 2rem;
    --buttons-a2c-text-transform: capitalize;

    --buttons-preview-background: var(--tgr-alice-blue);
    --buttons-preview-text: var(--tgr-raisin-black);
    --buttons-preview-border-color: var(--tgr-alice-blue);
    --buttons-preview-border-radius: var(--radius-xxl);
    --buttons-preview-padding: 1.2rem 2.8rem;
    --buttons-preview-min-height: 5rem;
    --buttons-preview-font-family: var(--font-family-main-bold);
    --buttons-preview-font-size: 1.6rem;
    --buttons-preview-line-height: 2rem;
    --buttons-preview-text-transform: capitalize;

    --buttons-disabled-background: var(--tgr-dark-grey);
    --buttons-disabled-text: var(--tgr-light-grey);
    --buttons-disabled-border-color: var(--tgr-dark-grey);
    --buttons-disabled-border-radius: var(--radius-xxl);
    --buttons-disabled-padding: 1.2rem 2.8rem;
    --buttons-disabled-min-height: 5rem;
    --buttons-disabled-font-family: var(--font-family-main-bold);
    --buttons-disabled-font-size: 1.6rem;
    --buttons-disabled-line-height: 2rem;
    --buttons-disabled-text-transform: capitalize;

    --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-bold);
    --buttons-link-font-weight: 600;
    --buttons-link-font-size: 1.4rem;
    --buttons-link-line-height: 2rem;

    --buttons-button-link-background: transparent;
    --buttons-button-link-text: var(--colors-text);
    --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-bold);
    --buttons-button-link-font-size: 1.6rem;
    --buttons-button-link-line-height: 2rem;
    --buttons-button-link-text-transform: capitalize;
    --buttons-button-link-text-decoration: underline;

    --buttons-upsell-primary-background: var(--tgr-alice-blue);
    --buttons-upsell-primary-text: var(--tgr-raisin-black);
    --buttons-upsell-primary-border-color: transparent;
    --buttons-upsell-primary-border-radius: var(--radius-xxl);
    --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.4rem;
    --buttons-upsell-primary-line-height: 2rem;

    /* button */


    --button-sizes-normal-radius: var(--radius-xxl);
    --button-sizes-normal-padding: 1.2rem 2.8rem;
    --button-sizes-normal-min-height: 5rem;
    --button-sizes-normal-font-family: var(--font-family-main-bold);
    --button-sizes-normal-font-size: 1.6rem;
    --button-sizes-normal-line-height: 2rem;
    --button-sizes-normal-text-transform: capitalize;

    --button-sizes-small-radius: var(--radius-xxl);
    --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-xxl);
    --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(--tgr-alice-blue);
    --button-colors-secondary-text: var(--tgr-raisin-black);
    --button-colors-secondary-border-color: var(--tgr-alice-blue);

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

    --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: 14;


    --typography-rules-headline1-font-family: var(--font-family-secondary-regular);
    --typography-rules-headline1-font-size: 2.4rem;
    --typography-rules-headline1-line-height: 3rem;

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

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

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

    --typography-rules-headline5-font-family: var(--font-family-main-light);
    --typography-rules-headline5-font-weight: 300;
    --typography-rules-headline5-font-size: 2rem;
    --typography-rules-headline5-line-height: 2.4rem;

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

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

    --typography-rules-headline8-font-family: var(--font-family-main-regular);
    --typography-rules-headline8-font-size: 1.6rem;
    --typography-rules-headline8-line-height: 2rem;
    --typography-rules-headline8-text-transform: uppercase;

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

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

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

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

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

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

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

    --typography-rules-text4-font-family: var(--font-family-main-bold);
    --typography-rules-text4-font-weight: 600;
    --typography-rules-text4-font-size: 1.2rem;
    --typography-rules-text4-line-height: 1.8rem;

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

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

    --typography-rules-text7-font-family: var(--font-family-main-light);
    --typography-rules-text7-font-weight: 300;
    --typography-rules-text7-font-size: 1.4rem;
    --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-bold);
    --typography-rules-text9-font-weight: 600;
    --typography-rules-text9-font-size: 1rem;
    --typography-rules-text9-line-height: 1.4rem;

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

    --typography-rules-caption2-font-family: var(--font-family-main-bold);
    --typography-rules-caption2-font-weight: 600;
    --typography-rules-caption2-font-size: 1.2rem;
    --typography-rules-caption2-line-height: 1.4rem;

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

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

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

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

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

    --typography-rules-button1-font-family: var(--font-family-main-bold);
    --typography-rules-button1-font-size: 1.6rem;
    --typography-rules-button1-line-height: 2rem;
    --typography-rules-button1-text-transform: capitalize;

    --typography-rules-button2-font-family: var(--font-family-main-bold);
    --typography-rules-button2-font-weight: 600;
    --typography-rules-button2-font-size: 1.6rem;
    --typography-rules-button2-line-height: 2rem;
    --typography-rules-button2-text-transform: capitalize;

    --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-weight: 600;
    --typography-rules-disclaimer2-font-size: 1rem;
    --typography-rules-disclaimer2-line-height: 1.4rem;

    --typography-rules-ribbons1-font-family: var(--font-family-main-regular);
    --typography-rules-ribbons1-font-size: 1.2rem;
    --typography-rules-ribbons1-line-height: 1.6rem;
    --typography-rules-ribbons1-text-transform: capitalize;

    /* ecommerce */
    --free-gift-background: var(--tgr-alice-blue);
    --sticky-message-background: var(--black);
    --product-image-background-bland: var(--tgr-light-blue);
    --product-image-aspect-ratio: 1 / 1;
    --star: var(--tgr-raisin-black);
    --star-inactive: var(--tgr-dark-grey);
    --sale-price-color: var(--colors-text);
    --crossed-price-color: var(--colors-text-secondary);
    --discount-message-color: var(--colors-text);
    --discount-message-background: var(--tgr-light-grey);
    --ribbon-background: var(--tgr-baby-blue);
    --ribbon-text: var(--tgr-raisin-black);
    --ribbon-border-radius: var(--radius-xxl);
    --ribbon-oos-background: var(--tgr-dark-grey);
    --ribbon-oos-text-color: var(--white);
    --ribbon-secondary-background: var(--colors-text);
    --ribbon-secondary-text-color: var(--colors-background);
    --ribbon-just-added-background: var(--colors-surface-secondary);
    --ribbon-just-added-text-color: var(--colors-text);
    --bundle-ribbon-background: var(--tgr-green);
    --bundle-ribbon-text: var(--white);
    --media-gallery-gap-d-t: var(--spacing-xxxs);
    --featured-articles-layout: emphasized;
    --category-page-title-justify: start;
    --category-header-layout: vertical;
    --related-category-background: var(--colors-background);
    --related-category-text: var(--colors-text);
    --related-category-background-hover: var(--colors-background);
    --related-category-text-hover: var(--colors-text);
    --related-category-radius: var(--radius-xxl);
    --related-category-border: var(--tgr-grey);
    --related-category-border-hover: var(--colors-text);
    --review-summary-background: var(--colors-text-disabled);
    --review-summary-border: var(--tgr-grey);
    --checkout-header-background: var(--colors-info);
    --checkout-loyalty-text: var(--tgr-air-blue);
    --checkout-check-icon-background: var(--tgr-green);

    /* layout */
    --layout-announcements-bar-background: var(--tgr-neutral);
    --layout-announcements-bar-text: var(--tgr-raisin-black);
    --layout-homepage-header-scheme: dark;
    --layout-footer-main-background: var(--colors-background);
    --layout-footer-main-text: var(--tgr-raisin-black);
    --layout-footer-newsletter-background: var(--tgr-baby-blue);
    --layout-footer-newsletter-text: var(--tgr-raisin-black);
    --layout-footer-secondary-background: var(--colors-background);
    --layout-footer-secondary-text: var(--colors-text);

    /* rewards */
    --rewards-intro-svg-display: none;
    --rewards-progress-display: block;
    --rewards-flow-number-background: var(--tgr-alice-blue);
    --rewards-border-color: var(--tgr-grey);
    --rewards-tier-active-color: var(--tgr-air-blue);
    --rewards-completed-icon: url('/loyaltylion/icons/tgr/completed.svg');

    --rewards-rules-icons-signup: url('/loyaltylion/icons/tgr/signup.svg');
    --rewards-rules-icons-purchase: url('/loyaltylion/icons/tgr/purchase.svg');
    --rewards-rules-icons-newsletter: url('/loyaltylion/icons/tgr/newsletter.svg');
    --rewards-rules-icons-referral: url('/loyaltylion/icons/tgr/referral.svg');
    --rewards-rules-icons-birthday: url('/loyaltylion/icons/tgr/birthday.svg');
    --rewards-rules-icons-facebook-like: url('/loyaltylion/icons/tgr/facebook.svg');
    --rewards-rules-icons-instagram-follow: url('/loyaltylion/icons/tgr/instagram.svg');
    --rewards-rules-icons-review: url('/loyaltylion/icons/tgr/review.svg');
    --rewards-rules-icons-anniversary: url('/loyaltylion/icons/tgr/anniversary.svg');

    --rewards-lion-icons-large: url('/loyaltylion/icons/tgr/large.svg');
    --rewards-lion-icons-clock: url('/loyaltylion/icons/tgr/clock.svg');
    --rewards-lion-icons-approved: url('/loyaltylion/icons/tgr/approved.svg');
    --rewards-lion-icons-copy: url('/loyaltylion/icons/tgr/copy.svg');
}

:root[data-theme="tgr"] {
    @media (min-width: 768px) {
        --typography-rules-headline1-font-size: 3.6rem;
        --typography-rules-headline1-line-height: 4rem;
        --typography-rules-headline2-font-size: 2.8rem;
        --typography-rules-headline2-line-height: 3.6rem;
        --typography-rules-headline3-font-size: 2.8rem;
        --typography-rules-headline3-line-height: 3.6rem;
        --typography-rules-headline9-font-size: 2.4rem;
        --typography-rules-headline9-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.2rem;
        --typography-rules-disclaimer2-font-size: 1.2rem;
        --typography-rules-ribbons1-font-size: 1.4rem;
        --typography-rules-ribbons1-line-height: 2rem;
    }
}