/*Palette V.2.0*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  /* Primary */
  --color-primary-00: #ffffff;
  --color-primary-05: #FBF8FA;
  --color-primary-50: #f4e9f0;
  --color-primary-100: #DCBAD0;
  --color-primary-200: #CB98B9;
  --color-primary-300: #B36A99;
  --color-primary-400: #A54D85;
  --color-primary-500: #8E2067;
  --color-primary-600: #811D5E;
  --color-primary-700: #6F1549;
  /*#651749;*/
  --color-primary-800: #4E1239;
  --color-primary-900: #3C0D2B;

  /* Secondary */
  --color-secondary-00: #FFFFFF;
  --color-secondary-05: #F8F9FB;
  /*#F8F8FA*/
  --color-secondary-50: #E9ECF3;
  /*#E9E8EE*/
  --color-secondary-100: #BCC3DA;
  /*#BBB6CB*/
  --color-secondary-200: #9BA6C8;
  /*#9A93B1*/
  --color-secondary-300: #6E7EAF;
  /*#6C628E*/
  --color-secondary-400: #5769b0;
  /*#4F4478*/
  --color-secondary-500: #263E87;
  /*#231556*/
  --color-secondary-600: #23387B;
  /*#20134E*/
  --color-secondary-700: #1B2C60;
  /*#190F3D*/
  --color-secondary-800: #231556;
  /*#130C2F*/
  --color-secondary-900: #101A39;
  /*#0F0924*/

  /* Tertiary */
  --color-tertiary-00: #FFFFFF;
  --color-tertiary-05: #FEFDFA;
  --color-tertiary-50: #FBFAEF;
  --color-tertiary-100: #F4EECE;
  --color-tertiary-200: #EEE6B6;
  --color-tertiary-300: #E6DB95;
  --color-tertiary-400: #EFD85D;
  /*#E1D481*/
  --color-tertiary-500: #DAC961;
  --color-tertiary-600: #C6B758;
  --color-tertiary-700: #9B8F45;
  --color-tertiary-800: #786F35;
  --color-tertiary-900: #5C5429;

  /* Additional */
  --color-additional-00: #FFFFFF;
  --color-additional-05: #FDFBFA;
  /*#FEF9FC*/
  --color-additional-50: #F8F2EE;
  /*#FBECF5*/
  --color-additional-100: #E8D8CB;
  /*#F2C3DE*/
  --color-additional-200: #DDC5B2;
  /*#ECA6CF*/
  --color-additional-300: #CDAB8F;
  /*#E37DB9*/
  --color-additional-400: #C49A79;
  /*#DD64AB*/
  --color-additional-500: #B58158;
  /*#D53D96*/
  --color-additional-600: #8F6D46;
  /*#C23889*/
  --color-additional-700: #664D32;
  /*#972B6B*/
  --color-additional-800: #4F3C27;
  /*#752253*/
  --color-additional-900: #3C2E1D;
  /*#591A3F*/

  /* Aliases Colour */
  /* Primary/Element */
  --primary-element-background: var(--color-primary-00);
  --primary-element-pale: var(--color-primary-50);
  --primary-element-subtle: var(--color-secondary-50);
  --primary-element-light: var(--color-primary-300);
  --primary-element-mid-light: var(--color-primary-400);
  --primary-element-mid: var(--color-primary-500);
  --primary-element-mid-dark: var(--color-primary-700);
  --primary-element-dark: var(--color-secondary-800);

  /* Secondary/Element */
  --secondary-element-background: var(--color-secondary-00);
  --secondary-element-pale: var(--color-secondary-50);
  --secondary-element-subtle: var(--color-secondary-50);
  --secondary-element-light: var(--color-secondary-100);
  --secondary-element-mid-light: var(--color-secondary-400);
  --secondary-element-mid: var(--color-secondary-500);
  --secondary-element-mid-dark: var(--color-secondary-600);
  --secondary-element-dark: var(--color-secondary-700);

  /* Primary/Button */
  --primary-button-foreground-ondark: var(--color-secondary-800);
  --primary-button-foreground-onlight: var(--color-tertiary-500);
  --primary-button-label-inverted: var(--color-tertiary-800);
  --primary-button-resting: var(--color-tertiary-500);
  --primary-button-hover: var(--color-tertiary-400);
  --primary-button-pressed: var(--color-tertiary-400);

  /* Secondary/Button */
  --secondary-button-foreground-ondark: var(--color-secondary-00);
  --secondary-button-foreground-onlight: var(--color-secondary-500);
  --secondary-button-label-inverted: var(--color-secondary-700);
  --secondary-button-resting: var(--color-additional-600);
  --secondary-button-hover: var(--color-secondary-600);
  --secondary-button-pressed: var(--color-secondary-600);

  /* Tertiary/Button */
  --tertiary-button-foreground-ondark: var(--color-tertiary-00);
  --tertiary-button-foreground-onlight: var(--color-primary-500);
  --tertiary-button-label-inverted: var(--color-primary-900);
  --tertiary-button-resting: var(--color-primary-500);
  --tertiary-button-hover: var(--color-primary-700);
  --tertiary-button-pressed: var(--color-primary-800);

  /* Primary/Navigation */
  --primary-nav-label-selected: var(--color-primary-00);
  --primary-nav-label-resting: var(--color-additional-600);
  --primary-nav-label-hover: var(--color-additional-500);
  --primary-nav-label-pressed: var(--color-additional-600);
  --primary-nav-container-selected: var(--color-primary-500);
  --primary-nav-container-selected-hover: var(--color-additional-500);
  --primary-chip-label-selected: var(--color-primary-500);
  --primary-chip-border-selected: var(--color-primary-500);
  --primary-chip-container-selected: var(--color-primary-500);
  --primary-chip-container-selected-hover: var(--color-primary-700);

  /* Primary/Tab */
  --primary-tab-label-resting: var(--color-primary-00);
  --primary-tab-container-active: var(--color-primary-00);
  --primary-tab-container-resting: var(--color-additional-600);
  --primary-tab-container-resting-hover: var(--color-additional-500);

  /* Primary/Title */
  --primary-title-page-title: var(--color-tertiary-400);
  --primary-title-page-subtitle: var(--color-primary-500);
  --primary-title-card-title: var(--color-tertiary-400);
  --primary-title-card-subtitle: var(--color-primary-700);
  --primary-title-highlight: var(--color-tertiary-500);

  /* Secondary/Title */
  --secondary-title-page-title: var(--color-secondary-500);
  --secondary-title-page-subtitle: var(--color-secondary-700);
  --secondary-title-card-title: var(--color-secondary-500);
  --secondary-title-card-subtitle: var(--color-secondary-700);
  --secondary-title-highlight: var(--color-secondary-400);

  /* Primary/Body Text */
  --primary-body-text-highlight: var(--color-additional-600);

  /* Secondary/Body Text */
  --secondary-body-text-highlight: var(--color-secondary-400);


  --primary-overlay-overlaylight: rgba(#231556, 0.8);
  --primary-shadow-branded: var(--color-secondary-700);
  --gradient-element-flashing: linear-gradient(180deg, #8E2067 0%, #681C61 50.52%, #231556 100%);
  --gradient-element-fade: linear-gradient(90deg, var(--color-primary-05) 0%, var(--color-primary-05) 100%);
  --gradient-element-pattern: linear-gradient(135deg, var(--color-primary-100), var(--color-primary-50) 50.52%, var(--color-secondary-100));

  --gradient-navigation-separator: linear-gradient(90deg,
      rgba(244, 233, 240, 1) 0%,
      rgba(141, 32, 103, 0.5) 50%,
      rgba(244, 233, 240, 1) 100%);


  --gradient-navigation-footer-separator: linear-gradient(270deg, rgba(3, 3, 3, 0), var(--color-secondary-500), rgba(232, 231, 239, 0));
  --gradient-navigation-fade: linear-gradient(90deg, rgba(244, 233, 240, 0) 0%, rgba(142, 32, 103, 0.5) 100%);
  --font-title: "Chivo";

}