/*------------------------------------*\
    #VARIABLES
\*------------------------------------*/

/**
 * CONTENTS
 *
 * COLORS
 * Brand Colors...............Globally-available variables and config
 * Neutral Colors.............Grayscale colors, including white and black
 * Utility Colors.............Info, Warning, Error, Success
 *
 * TYPOGRAPHY
 * Font Families..............The fonts used in the design system
 * Sizing.....................Font sizing
 *
 * LAYOUT
 * Max-widths.................Maximum layout container width
 *

 * SPACING
 * Spacing defaults...........Spacing between elements
 *
 * BORDERS
 * Border Width...............Border thicknesses
 * Border Radius..............Border radius definitions
 *
 * ANIMATION
 * Animation Speed............Transition/animation speed variables
 * Animation easing...........Easing variables
 *
 * BREAKPOINTS
 * Breakpoints................Global breakpoint definitions
 */

 /*------------------------------------*\
     #COLORS
 \*------------------------------------*/

/**
 * Brand Colors
 * 1) Brand=specific colors
 */
$color-brand-blue: #005ff1;
$color-brand-blue-dull: #6a7ba7;
$color-brand-blue-dark: #3a1c66;

$color-brand-blue-gradient: linear-gradient(to bottom, #3a1c66 60%, #0075AE 100%);

/**
 * TODO: Neutral Colors
 * 1) Neutral colors are grayscale values used throughout the UI
 */
 $color-white: #FFFFFF;
 $color-neutral-01: #444444;
 $color-neutral-02: #595959;
 $color-neutral-03: #999999;
 $color-neutral-04: #b5b5b5;
 $color-neutral-05: #d9d9d9;
 $color-neutral-06: #f2f2f2;
 $color-neutral-07: #f8f9fb;
 $color-black: #000;

/**
 * Neutral Colors
 * 1) Neutral colors are grayscale values used throughout the UI
 */
$color-white: #fff;
$color-gray-02: #f8f9fb;
$color-gray-07: #eee;
$color-gray-13: #ddd;
$color-gray-15: #d9d9d9;
$color-gray-20: #d9d9d9;
$color-gray-27: #bbbbbb;
$color-gray-40: #999999;
$color-gray-50: #808080;
$color-gray-56: #707070;
$color-gray-60: #666;
$color-gray-73: #444;
$color-gray-93: #131313;
$color-black: #000;

/**
 * Utility Colors
 * 1) Utility colors are colors used to provide feedback, such as alert messages,
 *    form validation, etc.
 */
$color-utility-info: #0192d0;
$color-utility-info-light: #d3f2ff;
$color-utility-error: #f54f4f;
$color-utility-error-light: #fdded8;
$color-utility-success: #53c101;
$color-utility-success-light: #d4f3e6;
$color-utility-warning: #a59b15;
$color-utility-warning-light: #fffecf;





/*------------------------------------*\
    #TYPOGRAPHY
\*------------------------------------*/

/**
 * Font Family
 */
 /**
  * Font Family
  */
$font-primary: "HelveticaNeue", "Helvetica", "Arial", sans-serif;


/**
 * Font Sizing
 */

$font-size-tiny: 0.65rem;
$font-size-sm: 0.75rem;
$font-size-sm-2: 0.85rem;
$font-size-med: 1rem;
$font-size-med-2: 1.2rem;
$font-size-large: 1.4375rem;
$font-size-xl: 3rem;

/**
 * Line Height
 */
$line-height: 1.5;

$font-size-h1: 48px !default;
$font-size-h2: 36px !default;
$font-size-h3: 27px !default;
$font-size-h4: 19px !default;





/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/

/**
 * Max Width
 */
$l-max-width: 78.125rem !default;
$l-linelength-width: 44rem !default;





/*------------------------------------*\
    #SPACING
\*------------------------------------*/

/**
 * Spacing and offsets
 * 1) Used to space grids and body padding
 */

$spacing: 1rem;
$spacing-small: round(0.5 * $spacing);
$spacing-large: round(2 * $spacing);





/*------------------------------------*\
    #BORDERS
\*------------------------------------*/

/**
 * Border
 */
 $border-thickness: 1px;

/**
 * Border radius
 */
$border-radius: 4px;




/*------------------------------------*\
    #BOX SHADOWS
\*------------------------------------*/

/**
 * Default Box Shadow
 */
$box-shadow: 0 10px 7px -5px rgba(0, 0, 0, .08);





/*------------------------------------*\
    #ANIMATION
\*------------------------------------*/

/**
 * Transition Speed
 */
$anim-fade-quick: 0.15s;
$anim-fade-long: 0.4s;

/**
 * Transition Ease
 */
$anim-ease: ease-out;





/*------------------------------------*\
    #BREAKPOINTS
\*------------------------------------*/

/**
 * Breakpoints used in media queries
 * 1) These are not the only breakpoints used, but they provide a few defaults
 */
$bp-small: 28em;
$bp-med: 47em;
$bp-large: 60em;
$bp-xl: 70em;
