/*
 * Links:
 *
 * https://designsystem.digital.gov/components/typography/
 * https://designsystem.digital.gov/design-tokens/typesetting/font-family/
 * https://designsystem.digital.gov/utilities/font-size-and-family/
 * https://designsystem.digital.gov/design-tokens/typesetting/line-height/
 * 
 */

$font-family-serif: "Roboto Slab", "Merriweather Web", "Georgia", "Cambria", "Times New Roman", "Times", serif;
$font-family-sans-serif: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$font-family-monospace: "Roboto Mono", "Consolas", "Courier", monospace;

$line-height-serif: 1.29;
$line-height-sans-serif: 1.33;
$line-height-monospace: 1.42;

// $font-size-serif: 0.79375 * 16px;
$font-size-serif: 0.85625 * 16px;
// $font-size-serif: 0.9125 * 16px;

// $font-size-sans-serif: 0.8625 * 16px;
$font-size-sans-serif: 0.93125 * 16px;
// $font-size-sans-serif: 1 * 16px;

// $font-size-monospace: 0.775 * 16px;
$font-size-monospace: 0.83125 * 16px;
// $font-size-monospace: 0.89375 * 16px;

@mixin typeset( $font-size, $line-height, $font-family ) {

	$font-size: ( $font-size / 16px ) * 16px/*rem*/;

    font-size: $font-size;
    font-family: $font-family;
	line-height: $line-height;

	.font-size-large{
		// font-size: $font-size * 3.19375;
		font-size: 3.19375em;
		font-size: 2.6625em;
	}

	h1,
	.h1{
		// font-size: $font-size * 2.6625;
		font-size: 2.6625em;
		font-size: 2.13125em;
	}

	h2,
	.h2{
		// font-size: $font-size * 2.13125;
		font-size: 2.13125em;
		font-size: 1.4625em;
	}

	h3,
	.h3{
		// font-size: $font-size * 1.4625;
		font-size: 1.4625em;
		font-size: 1.13125em;
	}

	h4,
	.h4{
		// font-size: $font-size * 1.13125;
		font-size: 1.13125em;
		font-size: 1.0625em;
	}

	h5,
	.h5{
		// font-size: $font-size * 1.0625;
		font-size: 1.0625em;
		font-size: 1em;
	}

	h6,
	.h6{
		// font-size: $font-size * 1;
		font-size: 1em;
	}

	.font-size-small{
		// font-size: $font-size * 0.93125;
		font-size: 0.93125em;
	}
	
	.sub-heading,
	.font-size-x-small,{
		// font-size: $font-size * 0.8625;
		font-size: 0.8625em;
	}
	
	.section-intro{
		// font-size: $font-size * 1.25;
		font-size: 1.25em;
	}

	small{
		font-size: 0.8625em;
	}

	big{
		font-size: 1.25em;
	}
}

@mixin serif_typeset() {
	@include typeset( $font-size-serif, $line-height-serif, $font-family-serif );
}

@mixin sans_serif_typeset() {
	@include typeset( $font-size-sans-serif, $line-height-sans-serif, $font-family-sans-serif );
}

@mixin monospace_typeset() {
	@include typeset( $font-size-monospace, $line-height-monospace, $font-family-monospace );
}

@mixin mediacms_typography( $font-size: $font-size-sans-serif, $font-family: $default-font-family, $line-height: $line-height-sans-serif ) {

	body{
		@include typeset( $font-size, $line-height, $font-family );
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight:bold;
		font-weight:500;
		line-height:1.15;
	}

	small{

	}

	.sub-heading{
		display:block;
		clear:both;
		line-height:1.1;
		letter-spacing: 0.05em;
		margin:8px 0;
		// font-weight:400;
		text-transform: uppercase;
	}

	.section-intro{
		font-weight:100;
		font-weight:200;
		font-weight:300;
	}

	p,
	ul {

		font-size: 1em;
		// font-weight:400;
		line-height:1.62;

		a{
			text-decoration:none;

			&:hover{
				text-decoration:underline;
			}
		}
	}

	ul,
	ol{
		padding:0;
		list-style-position: inside;
	}

	li{
		
	}

	blockquote{
		line-height:1.75;
	}

	button{
		line-height:1;
	}

	hr{
		display:block;
		height:1px;
		padding:0;
		margin:1em 0 2em 0;
		border:0;
		background-color: var(--hr-color);
	}
}
