:root {
  /* color */
  --color-white: white;
  --color-success: #399918;
  --color-warning: #ff8225;
  --color-danger: #ff4c4c;
  --color-info: #0f67b1;

  /* border radius */
  --small-border-radius: 5px;
  --medium-border-radius: 5px;
  --large-border-radius: 10px;

  /* sizes */
  --navbar-height: 70px;
  --bread-crumb-height: 30px;
  --product-navigator-height: 70px;
  --single-product-sticky-footer: 50px;
  --sidebar-width: 270px;
  --main-page-max-width: 1300px;
  --header-height: 50px;
  --advanced-filters-width: 300px;

  /* shadows */
  --default-box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  /* font sizes */
  --small-font-size: 10px;
  --medium-font-size: 15px;
  --large-font-size: 20px;
  --huge-font-size: 40px;

  /* animation speed */
  --animation-speed: 0.35s;

  /* break points */
  --breakpoint-xl: 1140px;
  --breakpoint-lg: 960px;
  --breakpoint-md: 720px;
  --breakpoint-sm: 540px;

  /* default animation speed */
  --animation-speed: 0.1s;

  /* transition */
  --default-transition: all var(--animation-speed) ease;
}