:root {
	/* primary brand color with shades and tints */
	--color-primary-h: 28;
	--color-primary-s: 91%;
	--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), 50%);
	--color-primary-light: hsl(
		var(--color-primary-h),
		var(--color-primary-s),
		66%
	);
	--color-primary-dark-1: hsl(
		var(--color-primary-h),
		var(--color-primary-s),
		43%
	);
	--color-primary-dark-2: hsl(
		var(--color-primary-h),
		var(--color-primary-s),
		40%
	);
	--color-primary-dark-3: hsl(
		var(--color-primary-h),
		var(--color-primary-s),
		36%
	);
	--color-primary-semi-transparent: hsla(
		var(--color-primary-h),
		var(--color-primary-s),
		50%,
		0.5
	);
	--color-primary-transparent: hsla(
		var(--color-primary-h),
		var(--color-primary-s),
		50%,
		0.1
	);
	--color-action: var(--color-primary-dark-3);
	--color-action-hover: hsl(var(--color-primary-h), var(--color-primary-s), 32%);
	--color-action-active: hsl(var(--color-primary-h), var(--color-primary-s), 28%);
	--color-action-strong: hsl(var(--color-primary-h), var(--color-primary-s), 24%);

	/* secondary brand color with shades and tints */
	--color-secondary-h: 206;
	--color-secondary-s: 97%;
	--color-secondary: hsl(
		var(--color-secondary-h),
		var(--color-secondary-s),
		45%
	);
	--color-secondary-light: hsl(
		var(--color-secondary-h),
		var(--color-secondary-s),
		86%
	);
	--color-secondary-dark: hsl(
		var(--color-secondary-h),
		var(--color-secondary-s),
		29%
	);

	/* our base color, with one tint, and one shade */
	--color-base-h: 0;
	--color-base-s: 0%;
	--color-base-white: hsl(var(--color-base-h), var(--color-base-s), 98%);
	--color-base-grey: hsl(var(--color-base-h), var(--color-base-s), 86%);
	--color-base-dark: hsl(var(--color-base-h), var(--color-base-s), 30%);

	/* Notiflix */
	--notiflix-icon-color: hsl(
		var(--color-primary-h),
		var(--color-primary-s),
		43%
	);

	/* color's */
	--color-card-boarder: rgb(255, 120, 0);
	--color-light-grey: hsl(225, 33%, 93%);
	--color-red: hsl(348, 86%, 61%);
	--color-purple: hsl(271, 100%, 71%);
	--color-blue: hsl(217, 71%, 53%);
	--color-cyan: hsl(204, 71%, 53%);
	--color-turquoise: hsl(171, 100%, 41%);
	--color-green: hsl(141, 53%, 53%);
	--color-yellow: hsl(48, 100%, 67%);
}