// ==========================================================================
// Variables
// ==========================================================================

// Colors
@gray-dark:                 #343f4a;
@gray:                      #55646b;
@gray-light:                #cbd0d3;
@gray-lighter:              #dbe3e8;
@off-white:                 #f2f5f7;

@brand-primary:             #1aafff;
@brand-secondary:           #02BD9B;

// Brands
@color-twitter:             #4BAAF4;
@color-youtube:             #cc181e;
@color-vimeo:               #19b7ed;

// Base
@body-background:           #fff;

// Type
@font-size-base:            16;
@font-size-small:           14;
@font-size-h1:              64;
@font-weight-base:          400;
@font-weight-bold:          500;

// Elements
@link-color:                @brand-primary;
@padding-base:              20px;
@arrow-size:                8px;

// Icons
@icon-size:                 18px;

// Breakpoints
@screen-sm:                 480px;
@screen-md:                 768px;

// Radii
@border-radius-base:        4px;
@border-radius-large:       6px;

// Examples
@example-width-audio:       520px;
@container-width:       	800px;