/*------------------------------------*\
    #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-primary:           #10455B;
$color-brand-primary-dark:      #082430;
$color-brand-secondary:         #2AA1AF;
$color-brand-secondary-dark:    #217D88;

/**
 * Neutral Colors
 * 1) Neutral colors are grayscale values used throughout the UI
 */
$color-neutral-white:           #fff;
$color-neutral-gray-02:         #f9f9f9;
$color-neutral-gray-07:         #eee;
$color-neutral-off-white:         #ddd;
$color-neutral-mercury:         #e8e8e8;
$color-neutral-iron:            #cfd2d6;
$color-neutral-gray-light:      #9a9c9f;
$color-neutral-gray:            #666;
$color-neutral-gray-dark:       #43494f;
$color-neutral-black:           #333;

/**
 * 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:           #b12a0b;
$color-utility-error-light:     #fdded8;
$color-utility-success:         #03804d;
$color-utility-success-light:   #d4f3e6;
$color-utility-warning:         #a59b15;
$color-utility-warning-light:   #fffecf;





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

/**
 * Font Family
 */
$font-family-primary:           'Montserrat', "HelveticaNeue", "Helvetica", "Arial", sans-serif;
$font-family-secondary:         'Crimson Text', serif;


/**
 * Font Sizing
 */
$font-size-sm:                  0.75rem;
$font-size-sm-2:                0.85rem;
$font-size-med:                 1rem;
$font-size-med-2:               1.2rem;
$font-size-large:               2rem;
$font-size-xl:                  3rem;
$font-size-xxl:                 4rem;

/**
 * Line Height
 */
$line-height-sm:                0.8;
$line-height-sm-2:              0.9;
$line-height-med:               1;
$line-height-med-2:             1.2;
$line-height-large:             1.6;
$line-height-xl:                1.8;





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

/**
 * Max Width
 */
$l-max-width:                   80rem !default;
$l-max-width-narrow:            45rem !default;
$l-linelength-width:            36rem !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;





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

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

/**
 * 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-small-2:                    35em;
$bp-med:                        47em;
$bp-large:                      60em;
$bp-xl:                         70em;