:root {
  --klevu-color-neutral-1: #ffffff;
  --klevu-color-neutral-2: #f6f6f6;
  --klevu-color-neutral-3: #ededed;
  --klevu-color-neutral-4: #e3e3e3;
  --klevu-color-neutral-5: #d6d6d6;
  --klevu-color-neutral-6: #919191;
  --klevu-color-neutral-7: #757575;
  --klevu-color-neutral-8: #191919;

  --klevu-color-accent-1: #8eedd3;
  --klevu-color-accent-2: #ffcb9f;
  --klevu-color-accent-3: #ffb8d6;
  --klevu-color-accent-4: #c3d7ff;

  /** spacing */
  --klevu-spacing-01: 1px;
  --klevu-spacing-02: 4px;
  --klevu-spacing-03: 8px;
  --klevu-spacing-04: 12px;
  --klevu-spacing-05: 16px;
  --klevu-spacing-06: 24px;
  --klevu-spacing-07: 32px;
  --klevu-spacing-08: 40px;
  --klevu-spacing-09: 48px;
  --klevu-spacing-10: 64px;

  /** sizes */
  --klevu-size-s: 16px;
  --klevu-size-m: 20px;
  --klevu-size-l: 24px;
  --klevu-size-xl: 36px;

  /** opacity */
  --klevu-opacity-disabled: 0.35;
  --klevu-opacity-subtle: 0.25;

  /** headings */
  --klevu-h1-size: 24px;
  --klevu-h1-line-height: calc(28em / 24);
  --klevu-h1-weight: 700;

  --klevu-h2-size: 20px;
  --klevu-h2-line-height: calc(24em / 20);
  --klevu-h2-weight: 700;

  --klevu-h3-size: 16px;
  --klevu-h3-line-height: calc(20em / 16);
  --klevu-h3-weight: 700;

  --klevu-h4-size: 14px;
  --klevu-h4-line-height: calc(18em / 14);
  --klevu-h4-weight: 700;

  /** body text */
  --klevu-body-l-size: 20px;
  --klevu-body-l-line-height: calc(28em / 20);

  --klevu-body-m-size: 16px;
  --klevu-body-m-line-height: calc(24em / 16);

  --klevu-body-s-size: 14px;
  --klevu-body-s-line-height: calc(20em / 14);

  --klevu-body-xs-size: 12px;
  --klevu-body-xs-line-height: calc(16em / 12);

  /** border radiuses */
  --klevu-border-radius-xs: 2px;
  --klevu-border-radius-s: 4px;
  --klevu-border-radius-m: 8px;
  --klevu-border-radius-l: 12px;
  --klevu-border-radius-xl: 16px;
  --klevu-border-radius-xxl: 24px;

  /** Elevations, set as box shadow */
  --klevu-elevation-2: 0px 0.5px 3px rgba(0, 0, 0, 0.05), 2px 6px 12px rgba(0, 0, 0, 0.08);
  --klevu-elevation-3: 0px 2px 3px rgba(0, 0, 0, 0.04), 6px 10px 24px rgba(0, 0, 0, 0.08);

  /* animation css variables */
  --klevu-animation-duration-slow: 0.3s;
  --klevu-animation-duration-normal: 0.2s;
  --klevu-animation-duration-fast: 0.1s;
  --klevu-animation-timing-function: ease-in-out;

  /** component specific variables */
  --klevu-product-image-aspect-ratio: 1.3 / 1;
  /*
  --klevu-product-width: 300px;
  --klevu-product-small-width: 200px;
  */
  --klevu-product-image-fill: cover; /* cover, contain */

  --klevu-color-primary: #d8edfd;
  --klevu-color-primary-rgb: 216, 237, 253;
  --klevu-color-primary-darker: #b6ccdc;

  --klevu-chat-bubble-background: #d8edfd;
  --klevu-chat-bubble-text-color: #000;

  --klevu-chat-bubble-background-remote: var(--klevu-color-neutral-2);
  --klevu-chat-bubble-text-color-remote: #000;

  --klevu-color-positive: #1db046;
  --klevu-color-negative: #b86315;

  --klevu-elevation-1: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

klevu-product-query-popup::part(product-query-footer) {
  --klevu-color-primary: #d8edfd;
  --klevu-color-primary-rgb: 216, 237, 253;
  --klevu-color-primary-darker: #b6ccdc;
  --klevu-button-text-color: #000;
}

klevu-product-query {
  --klevu-color-primary: #428bca;
  --klevu-color-primary-darker: #407db3;
}