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

    /* palette */
    --mnn-azure-blue: #548fcb;
    --mnn-dune-yellow: #e6c379;
    --mnn-olive-green: #5e6420;
    --mnn-olive-green-light: #f7f7f4;
    --mnn-verdigris-green: #7cc18d;
    --mnn-forest-green: #09391e;
    --mnn-coral-pink: #ef7d60;
    --mnn-morning-sky: #d1d8e9;
    --mnn-dusk-pink: #d4b9be;
    --mnn-oyster-cream: #f4eee9;
    --mnn-green: #2b8b68;
    --mnn-red: #bc0000;
    --mnn-grey: #ebebeb;
    --mnn-light-grey: #f8f8f8;
    --mnn-dark-grey: #808080;

    /* colors */
    --colors-text: light-dark(var(--black), var(--white));
    --colors-text-secondary: var(--mnn-dark-grey);
    --colors-text-disabled: var(--mnn-light-grey);
    --colors-surface-primary: light-dark(var(--mnn-olive-green-light), hsl(from var(--colors-background) h s calc(l + 10)));
    --colors-surface-secondary: light-dark(var(--mnn-oyster-cream), hsl(from var(--colors-background) h s calc(l + 20)));
    --colors-surface-disabled: light-dark(var(--mnn-dark-grey), hsl(from var(--colors-background) h s calc(l + 30)));
    --colors-error: var(--mnn-red);
    --colors-warning: var(--mnn-coral-pink);
    --colors-success: var(--mnn-green);
    --colors-info: var(--mnn-azure-blue);
    --colors-brand-default-primary: var(--black);
    --colors-brand-default-secondary: var(--white);

    /* border */
    --border-width: 1px;
    --border-color: var(--mnn-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(--colors-text-secondary);
    --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(--mnn-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(--mnn-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;

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

    /* buttons */

    --buttons-primary-background: var(--colors-text);
    --buttons-primary-text: var(--colors-background);
    --buttons-primary-border-color: var(--colors-text);
    --buttons-primary-border-radius: var(--radius-sm);
    --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.4rem;
    --buttons-primary-line-height: 2rem;
    --buttons-primary-letter-spacing: 0.1rem;
    --buttons-primary-text-transform: uppercase;

    --buttons-secondary-background: transparent;
    --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: 5rem;
    --buttons-secondary-font-family: var(--font-family-main-bold);
    --buttons-secondary-font-size: 1.4rem;
    --buttons-secondary-line-height: 2rem;
    --buttons-secondary-letter-spacing: 0.1rem;
    --buttons-secondary-text-transform: uppercase;

    --buttons-a2c-background: var(--mnn-dune-yellow);
    --buttons-a2c-text: var(--black);
    --buttons-a2c-border-color: transparent;
    --buttons-a2c-border-radius: var(--radius-sm);
    --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.4rem;
    --buttons-a2c-line-height: 2rem;
    --buttons-a2c-letter-spacing: 0.1rem;
    --buttons-a2c-text-transform: uppercase;

    --buttons-preview-background: var(--colors-surface-primary);
    --buttons-preview-text: var(--colors-text);
    --buttons-preview-border-color: var(--colors-text);
    --buttons-preview-border-radius: var(--radius-sm);
    --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.4rem;
    --buttons-preview-line-height: 2rem;
    --buttons-preview-letter-spacing: 0.1rem;
    --buttons-preview-text-transform: uppercase;

    --buttons-disabled-background: var(--mnn-light-grey);
    --buttons-disabled-text: var(--mnn-dark-grey);
    --buttons-disabled-border-color: var(--mnn-light-grey);
    --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-bold);
    --buttons-disabled-font-size: 1.4rem;
    --buttons-disabled-line-height: 2rem;
    --buttons-disabled-letter-spacing: 0.1rem;
    --buttons-disabled-text-transform: uppercase;

    --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-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.4rem;
    --buttons-button-link-line-height: 2rem;
    --buttons-button-link-letter-spacing: 0.1rem;
    --buttons-button-link-text-transform: uppercase;

    --buttons-upsell-primary-background: transparent;
    --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.4rem;
    --buttons-upsell-primary-line-height: 2rem;

    /* button */


    --button-sizes-normal-radius: var(--radius-sm);
    --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.4rem;
    --button-sizes-normal-line-height: 2rem;
    --button-sizes-normal-letter-spacing: 0.1rem;
    --button-sizes-normal-text-transform: uppercase;

    --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(--mnn-olive-green-light);
    --button-colors-secondary-text: var(--black);
    --button-colors-secondary-border-color: var(--black);

    --button-colors-cta-background: var(--mnn-dune-yellow);
    --button-colors-cta-text: var(--black);
    --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-main-regular);
    --typography-rules-headline1-font-size: 3.2rem;
    --typography-rules-headline1-line-height: 3.2rem;

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

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

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

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

    --typography-rules-headline6-font-family: var(--font-family-main-bold);
    --typography-rules-headline6-font-size: 1.3rem;
    --typography-rules-headline6-line-height: 1.8rem;
    --typography-rules-headline6-letter-spacing: 0.1rem;
    --typography-rules-headline6-text-transform: uppercase;

    --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.4rem;
    --typography-rules-headline8-line-height: 2rem;
    --typography-rules-headline8-letter-spacing: 0.1rem;
    --typography-rules-headline8-text-transform: uppercase;

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

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

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

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

    --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-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.8rem;
    --typography-rules-text3-letter-spacing: 0;

    --typography-rules-text4-font-family: var(--font-family-main-bold);
    --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.3rem;
    --typography-rules-text5-line-height: 1.8rem;

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

    --typography-rules-text7-font-family: var(--font-family-main-light);
    --typography-rules-text7-font-size: 1.4rem;
    --typography-rules-text7-line-height: 2.1rem;

    --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-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.6rem;

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

    --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-size: 1.4rem;
    --typography-rules-paragraph2-line-height: 2rem;

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

    --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-bold);
    --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.4rem;
    --typography-rules-button1-line-height: 2rem;
    --typography-rules-button1-letter-spacing: 0.1rem;
    --typography-rules-button1-text-transform: uppercase;

    --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-ribbons1-font-family: var(--font-family-main-regular);
    --typography-rules-ribbons1-font-size: 1.2rem;
    --typography-rules-ribbons1-line-height: 1.2rem;

    /* ecommerce */
    --free-gift-background: var(--colors-surface-primary);
    --sticky-message-background: var(--colors-text);
    --product-image-background-bland: var(--mnn-olive-green-light);
    --product-image-aspect-ratio: 1 / 1;
    --star: var(--mnn-dune-yellow);
    --star-inactive: var(--mnn-dark-grey);
    --sale-price-color: var(--mnn-red);
    --crossed-price-color: var(--colors-text-secondary);
    --discount-message-color: var(--colors-text);
    --discount-message-background: var(--mnn-olive-green-light);
    --ribbon-background: var(--colors-background);
    --ribbon-text: var(--colors-text);
    --ribbon-border-radius: var(--radius-xxl);
    --bundle-ribbon-background: var(--mnn-forest-green);
    --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;
    --ribbon-oos-background: var(--mnn-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);
    --related-category-background: var(--colors-background);
    --related-category-text: var(--colors-text);
    --related-category-background-hover: var(--colors-text);
    --related-category-text-hover: var(--colors-background);
    --related-category-radius: var(--radius-xxl);
    --related-category-border: var(--colors-text);
    --related-category-border-hover: var(--colors-text);
    --review-summary-background: var(--colors-text-disabled);
    --review-summary-border: var(--mnn-grey);
    --checkout-header-background: var(--colors-surface-primary);
    --checkout-loyalty-text: var(--colors-text);
    --checkout-check-icon-background: var(--colors-success);

    /* layout */
    --layout-announcements-bar-background: var(--colors-surface-secondary);
    --layout-announcements-bar-text: var(--colors-text);
    --layout-homepage-header-scheme: dark;
    --layout-footer-main-background: var(--colors-surface-primary);
    --layout-footer-main-text: var(--colors-text);
    --layout-footer-newsletter-background: var(--colors-surface-secondary);
    --layout-footer-newsletter-text: var(--colors-text);
    --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(--colors-surface-secondary);
    --rewards-border-color: var(--colors-text);
    --rewards-tier-active-color: var(--mnn-azure-blue);
    --rewards-completed-icon: url('/loyaltylion/icons/mnn/completed.svg');

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

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

:root[data-theme="mnn"] {
    @media (min-width: 768px) {
        --typography-rules-headline1-font-size: 5.6rem;
        --typography-rules-headline1-line-height: 5.6rem;
        --typography-rules-headline2-font-size: 2.6rem;
        --typography-rules-headline2-line-height: 3rem;
        --typography-rules-headline3-font-size: 2.6rem;
        --typography-rules-headline3-line-height: 3rem;
        --typography-rules-headline9-font-size: 2rem;
        --typography-rules-headline9-line-height: 2.8rem;
        --typography-rules-headline10-font-size: 1.4rem;
        --typography-rules-headline10-line-height: 2rem;
        --typography-rules-headline11-font-size: 2rem;
        --typography-rules-headline11-line-height: 2.8rem;
        --typography-rules-text5-font-size: 1.4rem;
        --typography-rules-text5-line-height: 2rem;
        --typography-rules-paragraph1-font-size: 1.6rem;
        --typography-rules-paragraph1-line-height: 2.4rem;
        --typography-rules-paragraph2-font-size: 1.6rem;
        --typography-rules-paragraph2-line-height: 2.4rem;
        --typography-rules-disclaimer1-font-size: 1.6rem;
        --typography-rules-disclaimer2-font-size: 1.6rem;
        --typography-rules-ribbons1-font-size: 1.4rem;
        --typography-rules-ribbons1-line-height: 1.4rem;
    }
}