/*Palette V.2.0*/

@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {
  /* Primitive/Colours Styles */

  --primary-element-background: #FFFfff;
  --primary-element-pale: #ffffff;
  /* --primary-element-pale: #fff; */
  /* this color is updated to achieve background color of web pages as per figma*/
  --primary-element-subtle: #F4E9EF;
  --primary-element-light: #DCBCCE;
  --primary-element-mid-light: #B36E95;
  --primary-element-mid: #8D2661;
  --primary-element-mid-dark: #641B45;
  --primary-element-dark: #3B1029;

  /* Secondary/Element */
  --secondary-element-background: #FFFFFF;
  --secondary-element-pale: #FCFCFC;
  --secondary-element-subtle: #F5F8EB;
  --secondary-element-light: #E1EABF;
  --secondary-element-mid-light: #BFD176;
  --secondary-element-mid: #9FBA32;
  --secondary-element-mid-dark: #718424;
  --secondary-element-dark: #434E15;

  /* Primary/Button */
  --primary-button-foreground-ondark: #FFFFFF;
  --primary-button-foreground-onlight: #8D2661;
  --primary-button-label-inverted: #3B1029;
  --primary-button-resting: #8D2661;
  --primary-button-hover: #641B45;
  --primary-button-pressed: #4E1535;

  /* Secondary/Button */
  --secondary-button-foreground-ondark: #FFFFFF;
  --secondary-button-foreground-onlight: #9FBA32;
  --secondary-button-label-inverted: #434E15;
  --secondary-button-resting: #9FBA32;
  --secondary-button-hover: #718424;
  --secondary-button-pressed: #57661C;

  /* Tertiary/Button */
  --tertiary-button-foreground-ondark: #FFFFFF;
  --tertiary-button-foreground-onlight: #641B45;
  --tertiary-button-label-inverted: #3B1029;
  --tertiary-button-resting: #641B45;
  --tertiary-button-hover: #4E1535;
  --tertiary-button-pressed: #3B1029;

  /* Primary/Navigation */
  --primary-nav-label-selected: #FFFFFF;
  --primary-nav-label-resting: #641B45;
  --primary-nav-label-hover: #4E1535;
  --primary-nav-label-pressed: #3B1029;
  --primary-nav-container-selected: #8D2661;
  --primary-nav-container-selected-hover: #641B45;

  /* Primary/Chip */
  --primary-chip-label-selected: #8D2661;
  --primary-chip-border-selected: #8D2661;
  --primary-chip-container-selected: #F4E9EF;
  --primary-chip-container-selected-hover: #DCBCCE;

  /* Primary/Tab */
  --primary-tab-label-resting: #FFFFFF;
  --primary-tab-container-active: #FFFFFF;
  --primary-tab-container-resting: #8D2661;
  --primary-tab-container-resting-hover: #641B45;

  /* Primary/Title */
  --primary-title-page-title: #3B1029;
  --primary-title-page-subtitle: #641B45;
  --primary-title-card-title: #3B1029;
  --primary-title-card-subtitle: #641B45;
  --primary-title-highlight: #802358;

  /* Secondary/Title */
  --secondary-title-page-title: #434E15;
  --secondary-title-page-subtitle: #718424;
  --secondary-title-card-title: #434E15;
  --secondary-title-card-subtitle: #718424;
  --secondary-title-highlight: #91A92E;

  /* Primary/Body Text */
  --primary-body-text-highlight: #802358;

  /* Secondary/Body Text */
  --secondary-body-text-highlight: #91A92E;

  /* Primary/Overlay */
  --primary-overlay-overlaylight: rgba(59, 16, 41, 0.4);
 

  /* Primary/Shadow */
  --primary-shadow-branded: #4E1535;


  /* Gradient/Element */
  --gradient-element-flashing: linear-gradient(135deg, #DCBCCE 0%, #F4E9EF 50.52%, #E1EABF 100%);
  --gradient-element-fade: linear-gradient(90deg, #FBF3F700 0%, #FBF3F7 100%);

  /* ==========>          Gradients with the same start and end color */
  --gradient-element-pattern: linear-gradient(135deg, #c5caff 0%, #eceeff 50.52%, #c1f3de 100%);

  /* Gradient/Navigation */
  --gradient-navigation-separator: linear-gradient(90deg, #F4E9EF00 0%, #8D266180 50%, #F4E9EF00 100%);
  --gradient-navigation-fade: linear-gradient(90deg, #F4E9EF00 0%, #F4E9EF 100%);



  
  /*  --color-loader: 29, 35, 107;         

  --font-montserrat: "Montserrat";
  --font-title: var(--font-montserrat);


  /* Font */
  --font-title: "Petrona";

  --primary-hyperlink-onlight: #8D2661;
   --primary-hyperlink-ondark: #F4E9EF;


}

body{
background:var(--primary-element-background);
}
