/* ==========================================================================
   Breakpoints
   ========================================================================== */


/* Add breakpoints and tweakpoints here*/


/* To add custom breakpoints directly inside of a component,*/


/* see https://github.com/guardian/sass-mq#adding-custom-breakpoints*/


/* Name your breakpoints in a way that creates a ubiquitous language*/


/* across team members. It will improve communication between*/


/* stakeholders, designers, developers, and testers.*/

$mq-breakpoints: (mobile: 320px, mobileBig: 480px, phablet: 660px, tablet: 768px, desktop: 1024px, wide: 1366px);

/* Show the current breakpoint in the top right corner of the viewport:*/


/* see https://github.com/guardian/sass-mq#seeing-the-currently-active-breakpoint*/


/* Uncomment to activate during development*/


/*$mq-show-breakpoints: (mobile, mobileLandscape, phablet, tablet, desktop, wide);*/


/* ==========================================================================
   Colours
   ========================================================================== */


$black:                   #000000;
$nearly-black:            #333333;

$white:                   #ffffff;

$primary-color:           #03a9f4;/*blue*/
$secondary-color:         #f44336;/*red*/
$tertiary-color:          #4caf50;/*green*/

$grey:                    #cccccc;
$grey-lightest:           #f9f9f9;
$grey-light:              #eeeeee;
$grey-medium:             #999999;
$grey-dark:               #666666;
$grey-darkest:            #444444;

$shadow:                  rgba(18, 23, 28, .14);
$white-opacity:           rgba(255, 255, 255, .94);

$link-color:              #03a9f4;/*blue*/

$warning:                 #f44336;/*red*/
$success:                 #8bc34a;/*green light*/

/*UI colours*/

$pink:                    #e91e63;
$orange:                  #ff5722;
$blue:                    #2962ff;
$red:                     #f44336;
$green:                   #4caf50;
$green-light:             #8bc34a;
$cyan:                    #00bcd4;
$purple:                  #9c27b0;
$indigo:                  #9c27b0;
$teal:                    #009688;
$yellow:                  #ffc107;
$cyan:                    #00bcd4;

/*Greyscale colours*/
$grey:                    #bdbdbd;
$grey-lightest:           #f4f5f5;
$grey-light:              #e2e9ea;
$grey-medium:             #9e9e9e;
$grey-dark:               #616161;
$grey-darkest:            #424242;

$grey-50:                 #fafafa;
$grey-100:                #f5f5f5;
$grey-200:                #eeeeee;
$blue-grey-50:            #eceff1;
$blue-grey-100:           #cfd8dc;
$blue-grey-700:           #455a64;

$shadow:                  rgba(18, 23, 28, .14);
$white-opacity:           rgba(255, 255, 255, .94);
$white-translucent:       rgba(255, 255, 255, .2);

$primary-button-color:    #03a9f4;/*blue*/
$cta-button-color:        #4caf50;/*green*/
$alert-button-color:      #f44336;/*red*/
$light-button-color:      #999999;/*grey medium*/
$dark-button-color:       #444444;/*grey darkest*/

$primary-badge-color:     #03a9f4;/*blue*/
$secondary-badge-color:   #9c27b0;/*purple*/
$alert-badge-color:       #f44336;/*red*/
$success-badge-color:     #4caf50;/*green*/
$info-badge-color:        #00bcd4;/*cyan*/
$light-badge-color:       #eeeeee;/*grey light*/
$dark-badge-color:        #666666;/*grey dark*/

$primary-alert-color:     #b3e5fc;/*pale blue*/
$secondary-alert-color:   #fff9c4;/*pale yellow*/
$warning-alert-color:     #ffcdd2;/*pale red*/
$success-alert-color:     #c8e6c9;/*pale green*/
$info-alert-color:        #b2ebf2;/*pale cyan*/
$light-alert-color:       #eeeeee;/*grey light*/
$dark-alert-color:        #cccccc;/*grey*/


/* ==========================================================================
  BUTTONS
   ========================================================================== */

$button-padding:              5px 20px;
$button-padding-small:        3px 10px;
$button-border-rounded:       20px;
$button-font-size:            .75rem;
$button-font-size-small:      .625rem;
$button-text-style:           uppercase;
$button-height:               40px;
$button-height-small:         26px;
$button-max-width:            160px;


/* ==========================================================================
  ANIMATION
   ========================================================================== */

$animate-default: all .5s ease;
$animate-background: background-color .5s ease;


/* ==========================================================================
  MISC
   ========================================================================== */

$box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3);
$box-shadow-button: 0 1px 3px 0 rgba(0, 0, 0, .3);
$box-shadow-hover: 1px 2px 3px 0 rgba(0, 0, 0, .5);
$breadcrumb-divider:  '\003e';


/* ==========================================================================
   Fonts
   ========================================================================== */

$primary-font:       'Roboto', Helvetica, Arial, sans-serif;

$x-small-space:       .03rem;
$small-space:         .05rem;
$med-space:           .1rem;
$space:               .25rem;

$font-bold:           700;
$font-semi-bold:      500;
$font-regular:        400;
$font-light:          300;


/* PROJECT PATHS */

$project-path: '..';

/*$project-path: '/project';*/

/* USE EXAMPLE: background: url('#{$project-path}/images/sprites.png') -459px -396px no-repeat; */