// -----------------------------------------------------------------------------
// 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
// -----------------------------------------------------------------------------

// =============================================
// Brand / Base Colors
// =============================================

// Usually not used directly in Sass partials.
// Only used to define context-based color vars in this file.
$blue:                  #68c8c7;

// Text

$t-black:               #000;
$t-white:               #fff;
$t-red:                 #df280a;

$t-color-text:          #363636;
$t-color-head:          #000000;
$t-color-head-blue:     $blue;

$link-blue:             $blue;
$link-blue-hover:       $blue;

// Background colors
$bg-black:              #000;
$bg-white:              #fff;
$bg-off-white:          #fafafa;
$bg-beige:              #f5f4f0;
$bg-dark-beige:         #e2e0d8;
$bg-blue:               #78cccc;

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

// Message & Alert colors
$c-msg-success:         $link-blue;
$c-msg-notice:          #f06236;
$c-msg-error:           #df280a;

// -----------------------------------------------------------------------------
// Typography
// -----------------------------------------------------------------------------
$sans: Helvetica, Arial, sans-serif;

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

$f-size-default-text: 16px;
$f-size-default-text-s: 13px;
$f-size-default-text-xs: 12px;

$f-base-line-height: 1.5;

// -----------------------------------------------------------------------------
// 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;
    }
}