// MEDIA QUERIES
$breakpoint: 768px;
$breakpoint--mobile: 480px;
$breakpoint--desktop: 1200px;



// GRID
$container-width: 45rem;
$container-width--medium: 93rem;
$container-width--large: 120rem;
$gutter: 1.5rem;



// SIZES
$border-radius: 2px;



// COLORS
// accent
$main: #008CCD;
$secondary: #8BBF36;

// grays
$grey--dark: #231F20; // text color from logo: #444C4F
$grey--medium: #A8A8A8;
$grey--light: #EFEEEE;

// messages
$error: #F44336;
$warning: #FF9800;
$success: $secondary;

// charts
$chart-color1: #f44336;
$chart-color2: #9C27B0;
$chart-color3: #3F51B5;
$chart-color4: #03A9F4;
$chart-color5: #009688;
$chart-color6: #8BC34A;
$chart-color7: #FFC107;
$chart-color8: #FF5722;
$chart-color9: #795548;
$chart-color10: #607D8B;



// FONTS
$font-family--heading: 'Poppins', sans-serif;
$font-family--body: 'Muli', sans-serif;
$font-base-size: 18; // in pixels.
$font-base-line-height: 1.5; // how large the line height is as a multiple of font size
$font-leading: $font-base-line-height * 1rem;
$font-scale: 1.333; // Rate of growth for headings



// EASING
$easing: cubic-bezier(0, 0.5, 0.5, 1);
$easing--medium: cubic-bezier(.835,-.005,.06,1);
$easing--long: cubic-bezier(0.4, 0, 0.2, 1);