// =============================================================================
// TYPOGRAPHY
// =============================================================================
// weights
$font-weight-semilight: 200;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-extrabold: 800;

// spacement
$spacement-increment: 5px;
$spacement-xs: $spacement-increment;
$spacement-sm: $spacement-xs + $spacement-increment;
$spacement-md: $spacement-sm + $spacement-increment;
$spacement-lg: $spacement-md + $spacement-increment;
$spacement-xl: $spacement-lg + $spacement-increment;
$spacement-xlg: $spacement-xl + $spacement-increment;

// =============================================================================
// COLORS
// =============================================================================
$color-arrow-hover: #fff;
$color-white: #fff;
$color-old-price: #a7a7a7;
$color-black: #000;
$color-default: #f2f2f2;

$color-dark: #1d2127;
$color-dark-inverse: #FFF;

$hot-bg: #62b959;
$sale-bg: #e27c7c;

// Light Version
$light-bg: #FFF;

$color-muted: #999;

// =============================================================================
// TRANSITION
// =============================================================================
$transition: all 0.25s ease 0s;
//$image-transition: all 0.25s ease-out 0s;
$image-transition: opacity 0.3s ease-in-out 0s;
$btn-transition: opacity 0.6s ease-in-out 0s;

// =============================================================================
// Screen Sizes
// =============================================================================
$screen-normal: "(max-width: 991px)";
$screen-medium: "(max-width: 767px)";
$screen-small: "(max-width: 575px)";

// =============================================================================
// Box Shadows
// =============================================================================
$wrapper-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
$menu-wide-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
$menu-narrow-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
$sidebarmenu-wide-box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
$sidebarmenu-narrow-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);

$form-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04);
$table-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04);

$color-primary: #CCC;
$color-primary-inverse: #FFF;

$color-secondary: #E36159;
$color-secondary-inverse: #FFF;

$color-tertiary: #2BAAB1;
$color-tertiary-inverse: #FFF;

$color-quaternary: lighten($color-dark, 8%);
$color-quaternary-inverse: #FFF;

$color-success: #47a447;
$color-success-inverse: #FFF;

$color-warning: #ed9c28;
$color-warning-inverse: #FFF;

$color-danger: #d2322d;
$color-danger-inverse: #FFF;

$color-info: #5bc0de;
$color-info-inverse: #FFF;

// states list
$states: (primary $color-primary $color-primary-inverse) (success $color-success $color-success-inverse) (warning $color-warning $color-warning-inverse) (danger $color-danger $color-danger-inverse) (info $color-info $color-info-inverse) (dark $color-dark $color-dark-inverse);

@import "fontawesome_variables";
@import "elusive_icons_variables";