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

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

  /* Primary */
  --color-primary-50: rgba(252, 233, 234, 1);
  --color-primary-100: rgba(245, 177, 180, 1);
  --color-primary-150: rgba(238, 101, 108, 1);
  --color-primary-180: rgba(170, 170, 170, 1);
  --color-primary-300: rgba(212, 23, 32, 1);
  --color-primary-400: rgba(155, 19, 26, 1);
  --color-primary-600: rgba(84, 11, 15, 1);

  /* Identity */
  --color-identity-200: rgba(227, 26, 36, 1);

  /* Tone A */
  --color-tone-a-50: rgba(224, 226, 238, 1);
  --color-tone-a-100: rgba(191, 194, 218, 1);
  --color-tone-a-300: rgba(0, 31, 255, 1);
  --color-tone-a-400: rgba(30, 49, 180, 1);
  --color-tone-a-500: rgba(1, 11, 85, 1);

  /* Tone B */
  --color-tone-b-100: rgba(235, 200, 188, 1);
  --color-tone-b-200: rgba(187, 140, 124, 1);
  --color-tone-b-300: rgba(234, 125, 88, 1);

  /* Tone C */
  --color-tone-c-100: rgba(255, 252, 238, 1);
  --color-tone-c-200: rgba(255, 239, 168, 1);

  /* Tone D */
  --color-tone-d-100: rgba(246, 248, 242, 1);
  --color-tone-d-200: rgba(228, 236, 233, 1);
  --color-tone-d-250: rgba(155, 181, 171, 1);
  --color-tone-d-300: rgba(116, 149, 137, 1);
  --color-tone-d-400: rgba(79, 112, 99, 1);

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

  /* Gray */
  --color-gray-12: rgba(23, 25, 26, 0.12);
  --color-gray-30: rgba(249, 249, 249, 1);
  --color-gray-50: rgba(237, 238, 239, 1);
  --color-gray-100: rgba(217, 219, 226, 1);
  --color-gray-150: rgba(229, 225, 225, 1);
  --color-gray-200: rgba(193, 184, 187, 1);
  --color-gray-250: rgba(186, 186, 186, 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.9);
  --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-tone-a-300);
  --button-primary-text: var(--color-primary-light-text);
  --button-primary-hover-bg: rgba(29, 47, 162, 255);
  --button-primary-pressed-bg: rgba(24, 44, 147, 255);

  /* Secondary */
  --button-secondary-bg: var(--color-primary-dark-text);
  --button-secondary-text: var(--color-primary-light-text);
  --button-secondary-hover-bg: rgba(55, 57, 57, 255);
  --button-secondary-pressed-bg: rgba(30, 30, 30, 255);

  /* 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-dark-text);
  --button-tertiary-hover-stroke: var(--color-primary-dark-text);

  /* 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-primary-light-text);
  --button-download-text: var(--color-primary-dark-text);
  --button-download-hover-bg: rgba(242, 236, 236, 1);
  --button-download-pressed-bg: rgba(233, 223, 224, 1);
  --button-download-stroke: var(--color-primary-dark-text);
  --button-download-icon-hover-bg: var(--color-primary-dark-text);

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

  --button-tab-bg: var(--color-gray-150);
  --button-tab-text: var(--color-primary-dark-text);
  --button-tab-active-bg: var(--color-primary-dark-text);
  --button-tab-active-text: var(--color-primary-light-text);

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

  --font-type: "Open-sans";

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

  --selected-element-bg: rgba(228, 236, 233, 1);
  --hoverable-element-bg: var(--color-primary-100);

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

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

  --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-100);
  --color-product-card-bg-to: var(--color-identity-200);

  --color-product-card-text: var(--color-primary-dark-text);

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

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

@font-face {
  font-family: Open-sans;
  src: url("/unotel/fonts/OpenSans-Semibold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: Open-sans;
  src: url("/unotel/fonts/OpenSans-Bold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}