// -----------------------------------------------------------------------------
// Global Variables
// -----------------------------------------------------------------------------
// This stylesheet is for variables only.

// Anything other than variables will result in duplication of styles
// in every stylesheet that imports this file.

// -----------------------------------------------------------------------------
// Color palette
//
// Naming convention: Prefix with use case, followed by color name
// These variables are for daily use, make them easy to remember/reference
// -----------------------------------------------------------------------------

// Common colors
$white:                 #fff;
$off-white:             #fafafa;
$beige:                 #f5f4f0;
$blue:                  #1cafb5;
$yellow:                #f0b736;
$black:                 #2e2e2e;
$transparent:           transparent;

// Text colors
$t-black:               #404141;
$t-grey:                #535454;
$t-light-grey:          #6f6e69;
$t-yellow:              #f9c550;
$t-white:               #fff;

$link-blue:             #2dafb4;
$link-blue-hover:       #26c7cd;

// Background colors
$bg-white:              #fff;
$bg-off-white:          #fafafa;
$bg-beige:              #f5f4f0;
$bg-dark-beige:         #e2e0d8;
$bg-blue:               #19aeb4;
$bg-black:              #2e2e2e;

// Border colors
$border-grey:           #e5e5e5;
$border-dark-grey:      #cbcece;

// Button colors
$button-yellow:         #f0b736;
$button-yellow-hover:   #f9c550;

$button-blue:           #1cafb5;
$button-yellow-hover:   #f9c550;
$button-blue-border:    #1cafb5;

$button-grey:           #efede6;
$button-grey-hover:     #e5e4dc;
$button-grey-border:    #e9e8e0;

$button-blue:           #1cafb5;
$button-blue-hover:     #19bec5;

// Message & Alert colors
$msg-blue:              #1cafb5;
$msg-orange:            #f06236;
$msg-red:               #dd3737;

// Single use colors
// Listed separately to avoid clutter
$t-light-grey:          #6f6e69;
$t-slate:               #454545;
$t-storm:               #525252;

// -----------------------------------------------------------------------------
// Fonts stacks
// -----------------------------------------------------------------------------
$sans: Helvetica, Arial, sans-serif;

// Lato - 900 Black, 700 Bold, 400 Regular
$lato: 'Lato', $sans;


// -----------------------------------------------------------------------------
// Media Queries
// -----------------------------------------------------------------------------

$break-xs: 480px;
$break-md: 768px;
$break-lg: 1024px;
$break-xl: 1280px;

@mixin respond-to($media) {
    @if $media == xs {
        @media only screen and (max-width: $break-xs) { @content; }
    }
    @else if $media == sm {
        @media only screen and (min-width: $break-xs + 1) and (max-width: $break-md) { @content; }
    }
    @else if $media == md {
        @media only screen and (min-width: $break-md + 1) and (max-width: $break-lg) { @content; }
    }
    @else if $media == lg {
        @media only screen and (min-width: $break-lg + 1) and (max-width: $break-xl) { @content; }
    }
}

//Retina displays
$mq-retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx)';

@mixin retina {
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx) {
        @content;
    }
}