:root {
  /******************Color Palette*****************/
  /* Light Theme */
  --color-primary: #004E9B;
  --color-on-primary: #FDFBFF;
  --color-primary-hover: #001F3D;
  --color-container: #F1F2F4;
  --color-outline: #bbbfcb;
  --color-background: #F9FCFF;
  --color-on-background: #191D20;
  --color-shadow: #000000;
  --color-background-50: rgba(249, 252, 255, 0.5);
  --color-hover-btn: black;

  /**************** Font Families *****************/
  /*Display*/
  /* --display-baseline-font-family: "Roboto", Helvetica; */
  --display-baseline-font-weight: 400;
  --display-baseline-font-size: 72px;
  --display-baseline-letter-spacing: 0px;
  --display-baseline-line-height: 86px;

  /*Display Emphasis*/
  /* --display-emphasis-font-family: "Roboto", Helvetica; */
  --display-emphasis-font-weight: 700;
  --display-emphasis-font-size: 72px;
  --display-emphasis-letter-spacing: 0px;
  --display-emphasis-line-height: 86px;


  /*Title*/
  /* --title-baseline-font-family: "Roboto", Helvetica; */
  --title-baseline-font-weight: 400;
  --title-baseline-font-size: 36px;
  --title-baseline-letter-spacing: 0px;
  --title-baseline-line-height: 44px;

  /*Title Emphasis*/
  /* --title-emphasis-font-family: "Roboto", Helvetica; */
  --title-emphasis-font-weight: 700;
  --title-emphasis-font-size: 36px;
  --title-emphasis-letter-spacing: 0px;
  --title-emphasis-line-height: 44px;


  /*Headline*/
  /* --headline-baseline-font-family: "Roboto", Helvetica; */
  --headline-baseline-font-weight: 400;
  --headline-baseline-font-size: 24px;
  --headline-baseline-letter-spacing: 0px;
  --headline-baseline-line-height: 32px;

  /*Headline Emphasis*/
  /* --headline-emphasis-font-family: "Roboto", Helvetica; */
  --headline-emphasis-font-weight: 700;
  --headline-emphasis-font-size: 24px;
  --headline-emphasis-letter-spacing: 0px;
  --headline-emphasis-line-height: 32px;


  /*Body-Large*/
  /* --body-large-baseline-font-family: "Roboto", Helvetica; */
  --body-large-baseline-font-weight: 400;
  --body-large-baseline-font-size: 16px;
  --body-large-baseline-letter-spacing: 0.4px;
  --body-large-baseline-line-height: 24px;
  /*Body-Large Emphasis*/
  /* --body-large-emphasis-font-family: "Roboto", Helvetica; */
  --body-large-emphasis-font-weight: 700;
  --body-large-emphasis-font-size: 16px;
  --body-large-emphasis-letter-spacing: 0.4px;
  --body-large-emphasis-line-height: 24px;

  /*Body-Medium*/
  /* --body-medium-baseline-font-family: "Roboto", Helvetica; */
  --body-medium-baseline-font-weight: 400;
  --body-medium-baseline-font-size: 14px;
  --body-medium-baseline-letter-spacing: 0.4px;
  --body-medium-baseline-line-height: 20px;
  /*Body-Medium Emphasis*/
  /* --body-medium-emphasis-font-family: "Roboto", Helvetica; */
  --body-medium-emphasis-font-weight: 700;
  --body-medium-emphasis-font-size: 14px;
  --body-medium-emphasis-letter-spacing: 0.4px;
  --body-medium-emphasis-line-height: 20px;

  /*Body-Small*/
  /* --body-small-baseline-font-family: "Roboto", Helvetica; */
  --body-small-baseline-font-weight: 400;
  --body-small-baseline-font-size: 12px;
  --body-small-baseline-letter-spacing: 0.4px;
  --body-small-baseline-line-height: 16px;
  /*Body-Small Emphasis*/
  /* --body-small-emphasis-font-family: "Roboto", Helvetica; */
  --body-small-emphasis-font-weight: 700;
  --body-small-emphasis-font-size: 12px;
  --body-small-emphasis-letter-spacing: 0.4px;
  --body-small-emphasis-line-height: 16px;
}

/*---------------- Dark Theme ------------------ */
.dark-mode {
  --color-primary: #A9D4FF;
  --color-on-primary: #08345F;
  --color-primary-hover: #CCE5FF;
  --color-container: #191F24;
  --color-outline: #35434d;
  --color-background: #111518;
  --color-on-background: #E2E5E9;
  --color-shadow: #000000;
  --color-background-50: rgba(17, 21, 24, 0.8);
  --color-hover-btn: white;
}

@media (max-width: 768px) {
  :root {
  /*Display*/
  /* --display-baseline-font-family: "Roboto", Helvetica; */
  --display-baseline-font-size: 40px;
  --display-baseline-line-height: 48px;

  /*Display Emphasis*/
  /* --display-emphasis-font-family: "Roboto", Helvetica; */
  --display-emphasis-font-weight: 700;
  --display-emphasis-font-size: 40px;
  --display-emphasis-line-height: 48px;

  /* --title-baseline-font-family: "Roboto", Helvetica; */
  --title-baseline-font-size: 30px;
  --title-baseline-line-height: 45px;

  /*Title Emphasis*/
  /* --title-emphasis-font-family: "Roboto", Helvetica; */
  --title-emphasis-font-size: 30px;
  --title-emphasis-line-height: 45px;
  }
}