/* Base Styles */
:root {
  /* Colors Scales */
  --greyScale-grey50: #f7f7f7;
  --greyScale-grey100: #f1f2f2;
  --greyScale-grey200: #e1e1e6;
  --greyScale-grey300: #b9bdc7;
  --greyScale-grey400: #a1a5af;
  --greyScale-grey500: #7a7f8a;
  --greyScale-grey600: #5f6674;
  --greyScale-grey700: #4a4f5c;
  --greyScale-grey800: #353a45;
  --greyScale-grey900: #000;

  --whiteScale-white1000: #ffffff;

  --brandScale-brand50: #eef5fb;
  --brandScale-brand100: #e3edf5;
  --brandScale-brand200: #bdcfe0;
  --brandScale-brand300: #99b0cc;
  --brandScale-brand400: #7791b7;
  --brandScale-brand500: #5973a3;
  --brandScale-brand600: #3c568e;
  --brandScale-brand700: #213979;
  --brandScale-brand800: #001e62; /*Base Brand Color*/
  --brandScale-brand900: #00184f;

  --redscale-red600: #b9411d; /*Base Red Color*/
  --redscale-red900: #6d0000;

  --greenscale-green600: #00746d; /*Base Green Color*/
  --greenscale-green900: #003409;

  --indigo-300: #e4e5f3;
  --indigo-400: #cdd1e5;
  --indigo-500: #485cc7;
  --indigo-600: #2b439f;

  --yellow-300: #faf8dd;
  --yellow-400: #f1eb9c;
  --yellow-500: #ede04b;

  /* Theme Colors */
  /* Add theme colors as needed base on Figma File */
  --background-backgroundWhite: var(--whiteScale-white1000);
  --background-backgroundWeak: var(--greyScale-grey50);
  --background-backgroundModerate: var(--indigo-300);
  --background-backgroundStrong: var(--greyScale-grey500);
  --background-backgroundHeavy: var(--brandScale-brand700);
  --background-backgroundTotal: var(--brandScale-brand900);
  --background-backgroundBrand: var(--brandScale-brand800);
  --background-backgroundBrandWeak: var(--brandScale-brand50);
  --background-backgroundBlack: var(--greyScale-grey900);
  --background-backgroundGrey: var(--greyScale-grey100);
  --background-backgroundAuxilary: var(--greyScale-grey50);

  --text-textWhite: var(--whiteScale-white1000);
  --text-textWeaker: var(--greyScale-grey200);
  --text-textWeak: var(--greyScale-grey600);
  --text-textStrong: var(--brandScale-brand900);
  --text-textBrand: var(--brandScale-brand800);
  --text-textBrandWeak: var(--brandScale-brand600);

  --border-borderWeaker: var(--greyScale-grey50);
  --border-borderWeak: var(--greyScale-grey100);
  --border-borderStrong: var(--greyScale-grey200);
  --border-borderHeavy: var(--greyScale-grey400);
  --border-borderBrand: var(--brandScale-brand800);
  --border-borderBrandWeak: var(--brandScale-brand700);
  --border-borderBrandStrong: var(--brandScale-brand900);
  --border-borderWhite: var(--whiteScale-white1000);

  /* Components Colors */
  --button-primary-buttonBackground: var(--background-backgroundBrand);
  --button-primary-buttonText: var(--whiteScale-white1000);
  --button-primary-buttonBorder: var(--border-borderBrand);
  --button-primary-buttonBackgroundHover: var(--background-backgroundTotal);
  --button-primary-buttonTextHover: var(--whiteScale-white1000);
  --button-primary-buttonBorderHover: var(--background-backgroundTotal);

  --font--headlines-primary: "AsicsFont", ui-sans-serif;
  --font--headlines-secondary: "AsicsFontSportStyle", "AsicsFont", sans-serif;
  --font--paragraph: "AsicsFont", ui-sans-serif;
}

/* Custom Primary Headlines Type Styles */
.ch-lead-headline,
.ch-heading1,
.ch-heading2,
.ch-heading3,
.ch-heading4,
.ch-heading5,
.ch-heading6 {
  font-family: var(--font--headlines-primary);
  font-weight: normal;
  color: inherit !important;
}
.ch-lead-headline {
  font-size: 5.5rem;
  line-height: 100%;
  letter-spacing: 0;
  margin: 0px;
}
.ch-heading1 {
  font-size: 3.5rem;
  line-height: 110%;
  letter-spacing: 0;
  margin: 0px;
}
.ch-heading2 {
  font-size: 2.5rem;
  line-height: 120%;
  letter-spacing: 0;
  margin: 0px;
}
.ch-heading3 {
  font-size: 2rem;
  line-height: 120%;
  letter-spacing: 0;
  margin: 0px;
}
.ch-heading4 {
  font-size: 1.5rem;
  line-height: 124%;
  letter-spacing: 0;
  margin: 0px;
}
.ch-heading5 {
  font-size: 1.25rem;
  line-height: 120%;
  letter-spacing: 0;
  margin: 0px;
}
.ch-heading6 {
  font-size: 1.125rem;
  line-height: 124%;
  letter-spacing: 0;
  margin: 0px;
}

/* Custom Secondary Headlines Type Styles */
.ch-sec-heading1,
.ch-sec-heading2 {
  font-family: var(--font--headlines-secondary);
  font-weight: normal;
  color: inherit !important;
}
.ch-sec-heading1 {
  font-size: 3.5rem;
  line-height: 110%;
  letter-spacing: 0;
  margin: 0px;
}
.ch-sec-heading2 {
  font-size: 2.5rem;
  line-height: 120%;
  letter-spacing: 0;
  margin: 0px;
}

/* Custom Body Type Styles */
.ch-paragraph-large {
  font-size: 1.125rem;
  line-height: 140%;
  letter-spacing: 0;
  font-family: var(--font--paragraph);
  margin: 0px;
}
.ch-paragraph {
  font-size: 1rem;
  line-height: 140%;
  letter-spacing: 0;
  font-family: var(--font--paragraph);
  margin: 0px;
}
.ch-paragraph-small {
  font-size: 0.875rem;
  line-height: 140%;
  letter-spacing: 0;
  font-family: var(--font--paragraph);
  margin: 0px;
}
.ch-paragraph-extra-small {
  font-size: 0.75rem;
  line-height: 150%;
  letter-spacing: 0;
  font-family: var(--font--paragraph);
  margin: 0px;
}

/* Utility Styles */
.ch-text-italic {
  font-style: italic;
}
.ch-text-weight-bold {
  font-weight: 700;
}
.ch-text-all-caps {
  text-transform: uppercase;
}
.ch-text-link {
  text-decoration: underline;
  color: var(--text-textBrand);
}

@media screen and (max-width: 768px) {
  .ch-lead-headline {
    font-size: 4em;
    line-height: 110%;
    letter-spacing: 0;
  }
  .ch-heading1 {
    font-size: 3rem;
    line-height: 120%;
    letter-spacing: 0;
  }
  .ch-heading2 {
    font-size: 2rem;
    line-height: 120%;
    letter-spacing: 0;
  }
  .ch-heading3 {
    font-size: 1.5rem;
    line-height: 130%;
    letter-spacing: 0;
  }
  .ch-heading4 {
    font-size: 1.25rem;
    line-height: 130%;
    letter-spacing: 0;
  }
  .ch-sec-heading1 {
    font-size: 3rem;
    line-height: 120%;
    letter-spacing: 0;
  }
  .ch-sec-heading2 {
    font-size: 2rem;
    line-height: 120%;
    letter-spacing: 0;
  }
}