@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/ng/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "General Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/ng/fonts/general-sans-variable.woff2") format("woff2-variations");
}

:root {
  --body-copy-font-family: "Plus Jakarta Sans Variable", Helvetica, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --headings-font-family: "General Sans Variable", Helvetica, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --headings-medium-font-family: "General Sans Variable-Medium", Helvetica, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --body-copy-lg-body-font-size: 18px;
  --body-copy-lg-body-font-style: normal;
  --body-copy-lg-body-font-weight: 400;
  --body-copy-lg-body-letter-spacing: 0px;
  --body-copy-lg-body-line-height: 24px;

  /* md */
  --body-copy-md-body-font-size: 16px;
  --body-copy-md-body-font-style: normal;
  --body-copy-md-body-font-weight: 400;
  --body-copy-md-body-letter-spacing: 0px;
  --body-copy-md-body-line-height: 20px;

  --body-copy-md-bold-font-size: 16px;
  --body-copy-md-bold-font-style: normal;
  --body-copy-md-bold-font-weight: 700;
  --body-copy-md-bold-letter-spacing: 0px;
  --body-copy-md-bold-line-height: 20px;

  --body-copy-md-medium-font-size: 16px;
  --body-copy-md-medium-font-style: normal;
  --body-copy-md-medium-font-weight: 500;
  --body-copy-md-medium-letter-spacing: 0px;
  --body-copy-md-medium-line-height: 20px;

  /* sm */
  --body-copy-sm-body-font-size: 14px;
  --body-copy-sm-body-font-style: normal;
  --body-copy-sm-body-font-weight: 400;
  --body-copy-sm-body-italic-font-size: 14px;
  --body-copy-sm-body-italic-font-style: italic;
  --body-copy-sm-body-italic-font-weight: 400;
  --body-copy-sm-body-italic-letter-spacing: 0px;
  --body-copy-sm-body-italic-line-height: 20px;
  --body-copy-sm-body-letter-spacing: 0px;
  --body-copy-sm-body-line-height: 20px;

  --body-copy-sm-bold-font-size: 14px;
  --body-copy-sm-bold-font-style: normal;
  --body-copy-sm-bold-font-weight: 700;
  --body-copy-sm-bold-letter-spacing: 0px;
  --body-copy-sm-bold-line-height: 20px;

  --body-copy-sm-medium-font-size: 14px;
  --body-copy-sm-medium-font-style: normal;
  --body-copy-sm-medium-font-weight: 500;
  --body-copy-sm-medium-letter-spacing: 0px;
  --body-copy-sm-medium-line-height: 20px;
  
  /* xs */
  --body-copy-xs-body-font-size: 12px;
  --body-copy-xs-body-font-style: normal;
  --body-copy-xs-body-font-weight: 400;
  --body-copy-xs-body-letter-spacing: 0px;
  --body-copy-xs-body-line-height: 16px;

  --body-copy-xs-bold-font-size: 12px;
  --body-copy-xs-bold-font-style: normal;
  --body-copy-xs-bold-font-weight: 700;
  --body-copy-xs-bold-letter-spacing: 0px;
  --body-copy-xs-bold-line-height: 16px;

  --body-copy-xs-semi-bold-font-size: 12px;
  --body-copy-xs-semi-bold-font-style: normal;
  --body-copy-xs-semi-bold-font-weight: 600;
  --body-copy-xs-semi-bold-letter-spacing: 0px;
  --body-copy-xs-semi-bold-line-height: 16px;

  --body-copy-xs-medium-font-size: 12px;
  --body-copy-xs-medium-font-style: normal;
  --body-copy-xs-medium-font-weight: 500;
  --body-copy-xs-medium-letter-spacing: 0px;
  --body-copy-xs-medium-line-height: 16px;
  
  /* 3xs */
  --body-copy-3xs-bold-font-size: 8px;
  --body-copy-3xs-bold-font-style: normal;
  --body-copy-3xs-bold-font-weight: 700;
  --body-copy-3xs-bold-letter-spacing: 0px;
  --body-copy-3xs-bold-line-height: 10px;


  /* headings */
  --headings-4-5xl-font-size: 42px;
  --headings-4-5xl-font-style: normal;
  --headings-4-5xl-font-weight: 300;
  --headings-4-5xl-letter-spacing: 0px;
  --headings-4-5xl-line-height: 48px;

  --headings-3xl-font-size: 32px;
  --headings-3xl-font-style: normal;
  --headings-3xl-font-weight: 500;
  --headings-3xl-letter-spacing: 0px;
  --headings-3xl-line-height: 36px;

  --headings-2xl-font-size: 24px;
  --headings-2xl-font-style: normal;
  --headings-2xl-font-weight: 500;
  --headings-2xl-letter-spacing: 0px;
  --headings-2xl-line-height: 32px;

  --headings-xl-font-size: 20px;
  --headings-xl-font-style: normal;
  --headings-xl-font-weight: 500;
  --headings-xl-letter-spacing: 0px;
  --headings-xl-line-height: 24px;

  --headings-lg-500-font-size: 18px;
  --headings-lg-500-font-style: normal;
  --headings-lg-500-font-weight: 500;
  --headings-lg-500-letter-spacing: 0px;
  --headings-lg-500-line-height: 24px;

  --headings-md-550-font-size: 16px;
  --headings-md-550-font-style: normal;
  --headings-md-550-font-weight: 550;
  --headings-md-550-letter-spacing: 0.03em;
  --headings-md-550-line-height: 20px;

  --headings-md-500-font-size: 16px;
  --headings-md-500-font-style: normal;
  --headings-md-500-font-weight: 500;
  --headings-md-500-letter-spacing: 0px;
  --headings-md-500-line-height: 20px;

  --headings-md-450-font-size: 16px;
  --headings-md-450-font-style: normal;
  --headings-md-450-font-weight: 450;
  --headings-md-450-letter-spacing: 0px;
  --headings-md-450-line-height: 20px;

  --headings-sm-550-font-size: 14px;
  --headings-sm-550-font-style: normal;
  --headings-sm-550-font-weight: 550;
  --headings-sm-550-letter-spacing: 0px;
  --headings-sm-550-line-height: 20px;

  --headings-sm-500-font-size: 14px;
  --headings-sm-500-font-style: normal;
  --headings-sm-500-font-weight: 500;
  --headings-sm-500-letter-spacing: 0px;
  --headings-sm-500-line-height: 20px;

  --headings-sm-450-font-size: 14px;
  --headings-sm-450-font-style: normal;
  --headings-sm-450-font-weight: 400;
  --headings-sm-450-letter-spacing: 0px;
  --headings-sm-450-line-height: 20px;

  --sm-dropshadow-primary: 0px 2px 15px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px 0px
    rgba(11, 8, 62, 0.05);

  /* Blue */
  --blue-25:  #F4F8F9;
  --blue-50:  #E9F4FC;
  --blue-100: #D2E8F9;
  --blue-200: #A6D1F2;
  --blue-500: #1B75BA;
  --blue-600: #1767A4;
  --blue-700: #004287;
  --blue-800: #110C5A;
  --blue-900: #08113E;
  --blue-1000:#122035;

  /* Cyan */
  --cyan-100: #0093CB;

  /* Hot Blue */
  --hotBlue-100: #2152CF;
  --hotBlue-200: #1842AA;
  --hotBlue-300: #173C98;
  --hotBlue-400: #1229A1;

  /* Gray */
  --gray-25:  #F9F9F9;
  --gray-50:  #F5F5F5;
  --gray-100: #E4E4E4;
  --gray-200: #CFCFCF;
  --gray-300: #BBBBBB;
  --gray-400: #ACB1B3;
  --gray-500: #888B8D;
  --gray-600: #696969;
  --gray-700: #555555;
  --gray-800: #4D4E51;

  /* Green */
  --green-100: #EBF9F1;
  --green-200: #D3EBDD;
  --green-300: #12A594;
  --green-400: #297F5D;

  /* Red */
  --red-100: #FFF0F0;
  --red-200: #E81119;
  --red-300: #CF0F16;
  --red-400: #DC0C59;

  /* Black */
  --black-1000: #181818;

  /* White */
  --white-1000: #FFFFFF;
  
  /* Shadows */
  --sm-dropshadow-primary: 0px 2px 15px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px 0px rgba(11, 8, 62, 0.05);
  --md-dropshadow-secondary: 0px 4px 4px 0px rgba(17, 12, 90, 0.1);
  
  --max-content-width: 1396px;
}