:root {

	/* fonts*/

	--h1: 1.5rem;
	--h2: 1.375rem;
	--h3: 1.25rem;
	--h4: 1.125rem;
	--h5: 1rem;
	--h6: .875rem;

	--fs-xs: .625rem;
	--fs-sm: .75rem;
	--fs-md: .875rem;
	--fs: 1rem;
	--fs-lg: 1.125rem;

	/* colors */
	--primary-color: #2589ff;
	--primary-color--dark: #006CEA;
	--primary-color--darker: #12447f;
	--danger-color: #ff2e25;
	--success-color: #1cbf22;
	--gray-color: #677178;
	--gray-color--light: #8c959c;
	--light-color: #fff;
	--light-color--dark: #e4ebf0;
	--text-color: #15181A;
	--border-color: #e4ebf0;

	/* background */
	--background-color: #fff;
	--background-color--light: #f2f5f7;
	--background-color--lighter: #e4ebf0;

	/* overlay */
	--overlay: rgb(21, 24, 26, .3);

	/* border */
	--boder-primary: .0625rem solid var(--primary-color);
	--boder-primary-md: .125rem solid var(--primary-color);
	--border: .0625rem solid var(--border-color);
	--border-md: .125rem solid var(--border-color);
	--border-transparent: .0625rem solid transparent;

	/* border radius */
	--radius-xs: .25rem;
	--radius-sm: .5rem;
	--radius-md: .75rem;
	--radius: 1rem;
	--radius-lg: 1.25rem;

	/* grid */
	--g-gap-xs: .25rem;
	--g-gap-sm: .5rem;
	--g-gap-md: .75rem;
	--g-gap: 1rem;
	--g-gap-lg: 1.25rem;
	--g-gap-xl: 1.5rem;
	--g-gap-xxl: 1.75rem;
	--g-gap-3xl: 2rem;

	/* transitions */
	--transition: 300ms ease-in-out;

}