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

@font-face { font-family: 'Office Code Pro'; src: url('../fonts/OfficeCodePro-Regular.woff'); }
$base-font: 'Helvetica Neue', Helvetica, sans-serif !default;
$mono-font: 'Office Code Pro', Monaco, Consolas, monospace !default;
$base-font-size: 1rem !default;
$base-line-height: 1.6 !default;

$h1: $base-font-size * 2.25 !default;
$h2: $base-font-size * 1.75 !default;
$h3: $base-font-size * 1.5 !default;
$h4: $base-font-size * 1.25 !default;
$h5: $base-font-size * 1.125 !default;
$h6: $base-font-size !default;

::selection {
  background: $black;
  color: $accent;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin-bottom: 1rem;
}


h1, .h1 { font-size: $h1; line-height: 1.2; }
h2, .h2 { font-size: $h2; line-height: 1.3; }
h3, .h3 { font-size: $h3; line-height: 1.4; }
h4, .h4 { font-size: $h4; line-height: 1.5; }
h5, .h5 { font-size: $h5; }
h6, .h6 { font-size: $h6; }

body {
  font-size: $base-font-size;
  background-color: $white;
  color: $black;
  font-family: $base-font;
  line-height: $base-line-height;
}

a,
.link {
  color: $accent;
  text-decoration: none;
  transition: color 200ms;
  cursor: pointer;
}

a:hover {
  color: $accent;
}

h1 a, .h1 a,
h2 a, .h2 a,
h3 a, .h3 a {
  color: inherit;
  text-decoration: underline;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

//====================================================
//  Lists
//====================================================

li ul, li ol { margin: 0 1rem; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
ol ol { list-style: lower-alpha; }
ol ol ol { list-style: lower-roman; }
ol ol ol ol { list-style: lower-alpha; }

//====================================================
//  Code
//====================================================

pre, code, samp, style { font-family: $mono-font; }

pre {
  background-color: $black;
  color: $white;
  font-size: 0.875rem;
  padding: $padding * 2;
  overflow: auto;
}

pre code {
  background-color: inherit;
  border-radius: 0;
  color: inherit;
  padding: 0;
}

code {
  background-color: $silver;
  border-radius: 3px;
  font-size: 0.875rem;
  padding: 0.15em 0.4em;
}

.bg-silver code,
.bg-grey code {
  background-color: $black;
  color: $white;
}

hr {
  border: 0;
  border-bottom: 1px solid fade-out($trueblack, 0.9);
}

//====================================================
//  Text Length & Alignment
//====================================================

.optimal-length    { max-width: 70ch; }
.text-align-center { text-align: center; }
.text-align-left   { text-align: left; }
.text-align-right  { text-align: right; }

//====================================================
//  Styles & Transforms
//====================================================

.uppercase        { text-transform: uppercase; }
.lowercase        { text-transform: lowercase; }
.capitalize       { text-transform: capitalize; }
.italic           { font-style: italic; }
.tracked          { letter-spacing: 4px; }
.underline        { text-decoration: underline; }
.no-underline     { text-decoration: none; }
.list-style-none  { list-style-type: none; }
.list-inline li   { display: inline; }

.thin    {font-weight: 200; }
.regular {font-weight: 400; }
.bold    {font-weight: 700; }

//====================================================
//  Styles & Transforms
//====================================================

@include large {
  .two-columns   { column-count: 2; }
  .three-columns { column-count: 3; }
  .four-columns  { column-count: 4; }
  .five-columns  { column-count: 5; }
}

//====================================================
//  Letter Spacing
//====================================================

.ls0 { letter-spacing: 0px !important; }
.ls1 { letter-spacing: 1px; }
.ls2 { letter-spacing: 2px; }
.ls3 { letter-spacing: 3px; }
.ls4 { letter-spacing: 4px; }
.ls5 { letter-spacing: 5px; }

//====================================================
//  Line-Height
//====================================================

.lh0 { line-height:  0; }
.lh1 { line-height:  1; }
.lh2 { line-height:  1.2; }
.lh3 { line-height:  1.3; }
.lh4 { line-height:  1.4; }
.lh5 { line-height:  1.5; }
.lh6 { line-height:  1.6; }
.lh7 { line-height:  1.7; }
.lh8 { line-height:  1.8; }
.lh9 { line-height:  1.9; }

//====================================================
//  Font Sizing
//====================================================

.fs-base    { font-size: $base-font-size; }
.fs-xsmall  { font-size: 50%; }
.fs-small   { font-size: 75%; }
.fs-large   { font-size: 125%; }
.fs-xlarge  { font-size: 150%; }
.fs-xxlarge { font-size: 175%; }
.fs-double  { font-size: 200%; }
