:root {
	/* basic colors  */
	--black: #000;
	--white: #fff;
	--gray10: #f8f8f8;
	--gray20: #f4f4f4;
	--gray30: #eaedf4;
	--gray40: #d7d7d7;
	--gray50: #b4c0d3;
	--gray60: #a0a0a0;
	--gray70: #8491a7;
	--gray80: #666666;
	--gray90: #5c667b;
	--gray100: #475067;
	--gray110: #373f57;
	--gray120: #292e41;
	--gray130: #151822;
	--orange: #f1af2c;
	--blue30: #cbe1fa;
	--blue70: #71a7ef;
	--blue90: #3d89ec;

	/* app theme colors */
	--colorPrimary: #3d8b5a;
	--colorPrimaryLight: #b4d2bf;
	--colorSecondary: #fabe6a;
	/* --colorSecondaryLight: #f0a8ae; */

	--infoDelivered: #99b089;
	--infoCanceled: #e9bf96;
	--infoPreparing: #e7e5e4;
	--infoDelivering: #9d9c9b;

	/* checkbox colors */
	--checkboxDisableBg: var(--white);
	--checkboxEnableBg: var(--colorPrimary);
	--checkboxBorder: var(--gray90);
	--checkboxIcon: var(--white);

	/* button colors */
	--buttonPrimaryBg: var(--colorPrimary);
	--buttonPrimaryText: var(--white);
	--buttonSecondaryBg: var(--colorSecondary);
	--buttonSecondaryText: var(--white);

	/* --btnPrimary: #4d96cb;
	--btnPrimaryLight: #e7f1f8; */

	--textPrimary: #202020;
	--textSecondary: #4c515c;
	--textTertiary: #707070;
	--textQuaternary: #c2bfbc;

	--searchIcon: #4d96cb;

	--dividerPrimary: #e7e5e4;

	--borderPrimary: #e4e5e8;
	--borderSecondary: #d9d9d9;
	--borderGreyThin: #cfcfcf;

	--primaryTagBg: #bfd2ac;
	--secondaryTagBg: #f0a8ae;
	--tagTextPrimary: #fff;
	--linkUnderlineBg: #4d96cb;
	--linkPrimaryText: ##757575;

	--primaryBg: #fff;
	--secondaryBg: #eff3f7;
	--tertiaryBg: #4d96cb;
	--darkHeaderBg: #2f383e;

	--defaultHealthNumberBg: #88ea88a1;
	--defaultHealthNumberText: #43823b;

	--bodyTypeNumberBg: #eac888a1;
	--bodyTypeNumberText: #82523b;

	--personalityTraitsBg: #ea88bda1;
	--personalityTraitsText: #823b60;

	--borderPrimary: #e7e5e4;

	--modalBg: #fff;
	--modalPrimaryBtnBg: #4d96cb;
	--modalPrimaryBtnText: #fff;
	--modalSecondaryBtnBg: #cb4d4f;
	--modalSecondaryBtnText: #fff;

	/* FONT SIZES */
	/* --font-size-primary-heading: 4rem;
  --font-size-secondary-heading: 3rem;
  --font-size-large: 2.2rem;
  --font-size-medium-large: 2rem;
  --font-size-medium: 1.8rem;
  --font-size-medium-small: 1.6rem;
  --font-size-small: 1.4rem;
  --font-size-very-small: 1.2rem; */

	--font-size-primary-heading: 4.8rem;
	--font-size-secondary-heading: 3.6rem;
	--font-size-tertiary-heading: 2.4rem;
	--font-size-tertiary: 1.8rem;
	--font-size-extra-large: 3.6rem;
	--font-size-large: 2.4rem;
	--font-size-medium-large: 2rem;
	--font-size-medium: 1.6rem;
	--font-size-medium-small: 1.4rem;
	--font-size-small: 1.2rem;

	--font_primary_heading: 4.8rem;
	--font_secondary_heading: 3.6rem;
	--font_tertiary_heading: 2.4rem;
	--font_tertiary: 1.8rem;
	--font_extra_large: 3.6rem;
	--font_large: 2.4rem;
	--font_medium_large: 2rem;
	--font_medium: 1.6rem;
	--font_medium_small: 1.4rem;
	--font_small: 1.2rem;
	--font_extra_small: 1rem;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	color: var(--textPrimary);
}