$--color-white: #FFF !default;
$--color-black: #060E14 !default;

$--color-neutral-1: #6E767D !default;
$--color-neutral-2: #A2ACB3 !default;
$--color-neutral-3: #D5DCE0 !default;
$--color-neutral-4: #F9F9FB !default;

$--color-primary: #2E6C99 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; // #437ba3
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; // #5889ad
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; // #6d98b8
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; // #82a7c2
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; // #97b6cc
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; // #abc4d6
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; // #c0d3e0
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; // #d5e2eb
$--color-primary-light-9: mix($--color-white, $--color-primary, 93%) !default; // #F0F4F7

$--color-secondary: #87BEE6 !default;

$--color-neutral-1-light: #F4F6F7 !default;
$--color-success: #36B348 !default;
$--color-warning: #FFAB20 !default;
$--color-danger: #DE2F2F !default;
$--color-info: $--color-neutral-1 !default;
$--color-all: #7874B4;
$--color-all-bg: #ECEBF5;
$--color-success-light: #EAF7EC;
$--color-primary-lighter: #E4EEF2;
$--color-danger-light: #fbeaea;

$--color-onesait-logo: #193b47;

/* Menu, Header & Main-V2-Jan-19
--------------------------*/
$--header-height: 64px;
$--header-padding: 16px;
$--header-mobile-padding: 8px;
$--main-nav-width: 240px;
$--main-nav-width-collapsed: 64px;
$--collapse-bottom-margin: 8px;
$--nav-collapse-bar-height: 52px;
$--main-content-height: calc(100vh - #{$--header-height});
$--nav-height: calc(100vh - #{$--header-height} - #{$--nav-collapse-bar-height} - #{$--collapse-bottom-margin});
$--main-nav-shadow: 0 4px 10px 0 rgba( $--color-black, .1 );
$--main-content-padding: 24px;

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


$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;

$size-xs: 9px;
$size-ms: 10px;
$size-md: 11px;
$size-ml: 12px;
$size-l: 14px;
$size-xl: 16px;
$size-2xl: 18px;
$size-3xl: 30px;

$grey: #D5DCE047;
$pink: #ff30b9;
$red: #DE2F2F19;
$lightYellow: #FFF4E3;
$yellow: #FFA617;

:export {
  gris: $grey;
  grisOscuro: $--color-neutral-1;
  rosa: $pink;
  rojo: $red;
  verdeClaro: $--color-success-light;
  verde: $--color-success;
  amarilloClaro: $lightYellow;
  amarillo: $yellow;
}