// ==========================================================================
// Typography
// ==========================================================================

@import
	"variables",
	"functions";

body,
button,
input,
select,
textarea {
	color: map-get($root-font, color);
	font-family: $open-sans;
	font-size: map-get($root-font, font-size) * 1px;
	line-height: map-get($root-font, line-height);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-family: $montserrat;
	font-weight: 700;
}

p {
	margin: 0 0 24px;
}

b,
strong {
	font-weight: $bold;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	border-left: 4px solid $color__border--primary;
	color: $color__text--secondary;
	font-size: 19px;
	font-style: italic;
	line-height: (30/19);
	margin: 0 0 24px;
	padding-left: 20px;
}

blockquote p {
	margin-bottom: 24px;
}

blockquote > p:last-child {
	margin-bottom: 0;
}

blockquote cite,
blockquote small {
	color: $color__border--secondary;
	font-size: 13px;
	font-family: $open-sans;
	line-height: (21/13);
}

address {
	font-style: italic;
	margin: 0 0 24px;
}

code,
kbd,
tt,
var,
samp,
pre {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre {
	background: $pre__background;
	background-color: rgba(0, 0, 0, 0.01);
	border: 1px solid $color__border--primary;
	line-height: (18/16);
	margin-bottom: 24px;
	max-width: 100%;
	overflow: auto;
	padding: 6px;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

abbr,
acronym {
	border-bottom: 1px dotted $color__border--primary;
	cursor: help;
}

mark,
ins {
	background: $mark__background;
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}
