$--screen-xs: 320px !default;
$--screen-sm: 768px !default;
$--screen-md: 1024px !default;
$--screen-lg: 1440px !default;

$--screen-xs-max: ($--screen-sm - 1) !default;
$--screen-sm-max: ($--screen-md - 1) !default;
$--screen-md-max: ($--screen-lg - 1) !default;

$mainFont: 'Segoe-UI';
$--size-base: 4px;



// Heading 1
$--h1-margin: 0 0 $--size-base * 12;
// Heading 2
$--h2-margin: $--size-base * 12 0 $--size-base * 6;
// Heading 3
$--h3-margin: 0 0 $--size-base * 4;
// Heading 4
$--h4-margin: 0 0 $--size-base * 4;
// Paragraph
$--p-margin: 0 0 $--size-base * 6;
// List
$--list-margin: 0 0 $--size-base * 6;

// Shadows
$box-shadow-main: 0 10px 20px 0 rgba(128, 144, 160, 0.1), 0 2px 6px 0 rgba(128, 144, 160, 0.2);
$box-shadow-hover: 0 4px 10px 0 rgba(128, 144, 160, 0.1), 0 0 1px 0 rgba(128, 144, 160, 0.81);


// Border
$border-radius: 3px;



// TEXT
// Body X
$--body-x-font-size: 18px;
$--body-x-line-height: 24px;
$--body-x-font-weight: normal;
$--body-x-letter-spacing: 0px;
// Body L
$--body-l-font-size: 16px;
$--body-l-line-height: 24px;
$--body-l-font-weight: normal;
$--body-l-letter-spacing: 0px;
// Body S
$--body-s-font-size: 13px;
$--body-s-line-height: 19px;
$--body-s-font-weight: normal;
$--body-s-letter-spacing: 0px;
// Body XS
$--body-xs-font-size: 11px;
$--body-xs-line-height: 14px;
$--body-xs-font-weight: normal;
$--body-xs-letter-spacing: 0px;

// Heading 1
$--h1-font-size: 48px;
$--h1-line-height: 48px;
$--h1-font-weight: 600;
$--h1-letter-spacing: 0px;
$--h1-font-size-large: 72px;
$--h1-line-height-large: 72px;
// Heading 2
$--h2-font-size: 24px;
$--h2-line-height: 30px;
$--h2-font-weight: normal;
$--h2-letter-spacing: 0.5px;
$--h2-font-size-large: 32px;
$--h2-line-height-large: 34px;
// Heading 3
$--h3-font-size: 18px;
$--h3-line-height: 24px;
$--h3-font-weight: 600;
$--h3-letter-spacing: 0.5px;
$--h3-font-size-large: 24px;
$--h3-line-height-large: 30px;
// Heading 4
$--h4-font-size: 14px;
$--h4-line-height: 21px;
$--h4-font-weight: bold;
$--h4-letter-spacing: 0.5px;
$--h4-font-size-large: 14px;
$--h4-line-height-large: 21px;

//Price big
$--price-big-font-size:18px;
$--price-big-line-height: 24px;
$--price-big-font-weight: bold;
$--price-big-letter-spacing: 0.5px;

//price small
$--price-small-font-size:14px;
$--price-small-line-height: 21px;
$--price-small-font-weight: bold;
$--price-small-letter-spacing: 0.5px;



$--container-sm: 640px !default;
$--container-md: 976px !default;
$--container-lg: 1312px !default;




$--color-primary: #5aa0f1 !default;
$--color-focus: #0059be !default;
$--color-dark: #3b87df !default;
$--color-light: #79b7ff !default;
$--color-baby: #b3d6ff !default;
$--color-pastel: #d6e7fb !default;

$--color-disabled: #eaecef !default;

$--color-white: #ffffff !default;
$--color-text: #3c4a5a;
$--color-grey: #697789;
$--color-silver: #d5d9e0;
$--color-warmtext: #999999;
$--color-buttonText: $--color-white !default;

$--color-error: #ff6779;
$--color-error-hover: lighten($--color-error, 10%);
$--color-error-active: darken($--color-error, 10%);
$--color-error-focus: darken($--color-error, 20%);

$--color-success: #2ab900 !default;
$--color-warning: #f5a623 !default;


$--border-radius: 3px;


$--button-mini-fontsize: 13px;
$--button-mini-lineheight: 16px;
$--button-mini-letterspacing: 1px;

$--font-icon: 'instore-icons';











/* Element Chalk Variables */

/* Transition
-------------------------- */
$--fade-linear-transition: opacity 200ms linear !default;
$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;

/* Colors
-------------------------- */
$--color-black: #000 !default;

/* Background
-------------------------- */
$--background-color-base: #f5f6fa !default;

/* z-index
-------------------------- */
$--index-top: 1000 !default;


/* Break-point
--------------------------*/
$--sm: 768px !default;
$--md: 992px !default;
$--lg: 1200px !default;
$--xl: 1920px !default;

$--breakpoints: (
  'xs' : (max-width: $--screen-xs-max),
  'sm' : (min-width: $--screen-sm),
  'md' : (min-width: $--screen-md),
  'lg' : (min-width: $--screen-lg)
);

$--breakpoints-spec: (
  'xs-only' : (max-width: $--screen-xs-max),
  'sm-and-up' : (min-width: $--screen-sm),
  'sm-only': "(min-width: #{$--screen-sm}) and (max-width: #{$--screen-sm-max})",
  'sm-and-down': (max-width: $--screen-sm-max),
  'md-and-up' : (min-width: $--screen-md),
  'md-only': "(min-width: #{$--screen-md}) and (max-width: #{$--screen-md-max})",
  'md-and-down': (max-width: $--screen-md-max),
  'lg-and-up' : (min-width: $--screen-lg)
);