// Set border-box on all the elements!
* {
  box-sizing: border-box;
}

// Base HTML elements
html {
  color: $base-font-color;
  font-family: $base-font-family;
  font-weight: $weight-normal;
  font-size: $base-font-size;
  line-height: $unitless-line-height;
}

body {
  width: 100%;
  background: $base-background-color;
  color: $base-font-color;
  font-family: $font-proxima-nova;
  font-size: $font-regular;
  font-weight: $weight-normal;
  line-height: $unitless-line-height;
}

// Inline Elements
//
// Tags for inline text elements are given default styles. Adjacent
// paragraphs are given top margin spacing, and headings following paragraph
// text have increased spacing.
//
// Markup:
//   <p>DoSomething.org <strong>makes the world suck less</strong>. One of the <mark>largest orgs
//   for young people and social change</mark>, our members tackle campaigns that impact every cause,
//   from poverty to violence to the environment to <em>literally</em> everything else.<sup>1</sup>
//   Any cause, anytime, anywhere. *mic drop*</p>
//   <p>This is a <a href="#">link</a>, and a <a href="#" class="secondary">secondary link</a>.</p>
//
// Styleguide Base - Inline Elements
p, ul, ol {
  font-size: $font-regular;

  // Apply base spacing between adjacent paragraphs, and
  // headings that follow paragraph text.
  + p, + ul, + ol {
    margin-top: $base-spacing;
  }

  + h1, + h2, + h3, + h4, + h5, + h6 {
    margin-top: $base-spacing * 2;
  }
}

// Links!
//
// Styleguide Base - Links
a {
  color: $blue;
  font-weight: $weight-sbold;
  text-decoration: none;

  &:hover {
    color: lighten($blue, $tint);
    text-decoration: underline;
  }

  &:active {
    color: darken($blue, $tint);
  }

  &.secondary {
    color: $med-gray;
    font-weight: $weight-normal;
    text-decoration: underline;
  }
}


// By default, images should not break out of their containers.
//
// Styleguide Base - Images
img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
}

// Emphasized content, displayed with a bold font.
//
// Styleguide Base - Bold
strong, b {
  font-weight: $weight-sbold;
}

// Emphasized content, displayed with italicized font.
//
// Styleguide Base - Italics
em {
  font-style: italic;
}

// Emphasized content, displayed with a highlighted effect.
//
// Styleguide Base - Highlighted Text
mark {
  background: #fdfbbd;
}

// A fragment of computer code
//
// Styleguide Base - Code
code {
  font-family: "Menlo", "Consolas", "Courier New", serif;
  font-size: 0.8em;
}

// Superscript is used for special markup, such as footnotes.
//
// Styleguide Base - Superscript
sup {
  position: relative;
  top: -0.5em;
  font-size: 0.6em;
  padding: 0;
  line-height: 0;
  vertical-align: baseline;
}