// Typography
//
// To achieve perfect vertical rhythm, we're using
// Modular Scale.
// http://www.modularscale.com/
// <br>
// To achieve perfect fluid typography, we're using CSS Locks.
// https://fvsch.com/code/css-locks/
//
// Markup:
// <h1>Getting Ready: Planning And Metrics Link</h1>
// <p>Micro-optimizations are great for keeping performance
// on track, but it's critical to have clearly defined
// targets in mind — measurable goals that would influence
// any decisions made throughout the process. There are a
// couple of different models, and the ones discussed below
// are quite opinionated — just make sure to set your own
// priorities early on.</p>
// <h2>Establish a performance culture.</h2>
// <p>In many organizations, front-end developers know
// exactly what common underlying problems are and what
// loading patterns should be used to fix them. However,
// as long as there is no alignment between dev/design
// and marketing teams, performance isn't going to sustain
// long-term. Study common complaints coming into customer
// service and see how improving performance can help
// relieve some of these common problems.</p>
// <p>Run performance experiments and measure outcomes —
// both on mobile and on desktop. It will help you build up
// a company-tailored case study with real data. Furthermore,
// using data from case studies and experiments published on
// WPO Stats can help increase sensitivity for business about
// why performance matters, and what impact it has on user
// experience and business metrics. Stating that performance
// matters alone isn't enough though — you also need to
// establish some measurable and trackable goals and observe them.</p>
//
// Weight: 100
//
// Styleguide: Typography

html {
  @include css-locks(font-size, $mq--mobile, $mq--desktop, $font-size--mobile, $font-size--desktop);
}

// Paragraphs
//
// Paragraphs are usualy used as body text.
//
// Markup:
// <p>This is a paragraph.</p>
//
// Weight: 101
//
// Styleguide: Typography.Paragraphs
body {
  font-size: ms(0);
  line-height: $line-height;
}

// Headings
//
// Headings are usually used as titles.
//
// Markup:
// <h1>This is a heading h1</h1>
// <h2>This is a heading h2</h2>
// <h3>This is a heading h3</h3>
// <h4>This is a heading h4</h4>
// <h5>This is a heading h5</h5>
// <h6>This is a heading h6</h6>
//
// Weight: 101
//
// Styleguide: Typography.Headings
@for $i from 1 through 6 {
  h#{$i} {
    font-size: ms(5 - $i);
    margin-top: ms(10 - $i);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  a {
    color: inherit;
    text-decoration: none;
  }
}

p {
  margin-top: ms(1);
}

// Code Block
//
// Code Blocks are usually used to display markup or code.
//
// Markup:
// <pre>
//   <code>font-size: rem(20px);</code>
// </pre>
//
// Weight: 102
//
// Styleguide: Typography.CodeBlock
code {
  line-height: 1;
}

::selection {
  background-color: lighten($color-alpha, 44%);
}