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

/**
 * CONTENTS
 *
 * COLORS
 * Brand Colors...............Globally-available variables and config
 * Neutral Colors.............Grayscale colors, including white and black
 *
 * 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) Main identifiable colors involved in creating the UI
 *    Feel free to add your brand's color palette here.
 */

/**
 * Neutral Colors
 * 1) Neutral colors are grayscale values used throughout the application
 */
$color-white: #fff;
$color-gray-02: #f9f9f9;
$color-gray-07: #eee;
$color-gray-13: #ddd;
$color-gray-27: #bbb;
$color-gray-50: #808080;
$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: #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: "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;





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

/**
 * Max Width
 */
$l-max-width: 60rem;
$l-max-width-narrow: 36rem;





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

/**
 * Spacing and offsets
 * 1) Used to space grids and body padding
 * 2) The width of the bullets, used to align list content.
 */

$space: 1rem;

$pad-compact: 0.3rem;
$pad-normal: 1rem; /* 1 */
$pad-comfortable: 1.4rem;

$space-bullet-offset: 1.6rem; /* 2 */





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

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





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

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





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

/**
 * Breakpoints used in media queries
 */
$bp-small: 24em;
$bp-small-2: 29.75em;
$bp-small-3: 39.8em;
$bp-med: 46.8em;
$bp-med-2: 48em;
$bp-large: 50em;
$bp-large-2: 56em;
$bp-xl: 62em;
