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

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

  /* Primary */
  --color-primary-50: rgba(255, 251, 234, 1);
  --color-primary-100: rgba(247, 233, 175, 1);
  --color-primary-150: rgba(247, 233, 175, 1);
  --color-primary-180: rgba(250, 216, 91, 0.6);
  --color-primary-300: rgba(245, 202, 69, 1);
  --color-primary-400: rgba(135, 108, 21, 1);
  --color-primary-600: rgba(76, 70, 50, 1);

  /* Identity */
  --color-identity-200: rgba(250, 216, 91, 1);

  /* Tone A */
  --color-tone-a-50: rgba(199, 221, 235, 1);
  --color-tone-a-100: rgba(153, 176, 191, 1);
  --color-tone-a-300: rgba(108, 126, 138, 1);
  --color-tone-a-400: rgba(65, 76, 84, 1);
  --color-tone-a-500: rgba(36, 36, 36, 1);

  /* Tone B */
  --color-tone-b-100: var(--color-primary-100);
  --color-tone-b-200: var(--color-identity-200);
  --color-tone-b-300: rgba(255, 165, 0, 1);

  /* Tone C */
  --color-tone-c-100: rgba(36, 36, 36, 1);
  --color-tone-c-200: rgba(29, 38, 49, 1);

  /* Tone D */
  --color-tone-d-100: rgba(186, 56, 73, 1);
  --color-tone-d-200: rgba(186, 56, 73, 1);
  --color-tone-d-250: rgba(186, 56, 73, 1);
  --color-tone-d-300: rgba(186, 56, 73, 1);
  --color-tone-d-400: rgba(186, 56, 73, 1);

  /* Offer */
  --color-offer-300: var(--color-identity-200);

  /* Gray */
  --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: var(--color-tone-a-500);

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

  /* System - Error */
  --color-system-error: rgba(184, 41, 25, 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: var(--color-tone-a-500);
  --color-secondary-dark-text: rgba(36, 36, 36, 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-primary-50);
  --background-secondary-bg: var(--color-tone-c-100);
  --background-secondary-text: var(--color-primary-light-text);

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

  --avatar-bg: var(--color-identity-200);
  --avatar-text: black;

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

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

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

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

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

  --badge-offer-bg: var(--color-identity-200);
  --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);

  /*************************/
  /***** 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-identity-200);

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

  /* Primary */
  --button-primary-bg: var(--color-primary-dark-text);
  --button-primary-text: var(--color-primary-light-text);
  --button-primary-hover-bg: rgba(58, 54, 41, 1);
  --button-primary-pressed-bg: rgba(82, 73, 46, 1);

  /* Secondary */
  --button-secondary-bg: var(--color-identity-200);
  --button-secondary-text: var(--color-primary-dark-text);
  --button-secondary-hover-bg: rgba(226, 194, 82, 1);
  --button-secondary-pressed-bg: rgba(200, 173, 73, 1);

  /* Outlined */
  --button-tertiary-bg: var(--color-white);
  --button-tertiary-text: var(--color-primary-dark-text);
  --button-tertiary-hover-bg: rgba(241, 239, 231, 1);
  --button-tertiary-hover-text: var(--color-primary-dark-text);
  --button-tertiary-pressed-bg: rgba(237, 234, 222, 1);
  --button-tertiary-stroke: var(--color-identity-200);
  --button-tertiary-hover-stroke: var(--color-identity-200);

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

  /*************************/
  /***** 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: "Gentona";

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

  --selected-element-bg: var(--color-identity-200);
  --hoverable-element-bg: var(--color-primary-100);

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

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

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

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

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

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

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

@font-face {
  font-family: "Gentona";
  src: url("/nettalk/fonts/gentona-light-webfont.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Gentona";
  src: url("/nettalk/fonts/gentona-bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Gentona";
  src: url("/nettalk/fonts/gentona-extrabold-webfont.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}