$header: "Sanchez", helvetica, arial, sans-serif;
$subheader: "Lato", helvetica, arial, sans-serif;
$body: "Source Sans Pro", georgia, serif;
$code: "Source Code Pro", Menlo, Monaco, Consolas, monospace;

$dark: hsl(210, 10%, 25%);
$darker: hsl(210, 20%, 10%);
$light: hsl(0, 0%, 100%);
$gray-10: mix($dark, $light, 10%);
$gray-20: mix($dark, $light, 20%);
$gray-30: mix($dark, $light, 30%);
$gray-40: mix($dark, $light, 40%);
$gray-50: mix($dark, $light, 50%);
$gray-60: mix($dark, $light, 60%);
$gray-80: mix($dark, $light, 80%);

$text: mix($light, #000, 20%);

$code-color: hsl(210, 20%, 40%);
$code-bg:    hsl(210, 20%, 98%);

$link:        hsl(200, 60%, 50%);
$link-hover:  hsl(210, 100%, 80%);
$link-dark:   hsl(210, 60%, 20%);
$link-glow:  hsla(210, 100%, 50%, 0.4);

$core-link:        hsl(150, 70%, 40%);
$core-link-hover:  hsl(130, 70%, 70%);
$core-link-dark:   hsl(160, 60%, 25%);
$core-link-glow:  hsla(130, 90%, 50%, 0.4);

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body, code, h1, h2, h3, p, pre {
  margin: 0;
  padding: 0;
}

body {
  background: $light;
  color: $text;
  font: 16px/25px $body;
}

.page {
  margin: 0 auto;
  width: 800px;

  // Clear contents.
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.main-column {
  position: relative;
  width: 560px;
}

header {
  text-shadow: 0 1px 1px $darker;

  .page {
    height: 120px;
  }

  background: $dark;
  border-bottom: solid 1px $darker;

  h1 {
    position: absolute;
    left: 0;
    top: 63px;
    padding: 0;
    font: 400 48px $header;
    letter-spacing: 2px;
  }

  h2 {
    position: absolute;
    right: 0;
    top: 72px;
    padding: 0;
    font: 500 13px $subheader;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: $gray-50;
  }

  a {
    color: $gray-20;
  }

  a:hover {
    color: $link-hover;
    text-shadow: 0 0 6px $link-glow;
  }
}

nav {
  float: right;
  width: 160px;
  padding-top: 110px;

  h2 {
    color: $gray-30;
    font: 500 11px $subheader;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
  }

  ul {
    padding: 0;
    margin: 6px 0 20px 0;
  }

  li {
    font: 16px $body;
    color: $gray-30;
    list-style-type: none;
    margin: 0 0 4px 0;
  }
}

h1 {
  padding-top: 30px;
  font: 500 36px/60px $header;
  color: $link;
}

h2 {
  font: 500 24px $header;
  margin: 24px 0 0 0;
  color: $link;
}

h3 {
  font: 20px $body;
  margin: 24px 0 0 0;
  color: $link;
}

a {
  color: $link;
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
  outline: none;
}

main {
  @extend .main-column;
  padding-top: 12px;
}

a:hover {
  color: $link-dark;
}

.header-anchor {
  color: $light;
}

h2:hover > .header-anchor,
h3:hover > .header-anchor {
  color: $gray-10;
}

h2:hover > .header-anchor:hover,
h3:hover > .header-anchor:hover {
  color: $link-dark;
}

p, li {
  margin: 10px 0;
}

p + p {
  margin-top: 20px;
}

code, pre {
  color: $code-color;
  font: 13px $code;
  background: $code-bg;
  border-radius: 2px;
  border: solid 1px hsl(200, 20%, 95%);
  border-bottom: solid 1px hsl(200, 20%, 90%);
}

code {
  padding: 1px 2px;
  white-space: nowrap;
}

pre {
  margin: 10px 0;
  line-height: 18px;
  padding: 10px;

  // Scroll horizontally if not wide enough.
  overflow: auto;
}

footer {
  margin-top: 40px;
  padding: 20px 0 40px 0;
  font: 14px $body;
  background: $dark;
  color: $gray-20;
  border-top: solid 1px $darker;
  text-align: center;

  text-shadow: 0 1px 1px $darker;

  a {
    color: $link-hover;
  }

  a:hover {
    color: $link;
  }
}

// Syntax highlighting.
.codehilite pre {
  // Comments.
  span.c1, span.cm { color: mix($code-color, $code-bg, 60%); }

  // Keywords.
  span.k, span.kd, span.kc  { color: hsl(210, 80%, 60%); }

  // Numbers.
  span.m, span.mi { color: hsl(90, 80%, 35%); }

  // Strings.
  span.s, span.s2  { color: hsl(40, 80%, 50%); }
  span.se          { color: hsl(30, 80%, 50%); }
}

// Have a different primary color for the core library docs.
body.core {
  header {
    a {
      color: $gray-20;
    }

    a:hover {
      color: $core-link-hover;
      text-shadow: 0 0 6px $core-link-glow;
    }
  }

  a {
    color: $core-link;
  }

  a:hover {
    color: $core-link-dark;
  }

  .header-anchor {
    color: $light;
  }

  main {
    h1, h2, h3 {
      color: $core-link;
    }

    h2:hover > .header-anchor:hover,
    h3:hover > .header-anchor:hover {
      color: $core-link-dark;
    }
  }

  footer {
    a {
      color: $core-link-hover;
    }

    a:hover {
      color: $core-link;
    }
  }
}

// Bar charts on the performance page.
table.chart {
  width: 100%;
  padding-left: 25px;

  td, th {
    line-height: 14px;
    margin: 0;
    padding: 0;
  }

  th {
    font-size: 14px;
    text-align: left;
    width: 100px;
  }

  .chart-bar {
    display: inline-block;
    font: 13px $body;
    color: $light;
    background: $link;
    border-bottom: solid 1px $link-dark;
    text-align: right;
    border-radius: 2px;
  }

  .chart-bar.wren {
    background: mix($link, $link-dark, 30%);
    border-bottom: solid 1px $link-dark;
  }
}

@media only screen and (max-width: 839px) {
  // 36 pixel columns.
  .page { width: 720px; }
  nav { width: 144px; }
  .main-column { width: 504px; }
}

@media only screen and (max-width: 759px) {
  // 32 pixel columns.
  .page { width: 640px; }
  nav { width: 128px; }
  .main-column { width: 448px; }
}

@media only screen and (max-width: 679px) {
  // 28 pixel columns.
  .page { width: 560px; }
  nav { width: 112px; }
  .main-column { width: 392px; }

  header h2 {
    font-size: 12px;
    letter-spacing: 1px;
  }
}

@media only screen and (max-width: 639px) {
  .page { width: 100%; }

  nav {
    float: none;
    width: 100%;
    padding: 10px 10px;
    margin: 0;
    background: $gray-10;
    text-align: center;

    section {
      display: inline-block;
      vertical-align: top;
      text-align: left;
      width: 30%;
    }
  }

  .main-column {
    padding: 0 20px;
    width: 100%;
  }

  header {
    h1 {
      position: relative;
      top: 10px;
      left: 0;
      text-align: center;
    }

    h2 {
      position: relative;
      top: 0;
      right: 0;
      text-align: center;
      font-size: 13px;
      letter-spacing: 2px;
    }
  }

  main {
    float: none;
    width: 100%;
  }

  pre {
    font-size: 13px;
  }

  footer {
    padding: 20px 20px 40px 20px;
  }
}