/*
	Note: Our scales in here are a bit different than from the opaque colors.
	This is because in here we max out our scale at the 100% saturation mark, but
	we don't go any darker. We can't really ... since we're using transparency here.

	Also note: We do NOT include accent scales in here either. The accent scales
	cannot be derived by just simply altering the alpha level.
*/

:root {
	/*
	# Warm Primary */
	--sft-transparent-warm-primary-color-1: rgba(210, 69, 29, .1); /* Lightest */
	--sft-transparent-warm-primary-color-2: rgba(210, 69, 29, .2);
	--sft-transparent-warm-primary-color-3: rgba(210, 69, 29, .3);
	--sft-transparent-warm-primary-color-4: rgba(210, 69, 29, .4);
	--sft-transparent-warm-primary-color-5: rgba(210, 69, 29, .5);
	--sft-transparent-warm-primary-color-6: rgba(210, 69, 29, .6);
	--sft-transparent-warm-primary-color-7: rgba(210, 69, 29, .7);
	--sft-transparent-warm-primary-color-8: rgba(210, 69, 29, .8);
	--sft-transparent-warm-primary-color-9: rgba(210, 69, 29, .9);
	--sft-transparent-warm-primary-color-10: rgba(210, 69, 29, 1); /* Full saturation */

	/*
	# Warm Secondary */
	--sft-transparent-warm-secondary-color-1: rgba(245, 168, 0, .1);
	--sft-transparent-warm-secondary-color-2: rgba(245, 168, 0, .2);
	--sft-transparent-warm-secondary-color-3: rgba(245, 168, 0, .3);
	--sft-transparent-warm-secondary-color-4: rgba(245, 168, 0, .4);
	--sft-transparent-warm-secondary-color-5: rgba(245, 168, 0, .5);
	--sft-transparent-warm-secondary-color-6: rgba(245, 168, 0, .6);
	--sft-transparent-warm-secondary-color-7: rgba(245, 168, 0, .7);
	--sft-transparent-warm-secondary-color-8: rgba(245, 168, 0, .8);
	--sft-transparent-warm-secondary-color-9: rgba(245, 168, 0, .9);
	--sft-transparent-warm-secondary-color-10: rgba(245, 168, 0, 1);

	/*
	# Cool Primary */
	--sft-transparent-cool-primary-color-1: rgba(0, 164, 141, .1);
	--sft-transparent-cool-primary-color-2: rgba(0, 164, 141, .2);
	--sft-transparent-cool-primary-color-3: rgba(0, 164, 141, .3);
	--sft-transparent-cool-primary-color-4: rgba(0, 164, 141, .4);
	--sft-transparent-cool-primary-color-5: rgba(0, 164, 141, .5);
	--sft-transparent-cool-primary-color-6: rgba(0, 164, 141, .6);
	--sft-transparent-cool-primary-color-7: rgba(0, 164, 141, .7);
	--sft-transparent-cool-primary-color-8: rgba(0, 164, 141, .8);
	--sft-transparent-cool-primary-color-9: rgba(0, 164, 141, .9);
	--sft-transparent-cool-primary-color-10: rgba(0, 164, 141, 1);

	/*
	# Cool Secondary */
	--sft-transparent-cool-secondary-color-1: rgba(23, 111, 152, .1);
	--sft-transparent-cool-secondary-color-2: rgba(23, 111, 152, .2);
	--sft-transparent-cool-secondary-color-3: rgba(23, 111, 152, .3);
	--sft-transparent-cool-secondary-color-4: rgba(23, 111, 152, .4);
	--sft-transparent-cool-secondary-color-5: rgba(23, 111, 152, .5);
	--sft-transparent-cool-secondary-color-6: rgba(23, 111, 152, .6);
	--sft-transparent-cool-secondary-color-7: rgba(23, 111, 152, .7);
	--sft-transparent-cool-secondary-color-8: rgba(23, 111, 152, .8);
	--sft-transparent-cool-secondary-color-9: rgba(23, 111, 152, .9);
	--sft-transparent-cool-secondary-color-10: rgba(23, 111, 152, 1);
}