:root {
  /*************************/
  /****** BASE COLORS ******/
  /*************************/

  --color-white: rgba(255, 255, 255, 1);

  /* Primary */
  --color-primary-50: rgba(251, 229, 237, 1);
  --color-primary-100: rgba(249, 209, 224, 1);
  --color-primary-150: rgba(243, 178, 203, 1);
  --color-primary-180: rgba(237, 71, 74, 1);
  --color-primary-300: rgba(136, 0, 7, 1);
  --color-primary-400: rgba(136, 0, 7, 1);
  --color-primary-600: rgba(84, 11, 15, 1);

  /* Identity */
  --color-identity-200: rgba(227, 6, 19, 1);

  /* Tone A */
  --color-tone-a-50: rgba(208, 222, 238, 1);
  --color-tone-a-100: rgba(172, 209, 251, 1);
  --color-tone-a-300: rgba(60, 69, 223, 1);
  --color-tone-a-400: rgba(17, 22, 120, 1);
  --color-tone-a-500: rgba(29, 29, 61, 1);

  /* Tone B */
  --color-tone-b-100: rgba(251, 237, 200, 1);
  --color-tone-b-200: rgba(247, 205, 73, 1);
  --color-tone-b-300: rgba(253, 124, 1, 1);

  /* Tone C */
  --color-tone-c-100: rgba(214, 254, 94, 0.8);
  --color-tone-c-200: rgba(173, 255, 0, 0.8);

  /* Tone D */
  --color-tone-d-100: rgba(238, 80, 116, 1);
  --color-tone-d-200: rgba(162, 46, 171, 1);
  --color-tone-d-250: rgba(84, 0, 74, 1);
  --color-tone-d-300: rgba(100, 108, 102, 1);
  --color-tone-d-400: rgba(173, 255, 0, 0.8);

  /* Offer */
  --color-offer-300: rgba(249, 220, 92, 1);

  /* Gray */
  --color-gray-12: rgba(23, 25, 26, 0.12);
  --color-gray-30: rgba(243, 243, 243, 1);
  --color-gray-50: rgba(230, 230, 230, 1);
  --color-gray-100: rgba(213, 213, 213, 1);
  --color-gray-150: rgba(225, 226, 229, 1);
  --color-gray-200: rgba(184, 185, 193, 1);
  --color-gray-250: rgba(115, 115, 115, 1);
  --color-gray-300: rgba(96, 96, 96, 1);
  --color-gray-400: rgba(67, 67, 67, 1);

  /*************************/
  /***** SYSTEM COLORS *****/
  /*************************/

  /* System - Error */
  --color-system-error: rgba(230, 39, 17, 1);
  --color-system-error-primary: rgba(111, 25, 30, 1);
  --color-system-error-secondary: rgba(243, 198, 201, 1);

  /* System - Warning */
  --color-system-warning: rgba(255, 168, 0, 1);
  --color-system-warning-primary: rgba(98, 56, 18, 1);
  --color-system-warning-secondary: rgba(250, 222, 196, 1);

  /* System - Success */
  --color-system-success: rgba(54, 225, 26, 1);
  --color-system-success-primary: rgba(6, 61, 38, 1);
  --color-system-success-secondary: rgba(187, 231, 199, 1);

  /* System - Information */
  --color-system-information-primary: rgba(70, 70, 89, 1);
  --color-system-information-secondary: rgba(207, 210, 217, 1);

  /*************************/
  /*** TYPOGRAPHY COLORS ***/
  /*************************/

  --color-primary-dark-text: rgba(5, 6, 6, 1);
  --color-secondary-dark-text: rgba(5, 6, 6, 0.6);
  --color-primary-light-text: rgba(255, 255, 255, 0.3);
  --color-secondary-light-text: rgba(246, 248, 242, 0.6);

  /*************************/
  /*** BACKGROUND COLORS ***/
  /*************************/

  --background-primary-bg: var(--color-gray-30);
  --background-secondary-bg: var(--color-white);
  --background-secondary-text: var(--color-primary-dark-text);

  /*************************/
  /****** BADGE COLORS *****/
  /*************************/

  --badge-primary-bg: var(--color-identity-200);
  --badge-primary-text: var(--color-white);

  --badge-secondary-bg: var(--color-tone-a-100);
  --badge-secondary-text: var(--color-primary-dark-text);

  --badge-contrast-dark-bg: var(--color-primary-dark-text);
  --badge-contrast-dark-text: var(--color-primary-light-text);

  --badge-contrast-light-bg: var(--color-primary-light-text);
  --badge-contrast-light-text: var(--color-primary-dark-text);

  --badge-offer-bg: var(--color-offer-300);
  --badge-offer-text: var(--color-primary-dark-text);

  --badge-success-bg: var(--color-system-success-secondary);
  --badge-success-text: var(--color-system-success-primary);

  --badge-warning-bg: var(--color-system-warning-secondary);
  --badge-warning-text: var(--color-system-warning-primary);

  --badge-error-bg: var(--color-system-error-secondary);
  --badge-error-text: var(--color-system-error-primary);

  --badge-information-bg: var(--color-system-information-secondary);
  --badge-information-text: var(--color-system-information-primary);

  /*************************/
  /**** SNACKBAR COLORS ****/
  /*************************/

  --snackbar-error-bg: var(--color-system-error-primary);
  --snackbar-information-bg: var(--color-system-information-primary);
  --snackbar-success-bg: var(--color-system-success-primary);

  /*************************/
  /**** Avatar COLORS ****/
  /*************************/

  --avatar-bg: var(--color-primary-dark-text);
  --avatar-text: var(--color-white);

  /*************************/
  /***** TOGGLE COLORS *****/
  /*************************/

  --toggle-thumb-off-bg: var(--color-primary-dark-text);
  --toggle-thumb-on-bg: var(--color-white);
  --toggle-thumb-disabled-bg: var(--color-gray-250);
  --toggle-bar-bg: var(--color-gray-200);

  /**************************/
  /*** Progressbar COLORS ***/
  /**************************/

  /* Progressbar */
  --progressbar-bg: var(--color-gray-12);

  /*************************/
  /***** BUTTONS COLORS ****/
  /*************************/

  /* Primary */
  --button-primary-bg: var(--color-primary-dark-text);
  --button-primary-text: var(--color-primary-100);
  --button-primary-hover-bg: rgba(64, 36, 35, 1);
  --button-primary-pressed-bg: rgba(86, 48, 48, 1);

  /* Secondary */
  --button-secondary-bg: var(--color-primary-150);
  --button-secondary-text: var(--color-primary-dark-text);
  --button-secondary-hover-bg: rgba(219, 160, 183, 1);
  --button-secondary-pressed-bg: rgba(194, 142, 162, 1);

  /* Tertiary */
  --button-tertiary-bg: var(--color-primary-light-text);
  --button-tertiary-text: var(--color-primary-dark-text);
  --button-tertiary-hover-bg: rgba(242, 236, 236, 1);
  --button-tertiary-hover-text: var(--color-primary-dark-text);
  --button-tertiary-pressed-bg: rgba(233, 223, 224, 1);
  --button-tertiary-stroke: var(--color-primary-150);
  --button-tertiary-hover-stroke: var(--color-primary-150);

  /* Disabled */
  --button-disabled-bg: var(--color-gray-50);
  --button-disabled-text: var(--color-primary-dark-text);

  /* Download and Add Subscription */
  --button-download-bg: var(--color-gray-50);
  --button-download-text: var(--color-primary-dark-text);
  --button-download-hover-bg: var(--color-primary-100);
  --button-download-pressed-bg: var(--color-primary-150);
  --button-download-stroke: var(--color-secondary-dark-text);
  --button-download-icon-hover-bg: var(--color-primary-150);

  /*************************/
  /***** TABS COLORS ****/
  /*************************/

  --button-tab-bg: var(--color-primary-100);
  --button-tab-text: var(--color-primary-dark-text);
  --button-tab-active-bg: var(--color-primary-dark-text);
  --button-tab-active-text: var(--color-primary-100);

  /*************************/
  /********** FONT *********/
  /*************************/

  --font-type: "Montserrat";

  /*************************/
  /** CHANGE SUBSCRIPTION **/
  /*************************/

  --selected-element-bg: var(--color-primary-150);
  --hoverable-element-bg: var(--color-primary-50);

  /*************************/
  /****** BANNER CARD ******/
  /*************************/

  --color-banner-bg-dark: var(--color-identity-200);
  --color-banner-bg-light: var(--color-primary-150);

  --color-banner-text-dark: rgba(0, 0, 0, 1);
  --color-banner-text-light: var(--color-white);
  --color-banner-text-accent: var(--color-identity-200);

  /**************************/
  /****** PRODUCT CARD ******/
  /**************************/

  --color-product-card-bg-from: var(--color-primary-400);
  --color-product-card-bg-to: var(--color-identity-200);

  --color-product-card-text: var(--color-white);

  --color-product-card-footer-bg: rgba(0, 0, 0, 0);
  --color-product-card-footer-text: var(--color-white);
}

@font-face {
  font-family: Montserrat;
  src: url("/hallo/fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: Montserrat;
  src: url("/hallo/fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: Montserrat;
  src: url("/hallo/fonts/Montserrat-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}