[data-theme='nivea'] [data-color-scheme='light'],
  body[data-brand='nivea'] #cmpbox {
    --color-background-primary: #ffffff;
    --color-background-quaternary: #0032a0;
    --color-background-secondary: #ebf1fd;
    --color-background-tertiary: #3159b1;
    --color-background-transparent-primary-0: #ffffff00;
    --color-background-transparent-primary-20: #ffffff33;
    --color-background-transparent-primary-40: #ffffff66;
    --color-background-transparent-primary-80: #ffffffcc;
    --color-background-transparent-secondary-0: #0032a000;
    --color-background-transparent-secondary-20: #0032a033;
    --color-background-transparent-secondary-40: #0032a066;
    --color-background-transparent-secondary-80: #0032a0cc;
    --color-background-transparent-tertiary-0: #0f60ff00;
    --color-background-transparent-tertiary-20: #0f60ff33;
    --color-background-transparent-tertiary-40: #0f60ff66;
    --color-background-transparent-tertiary-80: #0f60ffcc;
    --color-fill-primary: #ffffff;
    --color-fill-quaternary: #0032a0;
    --color-fill-quinary: #f5f5f5;
    --color-fill-secondary: #ebf1fd;
    --color-fill-tertiary: #3159b1;
    --color-fill-action-primary-default: #0f50ff;
    --color-fill-action-primary-disabled: #ebebeb;
    --color-fill-action-primary-focus: #0f50ff;
    --color-fill-action-primary-hover: #e7efff;
    --color-fill-action-primary-pressed: #92b7ff;
    --color-fill-action-secondary-default: #ffffff00;
    --color-fill-action-secondary-disabled: #ffffff00;
    --color-fill-action-secondary-focus: #ffffff00;
    --color-fill-action-secondary-hover: #f3f7ff;
    --color-fill-action-secondary-pressed: #ffffff00;
    --color-fill-action-tertiary-default: var(
      --color-background-transparent-primary-40
    );
    --color-fill-action-tertiary-disabled: var(
      --color-background-transparent-primary-40
    );
    --color-fill-action-tertiary-focus: var(
      --color-background-transparent-primary-40
    );
    --color-fill-action-tertiary-hover: var(
      --color-background-transparent-primary-80
    );
    --color-fill-action-tertiary-pressed: var(
      --color-background-transparent-primary-40
    );
    --color-functional-category-highlight: #ff009a;
    --color-functional-category-rating-star-empty: #c2c2c2;
    --color-functional-category-rating-star-filled: #fe9119;
    --color-functional-category-sustainability: #64a70b;
    --color-functional-traffic-dark-success: #417505;
    --color-functional-traffic-error: #e21010;
    --color-functional-traffic-error-light: #fff5f5;
    --color-functional-traffic-light-success: #b8e986;
    --color-functional-traffic-light-warning: #ffd7b2;
    --color-functional-traffic-success: #00a006;
    --color-functional-traffic-warning: #ff7a00;
    --color-stroke-primary: #ffffff;
    --color-stroke-quaternary: #96b4e1;
    --color-stroke-secondary: #0032a033;
    --color-stroke-tertiary: #0032a0;
    --color-stroke-action-primary-default: #0f50ff;
    --color-stroke-action-primary-disabled: #ebebeb;
    --color-stroke-action-primary-focus: #f3f7ff;
    --color-stroke-action-primary-hover: #92b7ff;
    --color-stroke-action-primary-pressed: #92b7ff;
    --color-stroke-action-secondary-default: #0f50ff;
    --color-stroke-action-secondary-disabled: #ebebeb;
    --color-stroke-action-secondary-focus: #0f50ff;
    --color-stroke-action-secondary-hover: #92b7ff;
    --color-stroke-action-secondary-pressed: #92b7ff;
    --color-text-primary: #0032a0;
    --color-text-quaternary: #959595;
    --color-text-quinary: #c2c2c2;
    --color-text-secondary: #ffffff;
    --color-text-tertiary: #6a6a6a;
    --color-text-action-primary-default: #ffffff;
    --color-text-action-primary-disabled: #6a6a6a;
    --color-text-action-primary-focus: #ffffff;
    --color-text-action-primary-hover: #0f50ff;
    --color-text-action-primary-pressed: #e7efff;
    --color-text-action-secondary-default: #0f50ff;
    --color-text-action-secondary-disabled: #c2c2c2;
    --color-text-action-secondary-focus: #0f50ff;
    --color-text-action-secondary-hover: #0f50ff;
    --color-text-action-secondary-pressed: #92b7ff;

    --color-focus-state: #0f60ff;

    --swiper-pagination-bullet-inactive-color: var(
      --color-background-transparent-secondary-20
    );
    --swiper-pagination-color: var(--color-stroke-action-primary-default);
    --swiper-pagination-bullet-background: rgba(255, 255, 255, 0.3);
    --swiper-pagination-bullet-active-background: rgba(255, 255, 255, 0.5);
  }

  [data-theme='nivea'] [data-color-scheme='dark'] {
    --color-background-primary: #0032a0;
    --color-background-quaternary: #ffffff;
    --color-background-secondary: #3159b1;
    --color-background-tertiary: #ebf1fd;
    --color-background-transparent-primary-0: #0f60ff00;
    --color-background-transparent-primary-20: #0f60ff33;
    --color-background-transparent-primary-40: #0f60ff66;
    --color-background-transparent-primary-80: #0f60ffcc;
    --color-background-transparent-secondary-0: #ffffff00;
    --color-background-transparent-secondary-20: #ffffff33;
    --color-background-transparent-secondary-40: #ffffff66;
    --color-background-transparent-secondary-80: #ffffffcc;
    --color-background-transparent-tertiary-0: #ffffff00;
    --color-background-transparent-tertiary-20: #ffffff33;
    --color-background-transparent-tertiary-40: #ffffff33;
    --color-background-transparent-tertiary-80: #ffffff66;
    --color-fill-primary: #0032a0;
    --color-fill-quaternary: #ffffff;
    --color-fill-quinary: #7a818e;
    --color-fill-secondary: #3159b1;
    --color-fill-tertiary: #ebf1fd;
    --color-fill-action-primary-default: #f3f7ff;
    --color-fill-action-primary-disabled: #0032a0cc;
    --color-fill-action-primary-focus: #f3f7ff;
    --color-fill-action-primary-hover: #92b7ff;
    --color-fill-action-primary-pressed: #92b7ff;
    --color-fill-action-secondary-default: #ffffff00;
    --color-fill-action-secondary-disabled: #ffffff00;
    --color-fill-action-secondary-focus: #ffffff00;
    --color-fill-action-secondary-hover: #f3f7ff;
    --color-fill-action-secondary-pressed: #ffffff00;
    --color-fill-action-tertiary-default: #ffffff66;
    --color-fill-action-tertiary-disabled: #ffffff33;
    --color-fill-action-tertiary-focus: #ffffff66;
    --color-fill-action-tertiary-hover: #0f60ff66;
    --color-fill-action-tertiary-pressed: #ffffff66;
    --color-functional-category-highlight: #ff009a;
    --color-functional-category-rating-star-empty: #c2c2c2;
    --color-functional-category-rating-star-filled: #fe9119;
    --color-functional-category-sustainability: #64a70b;
    --color-functional-traffic-dark-success: #b8e986;
    --color-functional-traffic-error: #fff5f5;
    --color-functional-traffic-error-light: #e21010;
    --color-functional-traffic-light-success: #417505;
    --color-functional-traffic-light-warning: #ff7a00;
    --color-functional-traffic-success: #00a006;
    --color-functional-traffic-warning: #ffd7b2;
    --color-stroke-primary: #0032a0;
    --color-stroke-quaternary: #96b4e1;
    --color-stroke-secondary: #ffffff33;
    --color-stroke-tertiary: #ffffff;
    --color-stroke-action-primary-default: #f3f7ff;
    --color-stroke-action-primary-disabled: #6a6a6a;
    --color-stroke-action-primary-focus: #0f50ff;
    --color-stroke-action-primary-hover: #0f50ff;
    --color-stroke-action-primary-pressed: #f3f7ff;
    --color-stroke-action-secondary-default: #f3f7ff;
    --color-stroke-action-secondary-disabled: #c2c2c2;
    --color-stroke-action-secondary-focus: #f3f7ff;
    --color-stroke-action-secondary-hover: #ffffff;
    --color-stroke-action-secondary-pressed: #f3f7ff;
    --color-text-primary: #ffffff;
    --color-text-quaternary: #ffffff99;
    --color-text-quinary: #c2c2c2;
    --color-text-secondary: #0032a0;
    --color-text-tertiary: #ebebeb;
    --color-text-action-primary-default: #0f50ff;
    --color-text-action-primary-disabled: #ebebeb;
    --color-text-action-primary-focus: #0f50ff;
    --color-text-action-primary-hover: #0f50ff;
    --color-text-action-primary-pressed: #e7efff;
    --color-text-action-secondary-default: #ffffff;
    --color-text-action-secondary-disabled: #6a6a6a;
    --color-text-action-secondary-focus: #ffffff;
    --color-text-action-secondary-hover: #0f50ff;
    --color-text-action-secondary-pressed: #e7efff;

    --color-focus-state: #c3d7ff;

    --swiper-pagination-bullet-inactive-color: var(--color-stroke-secondary);
    --swiper-pagination-color: var(--color-stroke-secondary);
    --swiper-pagination-bullet-background: var(
      --color-background-transparent-secondary-20
    );
    --swiper-pagination-bullet-active-background: var(
      --color-stroke-action-primary-default
    );
  }

  [data-theme='nivea'] {
    --swiper-pagination-bullet-width: 8px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-border-radius: calc(var(--radius) * 7);
    --swiper-pagination-bullet-inactive-opacity: 0.3;
    --swiper-pagination-bullet-horizontal-gap: calc(var(--spacing) * 0.25);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-top: calc(
      var(--stage-height, 75vh) - calc(var(--spacing) * 3)
    );

    --color-white-transparent-0: #ffffff00;
    --color-white-transparent-40: #ffffff66;
    --color-blue-transparent-0: #0032a000;
    --color-blue-transparent-15: #0032a026;
    --color-blue-transparent-20: #0032a033;
    --color-grey-transparent-60: #ebebeb99;

    --color-overlay-gradient-trans-white: linear-gradient(
      to bottom,
      var(--color-white-transparent-0) 0%,
      var(--color-white-transparent-40) 100%
    );
    --color-overlay-gradient-white-trans: linear-gradient(
      to bottom,
      var(--color-white-transparent-40) 0%,
      var(--color-white-transparent-0) 95%
    );
    --color-overlay-gradient-trans-blue-m: linear-gradient(
      to bottom,
      var(--color-blue-transparent-0) 0%,
      var(--color-blue-transparent-15) 50%
    );
    --color-overlay-gradient-trans-blue-s: linear-gradient(
      to bottom,
      var(--color-blue-transparent-0) 0%,
      var(--color-blue-transparent-20) 100%
    );
    --color-overlay-gradient-transwhitetrans-background: linear-gradient(
      to bottom,
      var(--color-white-transparent-0) 0%,
      var(--color-white-transparent-40) 50%,
      var(--color-white-transparent-0) 100%
    );
    --color-overlay-gradient-grey-trans: linear-gradient(
      to bottom,
      var(--color-grey-transparent-60) 0%,
      var(--color-white-transparent-0) 98%
    );
    --color-overlay-gradient-trans-primary-s: linear-gradient(
      to bottom,
      var(--color-background-transparent-primary-0) 0%,
      var(--color-background-transparent-primary-20) 100%
    );
  }