h1, h2, h3, h4, h5, h6, .csn-jumbo-display-text, .csn-large-display-text {
	color: #000000;
}

/* */


/* 

	Distance between 100% to 75% = 25%

	We divide 25% by 4

	Let's use the h1 to h2 values as our example.

	h1 = 51
	h2 = 38

	h2 is 75% the size of h1.

	51 - 38 = 13 

	13 is our whole step.

	13 / 4 = 3 (3.25)

	For our system ... let's use these words to mean these things:

		- 1/4 (quarter step) = flat or sharp
		- 1/2 (half step) = double flat or double sharp
		- 3/4 (three quarter step) = triple flat or triple sharp

		We call these modifiers "accidentals".

	
	Logic about weights, styles, and semantics:

		Explaining by examples:


		h1 is semantically a "header"
		But when we apply an accidental, the text may no longer be considered a header.
		In which case, it could be any number of other semantically named things.

		Semantic ideas:
			- headline
				Different from a "header". A "headline" is something you would 
				see on the main cover area of a website, something you'd see 
				big, laying over top of a background video. 

				It's not quite "display" text, and it's not quite "headers", but
				it's like a "hey, read this stuff first" kind of function. 
				It's generally used for catchy marketing language.

		Back to the logic ...So, even though we are using the (h) in the class name
		h1-flat to denote the quarter step down, the usage of the h1-flat may not 
		reflect usage of a "header".

		The exact naming and purpose of the accidental could vary between design systems.

		As a proposal, in this first stab at this idea, we could do this:

		.h1-flat,
		.some-other-semantic-name {

			// stuff
		}

		or 

		.some-other-semantic-name {

			// stuff
		}

		or 

		.h1-flat {

			// stuff
		}


		It's TBD which approach will make best sense.


		About weights and fonts/styles:

			Any degree of a flat step gets a lighter weight
			Any degree of a sharp step gets a heavier weight 

			Fonts/styles can vary on any of the steps.


*/


:root{
	--h0-size: 67px;
	--h1-size: 51px;
	--h2-size: 38px;
	--h3-size: 28px;
}


/* 
# H1 */
	h1 {
		font-size: 51px;
		/* font-family: 'Red Hat Display', sans-serif; */

		font-family: 'Roboto Flex', sans-serif;
		font-weight: 700;	
	}

	.csn-headline-1,
	.csn-h1-double-sharp {
		font-size: calc( ((var(--h0-size) - var(--h1-size)) / 2 ) + var(--h1-size) );

		font-family: 'Roboto Flex', sans-serif;
		font-weight: 400;

	}


	.csn-display-headline-1-sharp {
		font-size: calc( ((var(--h0-size) - var(--h1-size)) / 4 * 3 ) + var(--h1-size) );

		font-family: 'Red Hat Display', sans-serif;
		font-weight: 500;

	}

	.csn-display-headline-1 {
		font-size: calc( ((var(--h0-size) - var(--h1-size)) / 2 ) + var(--h1-size) );

		font-family: 'Red Hat Display', sans-serif;
		font-weight: 400;

	}


	/* .csn-h1-double-flat {
		font-size: calc( ((var(--h1-size) - var(--h2-size)) / 4 * 3) + var(--h2-size) );

		
	} */

	/* 
		Should give us:

			51 - 38 = 13 
			13 / 4 = 3~
			3 x 3 (3 quarters) = 9

			9 + h2 (38) = 47 

			47 is a quarter step down from the h1
			or said another way, 47 is 3 quarters up from h2
	*/

	




/* 
# H2 */
	h2 {
		font-size: 38px;
		/* font-family: 'Red Hat Display', sans-serif; */

		font-family: 'Roboto Flex', sans-serif;
		font-weight: 700;
	}

	.csn-headline-2,
	.csn-h2-double-sharp {
		font-size: calc( ((var(--h1-size) - var(--h2-size)) / 2 ) + var(--h2-size) );

		font-family: 'Roboto Flex', sans-serif;
		font-weight: 400;

	}

	.csn-display-headline-2-sharp {
		font-size: calc( ((var(--h1-size) - var(--h2-size)) / 4 * 3 ) + var(--h2-size) );

		font-family: 'Red Hat Display', sans-serif;
		font-weight: 500;

	}


	.csn-display-headline-2 {
		font-size: calc( ((var(--h1-size) - var(--h2-size)) / 2 ) + var(--h2-size) );

		font-family: 'Red Hat Display', sans-serif;
		font-weight: 400;

	}



/* 
# H3 */

	h3 {
		font-size: 28px;
		/* font-family: 'Red Hat Display', sans-serif; */

		font-family: 'Roboto Flex', sans-serif;
		font-weight: 500;
	}


	.csn-headline-3,
	.csn-h3-double-sharp {
		font-size: calc( ((var(--h2-size) - var(--h3-size)) / 2 ) + var(--h3-size) );

		font-family: 'Roboto Flex', sans-serif;
		font-weight: 400;

	}


	.csn-display-headline-3-sharp {
		font-size: calc( ((var(--h2-size) - var(--h3-size)) / 4 * 3 ) + var(--h3-size) );

		font-family: 'Red Hat Display', sans-serif;
		font-weight: 500;

	}


	.csn-display-headline-3 {
		font-size: calc( ((var(--h2-size) - var(--h3-size)) / 2 ) + var(--h3-size) );

		font-family: 'Red Hat Display', sans-serif;
		font-weight: 400;

	}




h4 {
	font-size: 21px;
	/* font-family: 'Red Hat Display', sans-serif; */

	font-family: 'Roboto Flex', sans-serif;
	font-weight: 700;
}

h5 {
	font-size: 16px;
	/* font-family: 'Red Hat Display', sans-serif; */

	font-family: 'Roboto Flex', sans-serif;
	font-weight: 700;
}

h6 {
	font-size: 12px;
	/* font-family: 'Red Hat Display', sans-serif; */

	font-family: 'Roboto Flex', sans-serif;
	font-weight: 700;
}


/* */

.csn-jumbo-display-text {
	font-size: 67px;
	font-family: 'Red Hat Display', sans-serif;
	font-weight: 300;
}

.csn-large-display-text {
	font-size: 28px;
	font-family: 'Red Hat Display', sans-serif;
	font-weight: 300;
}