$gutter: 30px;
$container-gutter-mobile: $gutter;
$container-gutter-tablet: 50px;
$container-gutter-desktop: 70px;

// grid
$grid-column-count: 12;
$grid-baseline: 16px;

// page dimensions
$page-width: 1290px;
$page-limit: $page-width + ($container-gutter-desktop * 2);

// Fonts
$font-family: 'Poppins', sans-serif;
$font-heading: 'Avant Garde Gothic ITC', sans-serif;
$font-size: 16px;
$font-size-min: 13px;
$font-color: #000;
$font-color-light: #777;
$font-color-dark: #111;
$line-height: 1.5;

// Main colors
$color-yellow: #ffd500;
$color-orange: #ff6a00;
$color-pink: #fe3c72;
$color-viola: #b62684;
$color-green: #20c420;
$color-ocean: #00e0aa;
$color-purple: #a100ff;
$color-blue: #00c5f1;

// Greyscale colors
$color-white: #fff;
$color-grey100: #f5f5f5;
$color-grey200: #eee;
$color-grey300: #e0e0e0;
$color-grey400: #bdbdbd;
$color-grey500: #9e9e9e;
$color-grey600: #757575;
$color-grey700: #616161;
$color-grey800: #424242;
$color-grey900: #212121;
$color-black100: #000;

// Color short
$color-dark: $color-black100;
$color-black: $color-black100;
$color-primary: $color-pink;
$color-placeholder: $color-grey400;

// Secondary colors
$color-warning: #f7213a;
$color-success: #76c51a;
$color-attention: #ff9733;

// Colors
$color-grey: #d0d0d0;

$color-zd-gray: #e9ebed;
$color-zd-border: #d8dcde;
$color-zd-button-light: #5293c7;
$color-zd-button-dark: #1f73b7;
$color-zd-font: #2f3941;
$color-zd-font-light: #68737d;

$colors: (
  'yellow': $color-yellow,
  'orange': $color-orange,
  'pink': $color-pink,
  'viola': $color-viola,
  'green': $color-green,
  'ocean': $color-ocean,
  'purple': $color-purple,
  'blue': $color-blue,
  'transparent': transparent,
  'white': $color-white,
  'grey': $color-grey500,
  'dark': $color-dark,
);

// Timings
$transition-enter: 200ms;
$transition-leave: 500ms;

// Custom break point (Min)
$min-2000: 2000px;
$min-1800: 1800px;
$min-1700: 1700px;
$min-1600: 1600px;
$min-1440: 1440px;
$min-1280: 1280px;
$min-1200: 1200px;
$min-1080: 1080px;
$min-1024: 1024px;
$min-960: 960px;
$min-840: 840px;
$min-768: 768px;
$min-720: 720px;
$min-640: 640px;
$min-600: 600px;
$min-560: 560px;
$min-540: 540px;
$min-480: 480px;
$min-420: 420px;
$min-375: 375px;
$min-360: 360px;

// Custom break points (Max)
$max-1700: 1699px;
$max-1440: 1439px;
$max-1280: 1279px;
$max-1200: 1199px;
$max-1080: 1079px;
$max-1024: 1023px;
$max-960: 959px;
$max-840: 839px;
$max-768: 767px;
$max-720: 719px;
$max-640: 639px;
$max-600: 599px;
$max-540: 539px;
$max-480: 479px;
$max-420: 419px;
$max-375: 374px;
$max-360: 359px;

// Predefined breakpoints
$min-mobile: $min-420;
$min-tablet: $min-720;
$min-desktop: $min-1080;
$min-desktopXL: $min-1440;

$max-mobile: $max-420;
$max-tablet: $max-720;
$max-desktop: $max-1080;
$max-desktopXL: $max-1440;

// Forms
$forms-height: 60px;
$forms-height-mobile: 40px;

// Segment
$segment-padding-mobile: $gutter * 3;
$segment-padding: 200px; //percentage-based segments spacing

// Sticky bar
$sticky-height: 110px;
$sticky-height-mobile: 60px;

// Product filter bar
$filter-height: 110px;

// Custom breakpoint for checkout layout
$min-checkout: $min-1024;

// Vertical scaling values.
// remove this map to disable vertical scaling
// value 1 = height breakpoint, value 2 = multiplier

/* $scale: (
  (920px, 0.975),
  (800px, 0.95),
  (690px, 0.925),
); */