Shared

$max-width: rem(1040) !global;
// Defines max-width of page content. Used by .u-container utility class.

$grid-columns: 12 !global;
// Total number of grid columns. 
// This is an override to Neat's grid system which defaults to 8.

$container_padding: 20px;
// The left and right padding for page containers. 
// Used primarily by .u-container utility class.

$sm: 500px;
$md: 768px;
$lg: 1000px;
$xl: 1500px;
// Shorthand for the most common breakpoints of the site.

$xl-multiplier: 1.125;
// At the $xl breakpoint, content is scaled up according to this number.
// To see how this works, refer to the html{...} declaration in /base/typography.scss.

// Primary
$red: #af1e27;
$dark_red: darken( $red, 15% );

// Neutrals
$dark_gray: #5D615A;
$alt_gray: #58585A;
$medium_gray: #767676;
$light_gray: #D7D3CD;
$lighter_gray: #E0E0DF;
$lightest_gray: tint( $light_gray, 80% );

// Warms
$yellow: #F3C108;
$light_yellow: tint( $yellow, 70% );
$green: #ADC32B;
$light_green: tint( $green, 70% );
$dark_green: #5C6E0E;

// Neutrals
$tan: #9F9371;

// Cools
$navy: #041E4F;
$blue: #004675;
$light_blue: #00A7CE;
$lightest_blue: tint( $light_blue, 80% );
$teal: #3F8892;
$light_teal: tint( $teal, 50% );
$dark_teal: #0D474F;

$gotham: "Gotham SSm A", "Gotham SSm B", "Gotham", "Arial", sans-serif;
$gotham_narrow: "Gotham Narrow SSm A", "Gotham Narrow SSm B", "GothamNarrow-Book", "Arial", sans-serif;
$mercury: "Mercury SSm A", "Mercury SSm B", "Mercury", "Georgia", serif;
$font_code: "Menlo", monospace;
$font_pre: "Menlo", monospace;
$leading: 1.5rem;
$font_line_height_pre: 1.6rem;

// Media Queries
// Shorthand for media queries. Specify $size in px or em units.
@mixin media($size) {
  @media screen and (min-width: $size) {
    @content;
  }
}

// Overlays
// Uses the :before pseudo element to darken a container.
// Usually used in instances where there is text over image.
@mixin overlay-shaded {
  &:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(black, 0.45);
  @include transition(all 300ms ease);
 }

// Buttons
// Provides button styles to an element.
@mixin button {
  border: 1px solid $color_button_default;
  border-radius: 0;
  background-color: rgba( white, 0.25 );
  box-shadow: none;
  color: $color_button_default;
  display: inline-block;
  font-family: $gotham;
  font-weight: 500;
  font-size: rem(14);
  padding: 1.25em 2.5em;
  line-height: 1em;
  text-shadow: none;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  @include appearance(none);
  @include transition(all 300ms ease);
  &:hover, &:focus {
    border-color: $color_button_hover;
    background-color: $color_button_hover;
    color: white;
  }
  &:focus {
    outline: none;
  }
}

// Inverse Buttons
// Inverse colors for use on darker backgrounds
@mixin button--inverse {
 @include button;
 border-color: white;
 color: white;
 background-color: rgba( black, 0.5 );
 &:hover, &:focus {
 border-color: $color_button_hover;
 color: white;
 background-color: $color_button_hover;
 }
}

// Reset last child in grid
// $i: specify a child (e.g. 3) or a function (3n).
@mixin reset-omega($i) {
 &:nth-child( #{$i} ) { margin-right: flex-gutter($grid-columns); }
 &:nth-child( #{$i}+1) { clear: none; }
}
// For use with Neat column mixins. Resets the margin-right property for specified elements.
// This is particularly handy when you are changing the number of items per row at a 
// certain breakpoint. See the Neat docs for information on their grid mixins.
// http://neat.bourbon.io

@function color_contrast($color1, $color2) {
 $luminance1: color_luminance($color1) + .05;
 $luminance2: color_luminance($color2) + .05;
 $ratio: $luminance1 / $luminance2;

 @if $luminance2 > $luminance1 {
 $ratio: 1 / $ratio;
 }

 $ratio: round($ratio * 10) / 10;

 @return $ratio;
}