//// FIXED WIDTH SITE WIDTH
$fixed-site-width: 960px !default;

$screen-size-phone: 738px;
$screen-size-tablet: 930px;

//// RESPONSIVE SIZES
$responsive-large: 70rem !default;
$responsive-medium: 55rem !default;
$responsive-small: 45rem !default;
$responsive-xsmall: 35rem !default;

//// FONT SIZES
$font-size-root: 16px !default;

$font-size-xxsmall: 0.6rem !default;
$font-size-xsmall: 0.8rem !default;
$font-size-small: 1rem !default;
$font-size-medium: 1.2rem !default;
$font-size-large: 1.5rem !default;
$font-size-xlarge: 2rem !default;

$font-sizes:(xxsmall $font-size-xxsmall,
  xsmall $font-size-xsmall,
  small $font-size-small,
  medium $font-size-medium,
  large $font-size-large,
  xlarge $font-size-xlarge,
);

//// SPACINGS
// Note: If you're adding to this, make sure to update the value and the array
$spacing-xxsmall: 0.25rem !default;
$spacing-xsmall: 0.5rem !default;
$spacing-small: 1rem !default;
$spacing-medium: 2rem !default;
$spacing-large: 3rem !default;
$spacing-xlarge: 4rem !default;

$spacing-sizes: (xxsmall $spacing-xxsmall,
  xsmall $spacing-xsmall,
  small $spacing-small,
  medium $spacing-medium,
  large $spacing-large,
  xlarge $spacing-xlarge,
  none 0) !default;

//// BUTTON & INPUT SPACINGS
$field-padding-vertical: 15px !default;
$field-padding-horizontal: 17px !default;

//// COLORS
$white: #ffffff !default;

$brand-primary: #cd3939 !default;
$brand-secondary: #3d4144 !default;

$gray-base: #4f5c69 !default;

$gray-very-dark: darken($gray-base, 20%) !default;
$gray-dark: darken($gray-base, 15%) !default;
$gray-medium: $gray-base !default;
$gray-light: lighten($gray-base, 50%) !default;
$gray-very-light: lighten($gray-base, 60%) !default;

$color-positive: #00a388 !default;
$color-warning: #f78e52 !default;
$color-negative: #df5a49 !default;
$color-info: #3498d8 !default;

$colors: ('positive'$color-positive,
  'warning'$color-warning,
  'negative'$color-negative,
  'info'$color-info,
  'brand-primary'$brand-primary,
  'brand-secondary'$brand-secondary,
  'gray-very-dark'$gray-very-dark,
  'gray-dark'$gray-dark,
  'gray-medium'$gray-medium,
  'gray-light'$gray-light,
  'gray-very-light'$gray-very-light,
  'white'$white) !default;

//// CORNERS
$corner-radius-small: 5px !default;
$corner-radius-large: 15px !default;

//// FORMS
$form-field-height: 40px !default;
$form-field-bottom-spacing: 10px !default;

//// ANIMATION RELATED
$animation-duration: 350ms !default;
$animation-offset: 55px !default;