@import url("../base-variables.css");
:root {
  --primary900: #24315d;
  --primary700: #5068B5;
  --primary500: #28d281;
  --primary300: #f1f4f7;
  --primary100: #758BD1;
  --primary50: #8DA0D9;

  --surface900: #FFFFFF;
  --surface700: #f1f4f7;
  --surface500: #F4F5F6;
  --surface300: #F0F1F2;
  --surface100: #EFF0F1;
  --surface50: #EDEEEF;

  --complementary300: #24315d;
  --complementary500: #50585f;

  --overlayPrimary1: rgba(0, 86, 251, 0.04);
  --overlayPrimary2: rgba(0, 86, 251, 0.12);
  --overlayPrimary3: rgba(0, 86, 251, 0.8);
  --overlayPrimary4: rgba(0, 86, 251, 0.10);

  --overlayWhite1: rgba(255, 255, 255, .04);
  --overlayWhite2: rgba(255, 255, 255, .12);
  --overlayWhite3: rgba(255, 255, 255, .08);
  --overlayWhite4: rgba(255, 255, 255, .10);

  --overlayBlack1: rgba(0, 0, 0, .04);
  --overlayBlack2: rgba(0, 0, 0, .12);
  --overlayBlack3: rgba(0, 0, 0, .08);
  --overlayBlack4: rgba(0, 0, 0, .10);

  --header-bg: #24315d;
  --header-font-color: #FFFFFF;
  --header-button-bg: #28d281;
  --header-button-text: #24315D;
  --header-button-negative: #28d281;

  --footer-bg: #24315d;
  --footer-font-color: #FFFFFF;
  --footer-font-color-2: #FFFFFF;

  --link: #5872c7;
  --hover-link: #5068B5;
  
  --button: #28D281;
  --button-hover: #20A867;
  --button-border: #23315D;
  --button-font: #1D1D1D;
  --button-radius: 50px;

  --font900: #276EE5;
  --font700: rgba(0, 0, 0, 0.6);
  --font500: #50585F;
  --font300: #000000DE;
  --font100: #FFFFFF61;
  --font50: #FFFFFFBD;
  --font0: #FFFFFF;
  
  --font-headings: "PT Sans", sans-serif;
  --font-body: "Roboto", sans-serif;

  --cards-radius: 8px;
  --faqs-radius: 20px;
}