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

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

  /* Primary */
  --color-primary-50: rgba(249, 228, 228, 1);
  --color-primary-100: rgba(243, 190, 190, 1);
  --color-primary-150: rgba(231, 135, 135, 1);
  --color-primary-180: rgba(210, 65, 65, 1);
  --color-primary-300: rgba(168, 52, 52, 1);
  --color-primary-400: rgba(138, 36, 36, 1);
  --color-primary-600: rgba(84, 17, 17, 1);

  /* Identity */
  --color-identity-200: rgba(210, 65, 65, 1);

  /* Tone A */
  --color-tone-a-50: rgba(244, 244, 244, 1);
  --color-tone-a-100: rgba(230, 230, 230, 1);
  --color-tone-a-300: rgba(75, 75, 75, 1);
  --color-tone-a-400: rgba(52, 52, 52, 1);
  --color-tone-a-500: rgba(29, 29, 29, 1);

  /* Tone B */
  --color-tone-b-100: rgba(250, 250, 250, 1);
  --color-tone-b-200: rgba(220, 220, 220, 1);
  --color-tone-b-300: rgba(190, 190, 190, 1);

  /* Tone C */
  --color-tone-c-100: rgba(244, 244, 244, 1);
  --color-tone-c-200: rgba(230, 230, 230, 1);

  /* Tone D */
  --color-tone-d-100: rgba(72, 67, 95, 1);
  --color-tone-d-200: rgba(37, 35, 35, 1);
  --color-tone-d-250: rgba(29, 29, 31, 1);
  --color-tone-d-300: rgba(96, 96, 96, 1);
  --color-tone-d-400: rgba(210, 210, 210, 1);

  /* Offer */
  --color-offer-300: rgba(252, 219, 40, 1);

  /* Gray */
  --color-gray-12: rgba(0, 0, 0, 0.12);
  --color-gray-30: rgba(244, 244, 244, 1);
  --color-gray-50: rgba(230, 230, 230, 1);
  --color-gray-100: rgba(213, 213, 213, 1);
  --color-gray-150: rgba(200, 200, 200, 1);
  --color-gray-200: rgba(172, 172, 172, 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(210, 65, 65, 1);
  --color-system-error-primary: rgba(168, 52, 52, 1);
  --color-system-error-secondary: rgba(243, 190, 190, 1);

  /* System - Warning */
  --color-system-warning: rgba(236, 153, 50, 1);
  --color-system-warning-primary: rgba(140, 84, 0, 1);
  --color-system-warning-secondary: rgba(250, 222, 196, 1);

  /* System - Success */
  --color-system-success: #4c9f71;
  --color-system-success-primary: rgba(38, 95, 67, 1);
  --color-system-success-secondary: rgba(182, 236, 207, 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(0, 0, 0, 1);
  --color-secondary-dark-text: rgba(0, 0, 0, 0.6);
  --color-primary-light-text: rgba(255, 255, 255, 1);
  --color-secondary-light-text: rgba(255, 255, 255, 0.7);

  /*************************/
  /*** 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-bg: var(--color-gray-12);

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

  /* Primary */
  --button-primary-bg: var(--color-primary-180);
  --button-primary-text: var(--color-white);
  --button-primary-hover-bg: var(--color-primary-300);
  --button-primary-pressed-bg: var(--color-primary-400);

  /* Secondary */
  --button-secondary-bg: var(--color-primary-dark-text);
  --button-secondary-text: var(--color-white);
  --button-secondary-hover-bg: var(--color-primary-180);
  --button-secondary-pressed-bg: var(--color-primary-300);

  /* Tertiary */
  --button-tertiary-bg: var(--color-primary-light-text);
  --button-tertiary-text: var(--color-primary-dark-text);
  --button-tertiary-hover-bg: var(--color-primary-180);
  --button-tertiary-hover-text: var(--color-white);
  --button-tertiary-pressed-bg: var(--color-primary-300);
  --button-tertiary-stroke: var(--color-gray-250);
  --button-tertiary-hover-stroke: var(--color-primary-180);

  /* 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-white);
  --button-download-text: var(--color-primary-dark-text);
  --button-download-hover-bg: var(--color-gray-50);
  --button-download-pressed-bg: var(--color-gray-100);
  --button-download-stroke: var(--color-secondary-dark-text);
  --button-download-icon-hover-bg: var(--color-white);

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

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

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

  --font-type: "Roboto", "Arial", "sans-serif";

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

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

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

  --color-banner-identity-dark: rgba(190, 49, 59, 1);

  --color-banner-bg-dark: var(--color-banner-identity-dark);
  --color-banner-bg-light: var(--color-white);

  --color-banner-text-dark: var(--color-primary-dark-text);
  --color-banner-text-light: var(--color-white);
  --color-banner-text-accent: var(--color-banner-identity-dark);

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

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

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

  --color-product-card-footer-bg: var(--color-white);
  --color-product-card-footer-text: var(--color-primary-dark-text);
}