/* ==========================================================================
   Expend Basic style settings
   ========================================================================== */

/*
 * Set up the html
 *
 * 1. This is the base for al rem units
 */

html
  font-size: $baseFontSize /* 1 */

  +respond-to-width-beyond($xlGridBreakpoint)
    font-size: $xlFontSize

/*
 * Set up the body
 *
 * 1. Set font to lining figures
 */

body
  margin: 0

  color: $bodyText
  font-family: 'freight-sans-pro', sans-serif
  font-weight: book()
  line-height: 1.6

  font-feature-settings: 'lnum' /* 1 */

  +respond-to-width($smGridBreakpoint)
    padding-top: 60px

/**
 * 1. Correct the extra rendered space on the top with a negative margin
 */
h2
  margin: -15px 0 40px 0 /* 1 */
  color: $grey
  font-size: 1.5rem
  font-weight: light()
  line-height: 1.2

  a
    color: $grey
    text-decoration: none

  +respond-to-width($xsGridBreakpoint)
    margin-top: 0 /* remove correction */
    margin-bottom: $mobileBottomSpace

/**
 * All margin is at the bottom of a paragraph
 * This way a paragraph can be better aligned with non-paragraph objects
 *
 * 1. Optical correction
 */
p
  margin-top: 0

  &:last-child
    margin-bottom: -4px /* 1 */

  &.inline
    display: inline
    margin-bottom: 0

/**
 * Set font weight to semibold
 */
strong
  font-weight: semibold()

a
  color: $blue

ol
  padding-left: 1em

h3
  color: $darkBodyText