/*
# Headings */
/* 

	Micro body			10 (10.24)	p	.64rem			Body text		Regular 	medium grey
	Micro heading			10 (10.24)	h6	.64rem			Heading			Medium 		dark grey		sft-micro-heading

	Tiny body			10 (10.24)	p	.64rem			Body text		Regular 	dark grey
	Tiny heading			10 (10.24)	h5	.64rem			Heading			Medium 		close to black		sft-small-heading	
	12.8 x .8 =			
	// Note: maybe this heading works best in all caps. TBD.


	// Note: still a two degree shift from the small body text. 
	// We shift color of small text to get the second degree.
	// Here we scale down using 80%. Body copy upward we go by 75%, then body copy downward we easy the size to 80%
	
	Small body			13 (12.8)	p	.8rem			Small body text 	Regular, 	dark grey
	Heading *for small copy only*	13 (12.8)	h4	.8rem			Heading (for small)	Medium,		close to black 		sft-regular-heading

	UPDATE: 2019-12-21_07-09
	Instead of going down by 80%, we're going to do the 12.5, 25 percent thing instead. 


	16 x .75 

	75 + 

	87.5

	.875 x 16 = 14

	14 x .875 = 12.25


	.875 x .875 = 0.765625

	________

	Updates: 2020-01-01_02-03 - Ignore from here UP ( Meaning to info above )
	*************************************************************************


	Micro copy			12.25			0.765625rem					Regular		dark gray
	Micro heading			12.25		h6	0.765625rem					Medium		close to black
	
	
	Tiny copy			12.25			0.765625rem					Regular		close to black
	Tiny heading			14		h5	.875rem						Medium		close to black


	Small copy			14			.875rem						Regular		close to black
	Small heading			16		h4	1rem						Medium		close to black



	# Headings speced out at 75% increments

	Base body			16		p	1rem			Body text 		Regular, 	close to black
	16 x 1.3333 = 			21.3333		h3	1.3333rem		Heading			Medium, 	close to black 		sft-large-heading
	21.3333 x 1.3333 = 		28.4444		h2 	1.777rem		Heading			Medium		close to black 		sft-jumbo-heading
	28.4444	x 1.3333 = 		37.925925	h1	2.3703703rem		Heading 		Medium		close to black 		sft-giant-heading


	# Lead text - Hard form

	// Notes:
		
		** Doing this one for now **
		Seeding by 1.25 approach:

			16 x 1.25 = 20

		
		Lead text = 1.25rem

	# Display headings

		Display level 1
			44.25 / 16 = 2.765625 rem;


		Display level 2
			33.18 / 16 = 2.07375rem


		Display level 3
			24.89 / 16 = 1.555625rem


		Display level 4
			1.166666 rem

			16 x 1.166666 = 18.6666

			18.67 / 16 = 1.166875rem

			.3333333 / 2 = 0.16666665
			[ previous rem ] x 1.3333 = new rem
*/


	/* 
	## Standard HTML headings, starting with some variables */
	:root {
		/*
		--sft-h6-size: .765625rem;
		--sft-h5-size: .765625rem;
		--sft-h4-size: .875rem;
		*/

		--sft-h6-size: .765625rem;
		--sft-h5-size: .875rem;
		--sft-h4-size: 1rem;
		--sft-h3-size: 1.3333rem;
		--sft-h2-size: 1.777rem;
		--sft-h1-size: 2.3703703rem;



		--sft-h6-downshift-size: .765625rem;
		--sft-h5-downshift-size: .765625rem;
		--sft-h4-downshift-size: .875rem;
		--sft-h3-downshift-size: 1rem;		/* 1.3333rem; */
		--sft-h2-downshift-size: 1.3333rem;	/* 1.777rem; */
		--sft-h1-downshift-size: 1.777rem;	/* 2.3703703rem; */
	}



	
	h1, h2, h3, h4, h5, h6,
	.sft-micro-heading, .sft-tiny-heading, .sft-small-heading, .sft-regular-heading, .sft-large-heading, .sft-jumbo-heading, .sft-giant-heading {
		font-family: 'Roboto', 'Arial', sans-serif;
		font-weight: 500;
		color: var(--sft-transparent-black-0093);

		/* margin: 0; */
	}

	/* 
	*/

	h1 {
		font-size: var(--sft-h1-size);
	}

	h2 {
		font-size: var(--sft-h2-size);
	}

	h3 {
		font-size: var(--sft-h3-size);
	}

	h4 {
		font-size: var(--sft-h4-size);
	}

	h5 {
		font-size: var(--sft-h5-size);
	}

	h6 {
		font-size: var(--sft-h6-size);
		/* color: var(--sft-transparent-black-0060); */
	}


	/* 
	*/

	/* 
		Note: Exploring ways that this can make sense. 

		Testing way 1
	*/

	.sft-micro-heading {
		font-size: var(--sft-h6-size);
		/* color: var(--sft-transparent-black-0060); */
	}

	.sft-tiny-heading {
		font-size: var(--sft-h5-size);
	}

	.sft-small-heading {
		font-size: var(--sft-h4-size);
	}

	.sft-regular-heading {
		font-size: var(--sft-h3-size);
	}



	.sft-large-heading {
		font-size: var(--sft-h2-size);
	}


	.sft-jumbo-heading {
		font-size: var(--sft-h1-size);
	}


	/* 
	*/


	/* 
	Here we are down shifting all headings by one degree. */
	.sft-text-downshift {}


		.sft-text-downshift h1,
		.sft-text-downshift .sft-jumbo-heading {
			font-size: var(--sft-h1-downshift-size);
			
		}

		.sft-text-downshift h2,
		.sft-text-downshift .sft-large-heading {
			font-size: var(--sft-h2-downshift-size);
		}

		.sft-text-downshift h3,
		.sft-text-downshift .sft-regular-heading {
			font-size: var(--sft-h3-downshift-size);
		}

		.sft-text-downshift h4,
		.sft-text-downshift .sft-small-heading {
			font-size: var(--sft-h4-downshift-size);
		}

		.sft-text-downshift h5,
		.sft-text-downshift .sft-tiny-heading {
			font-size: var(--sft-h5-downshift-size);
		}

		.sft-text-downshift h6,
		.sft-text-downshift .sft-micro-heading {
			font-size: var(--sft-h6-downshift-size);
			color: var(--sft-transparent-black-0060);
		}


/* ********************************************************************************* */


/* 
	*** HERE DOWN IS TO BE REMOVED... Just need to double check stuff before removing it. ***

*/

/* 
# Semi-generic heading modifiers */

	/* 
	## Heading down step */

		.sft-heading-down-step {
			font-size: .75em;
		}

		.sft-heading-alt-down-step {
			font-size: .8em;
		}


		/*
			Note: The usage of this modifier would be used generically for any header. 
			The markup would look like this:

			<h3>
				<span class="sft-heading-down-step">
					Down step H3 level heading
				</span>
			</h3>

		*/