:root {
	///////////////////////////////////////////////////////////////////////////////
	// Brand primary colors
	///////////////////////////////////////////////////////////////////////////////
	--brand-primary-50: hsl(170, 100%, 50%);
	--brand-primary-40: hsl(170, 100%, 40%);
	--brand-primary-30: hsl(170, 100%, 30%);
	--brand-primary-20: hsl(170, 100%, 20%);
	--brand-primary-10: hsl(170, 100%, 10%);
	
	--brand-default: var(--brand-primary-20);

	///////////////////////////////////////////////////////////////////////////////
	// Gray scale colors
	///////////////////////////////////////////////////////////////////////////////
	--gray-95: hsl(0, 0%, 95%);
	--gray-90: hsl(0, 0%, 90%);
	--gray-80: hsl(0, 0%, 80%);
	--gray-70: hsl(0, 0%, 70%);
	--gray-50: hsl(0, 0%, 50%);
	--gray-30: hsl(0, 0%, 30%);
	--gray-20: hsl(0, 0%, 20%);
	--gray-10: hsl(0, 0%, 10%);

	///////////////////////////////////////////////////////////////////////////////
	// Black & white pure values
	///////////////////////////////////////////////////////////////////////////////
	--white: hsl(0, 0%, 100%);
	--black: hsl(0, 0%, 0%);

	///////////////////////////////////////////////////////////////////////////////
	// Accent color
	///////////////////////////////////////////////////////////////////////////////
	--accent-light: hsl(60, 70%, 90%);
	--accent-base: hsl(60, 70%, 50%);
	--accent-dark: hsl(60, 70%, 30%);

	///////////////////////////////////////////////////////////////////////////////
	// Border colors
	///////////////////////////////////////////////////////////////////////////////
	--border-light: var(--gray-90);
	--border-default: var(--gray-70);
	--border-dark: var(--gray-30);

	///////////////////////////////////////////////////////////////////////////////
	// Meaning related colors
	///////////////////////////////////////////////////////////////////////////////
	--danger-light: hsl(340, 100%, 60%);
	--danger-base: 	hsl(340, 100%, 40%);
	--danger-dark: 	hsl(340, 100%, 20%);

	--highlight-light: 	hsl(45, 86%, 80%);
	--highlight-base: 	hsl(45, 86%, 60%);
	--highlight-dark:  	hsl(45, 86%, 30%);

	///////////////////////////////////////////////////////////////////////////////
	// Theme: Gray 
	///////////////////////////////////////////////////////////////////////////////
	--theme-gray: var(--gray-30);

	///////////////////////////////////////////////////////////////////////////////
	// Theme: Green 
	///////////////////////////////////////////////////////////////////////////////
	--theme-green: var(--brand-primary-30);

	///////////////////////////////////////////////////////////////////////////////
	// Theme: Purple
	///////////////////////////////////////////////////////////////////////////////
	 --theme-purple: hsl(24, 80% 60%);
}