Typography

// /*
// 	Root
// */

html {
	@apply .leading-1;

	font-size: 1em;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

strong,
b,
cite,
address {
	font-style: normal;
	font-weight: normal;
}

/**
	responsive fluid typography is difficult to achieve using tailwind utility classes...
	I am going to replicate tailwind like classes here, but using the postcss responsive
	type plugin... like a boss

	textSizes: {
		xl: calc(ms(8), ms(15), 320, 1600),
		h1: calc(ms(6), ms(13), 320, 1600),
		h2: calc(ms(5), ms(12), 320, 1600),
		h3: calc(ms(4), ms(11), 320, 1600),
		h4: calc(ms(4), ms(8), 320, 1600),
		h5: calc(ms(4), ms(6), 320, 1600),
		h6: ms(4),
		lg: calc(ms(0), ms(3), 320, 1600),
		body: calc(ms(0), ms(2), 320, 1600),
		sm: calc(ms(0), ms(1), 320, 1600),
		xs: calc(ms(0), ms(0), 320, 1600),
		xs2: calc(ms(-1), ms(-1), 320, 1600)
	},
*/

body {
	@apply .leading-4 .text-black .font-base;
}

// h1,
.heading-1 {
	@apply .font-bold .tracking--2;
}

// h2,
.heading-2 {
	@apply .font-bold .tracking--15;
}

// h3,
.heading-3 {
	@apply .font-bold .tracking--15;
}

// h4,
.heading-4 {
	@apply .font-bold .tracking--15;
}

// h5,
.heading-5 {
	@apply .font-bold .tracking--1;
}

// h6,
.heading-6 {
	@apply .font-bold;
}

$range: 320px 1600px;

.text-kin-massive {
	font-size: responsive ms(14) ms(25);
	font-range: $range;
	line-height: 0.74; // magic
}

.text-xl {
	@apply .font-light;

	font-size: responsive ms(6) ms(14);
	font-range: $range;
	line-height: leading(rem-to-px(ms(14)), 88);
}

.text-h1 {
	@apply .font-light;

	font-size: responsive ms(6) ms(13);
	font-range: $range;
	line-height: leading(rem-to-px(ms(13)), 80);
}

.text-h2 {
	font-size: responsive ms(5) ms(12);
	font-range: $range;
	line-height: leading(rem-to-px(ms(12)), 72);
}

.text-h3 {
	font-size: responsive ms(4) ms(11);
	font-range: $range;
	line-height: leading(rem-to-px(ms(11)), 56);
}

.text-h4 {
	font-size: responsive ms(4) ms(8);
	font-range: $range;
	line-height: leading(rem-to-px(ms(8)), 48);
}

.text-h5 {
	font-size: responsive ms(4) ms(6);
	font-range: $range;
	line-height: leading(rem-to-px(ms(6)), 40);
}

.text-h6 {
	font-size: responsive ms(2) ms(4);
	line-height: leading(rem-to-px(ms(4)), 36);
}

.text-lg {
	font-size: responsive ms(1) ms(3);
	font-range: $range;
	line-height: leading(rem-to-px(ms(3)), 32);
}

.text-body {
	font-size: responsive ms(1) ms(2);
	font-range: $range;
	line-height: leading(rem-to-px(ms(2)), 32);
}

.text-body-s {
	font-size: responsive ms(1) ms(2);
	font-range: $range;
	line-height: leading(rem-to-px(ms(2)), 32);
}

.text-sm {
	font-size: responsive ms(0) ms(1);
	font-range: $range;
	line-height: leading(rem-to-px(ms(1)), 28);
}

.text-xs {
	font-size: responsive ms(0) ms(0);
	font-range: $range;
	line-height: leading(rem-to-px(ms(0)), 28);
}

.text-xs2 {
	font-size: responsive ms(-1) ms(-1);
	font-range: $range;
	line-height: leading(rem-to-px(ms(-1)), 28);
}

.text-intro {
	font-size: ms(1);
	line-height: leading(rem-to-px(ms(3)), 32);

	@screen md {
		font-size: ms(3);
		line-height: leading(rem-to-px(ms(3)), 32);
	}

	@screen xl {
		font-size: ms(6);
		line-height: leading(rem-to-px(ms(6)), 44);
	}
}

a {
	text-decoration: none;
	transition: color 300ms ease;
	color: inherit;

	&:hover,
	&:focus,
	&:active {
		@apply .text-blue;
	}
}

[class*='font'],
[class*='text'] {
	transition: opacity 300ms ease;
	opacity: 0;
}

.is-fonts-failed,
.is-fonts-loaded {
	[class*='font'],
	[class*='text'] {
		opacity: 1;
	}
}

.no-js {
	[class*='font'],
	[class*='text'] {
		opacity: 1;
	}
}

html[class*='font'] {
	opacity: 1;
}

.s-content {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	ul,
	ol,
	p {
		&:not(:last-child) {
			@apply .mb-1;
		}
	}

	a {
		@apply .text-blue;

		text-decoration: none;

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