// Text

:root {
  --ct-text-primary: var(--color-black-opacity-88);
  --ct-text-secondary: var(--color-black-opacity-64);
  --ct-text-disabled: var(--color-black-opacity-40);
  --ct-text-inverse-primary: var(--color-white-opacity-88);
  --ct-text—inverse-secondary: var(--color-white-opacity-64); // only on wehkamp
  --ct-text-inverse-disabled: var(--color-white-opacity-40); // only on wehkamp
  --ct-text-sale: var(--color-red);
  --ct-text-outlet: var(--color-black-opacity-88);

  // Button
  --ct-button-primary: var(--color-accent);
  --ct-button-primary-hover: var(--color-accent-64);
  --ct-button-primary-text: var(--color-white-opacity-88);
  --ct-button-primary-disabled: var(--color-accent-40);

  --ct-button-secondary: var(--color-grey);
  --ct-button-secondary-hover: var(--color-grey-64);
  --ct-button-secondary-text: var(--color-white-opacity-88);
  --ct-button-secondary-disabled: var(--color-grey-40);

  --ct-button-outline: var(--color-black-opacity-88);
  --ct-button-outline-hover: var(--color-black-opacity-64);
  --ct-button-outline-text: var(--color-black-opacity-88);
  --ct-button-outline-disabled: var(--color-black-opacity-40);

  --ct-button-inverted: var(--color-white-opacity-88);
  --ct-button-inverted-hover: var(--color-white-opacity-64);
  --ct-button-inverted-text: var(--color-white-opacity-88);
  --ct-button-inverted-disabled: var(--color-white-opacity-40);

  // Focus
  --ct-focus-border: var(--color-grey-11);

  // Selection
  --ct-selection-range: var(--color-grey);
  --ct-selection-highlight: var(--color-grey);
  --ct-selection-disabled: var(--color-grey-11);
  --ct-selection-background: var(--color-white);

  // Borders
  --ct-border-light: var(--color-grey-6);
  --ct-border: var(--color-grey-11);
  --ct-border-dark: var(--color-grey-40);

  // Discount
  --ct-price-discount: var(--color-red);
  --ct-price-default: var(--color-grey-64);

  // Labels
  --ct-label-discount-background: var(--color-red);
  --ct-label-discount-text: var(--color-white);

  --ct-label-general-background: var(--color-grey-6);
  --ct-label-general-text: var(--color-black-opacity-88);

  --ct-label-soldout-background: var(--color-grey);
  --ct-label-soldout-text: var(--color-grey-6);

  --ct-label-setdiscount-background: var(--color-yellow);
  --ct-label-setdiscount-text: var(--color-grey);

  --ct-label-sustainable-background: var(--color-green-6);
  --ct-label-sustainable-text: var(--color-green);

  --ct-label-extradiscount-background: var(--color-red-6);
  --ct-label-extradiscount-text: var(--color-red);

  // Stickers
  --ct-sticker-primary-background: var(--color-grey-6);
  --ct-sticker-primary-text: var(--color-black-opacity-88);

  --ct-sticker-secondary-background: var(--color-accent);
  --ct-sticker-secondary-text: var(--color-black-opacity-88);

  --ct-sticker-tertiary-background: var(--color-black);
  --ct-sticker-tertiary-text: var(--color-white-opacity-88);

  // Notifications
  --ct-notification-message-background: var(--color-grey-6);
  --ct-notification-message-text: var(--color-black-opacity-88);

  --ct-notification-info-background: var(--color-yellow-40);
  --ct-notification-info-text: var(--color-black-opacity-88);

  --ct-notification-error-background: var(--color-red-6);
  --ct-notification-error-text: var(--color-red);

  --ct-notification-snackbar-background: var(--color-grey);
  --ct-notification-snackbar-text: var(--color-white-opacity-88);

  --ct-notification-popover-background: var(--color-grey);
  --ct-notification-popover-text: var(--color-grey-40);
}