// SoSocial Variables
// SoSocial Swatches
$sosocial-orange:           #e48648;
$sosocial-light-orange:     #e3a56b;
$sosocial-red: #E36B6B;
$sosocial-earth: #574C41;
$sosocial-gold: #E3C77B;
$sosocial-facebook: #5a85b1;
$sosocial-twitter: #82c1cc;
$sosocial-tumblr: #576fb1;
$sosocial-snapchat: #e8e77f;
$sosocial-green: #a6c771;
$sosocial-warm-gray: #e3e0db;
$sosocial-warm-light-gray: #f1f0ec;
$sosocial-dark: #312b25;

// Brand Colors 
$brand: $sosocial-orange;
$brand-alt: $sosocial-light-orange;
// Brand Color Varients
$brand-light-50: lighten($brand, 50%);
$brand-dark-5: darken($brand, 5%);
$brand-dark-10: darken($brand, 10%);
$brand-dark-30: darken($brand, 30%);
$brand-dark-50: darken($brand, 50%);
$brand-dark-70: darken($brand, 70%);
// Base Colors
$white: #fff;
$black: #000;
$gray: #ccc;
$mid-gray: #ddd;
$dark-gray: #333;
$light-gray: #DDD;
$lightest-gray: #f7f7f7;
// Transparent Colors
$black-transparent-50: rgba(0,0,0,0.5);
$black-transparent-30: rgba(0,0,0,0.3);

// Base
$font-color: $sosocial-earth;
$sans-serif: 'Lato', sans-serif;
$monospace: 'Monaco', 'Consolas', 'Lucida Console', monospace;
$base-border-radius: 3px !default;
$base-line-height: 1.5em !default;
$base-spacing: 1.5em !default;
$base-accent-color: $brand !default;
$base-link-color: $base-accent-color !default;
$medium-screen: em(640) !default;
$base-font-color: $dark-gray !default;
$icon-bullet-size: 3.5em;
// Header
$header-height-S: 50px;
$header-height-L: 80px;
$nav-width-S: 260px;
$search-height-S: 50px;
$header-height-M: 80px;
$search-height-L: 120px;
// Breadbrumb
$breadcrumb-height: 2em;
// Footer
$medium-screen: em(640) !default;
$large-screen: em(860) !default;
$footer-background: $sosocial-earth;
$footer-color: white;
$footer-link-color: $sosocial-orange;
$footer-disclaimer-color: $light-gray;

// Switches
$switch-width: 60px;
$switch-padding: 2px;
$switch-height: 30px;
$switch-radius: 3px;
$knob-size: 25px;
$knob-radius: 3px;
$knob-width: $knob-size;

// Sign Up
$color-1: #f3cb6d; // yellow
$color-2: #444d65; // blue
$color-3: #fff; // body background color
$color-4: #e36767; // red
$color-5: #92c195; // green

// Breakpoints
   
$S:     480px;
$MS:    720px; 
$M:     768px;     
$L:     1170px;
$maxL:    $L - 1px;     

// Media Queries

@mixin MQ($canvas) {
  @if $canvas == S {
   @media only screen and (min-width: $S) { @content; } 
  }
  @else if $canvas == MS {
   @media only screen and (min-width: $MS) { @content; } 
  }    
  @else if $canvas == M {
   @media only screen and (min-width: $M) { @content; } 
  }
  @else if $canvas == L {
   @media only screen and (min-width: $L) { @content; } 
  }
  @else if $canvas == maxL {
   @media only screen and (max-width: $maxL) { @content; } 
  }
}

// Light Grid

@mixin column($percentage, $float-direction:left) {
  width: 100% * $percentage;
  float: $float-direction;
}

// REM Fallback

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

// Absolute Centering

@mixin center($xy:xy) {
  @if $xy == xy {
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    @include transform(translateX(-50%) translateY(-50%));
  }
  @else if $xy == x {
    left: 50%;
    right: auto;
    @include transform(translateX(-50%));
  }
  @else if $xy == y {
    top: 50%;
    bottom: auto;
    @include transform(translateY(-50%));
  }
}

// Border Radius

@mixin border-radius($radius:.25em) {
  border-radius: $radius;
}

// Font Rendering

@mixin font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}