$header-height: 64px;
$button-height: 44px;

$icon-size: 24px;
$font-size: 16px;

$border-radius: 4px;
$button-border-radius: 4px;

$normal: 400;
$semi-bold: 500;
$bold: 600;

$background-color: #efefef;
$container-background-color: #fff;

$border-color: rgba(0, 0, 0, 0.1);

$font-color-primary: #111;
$font-color-secondary: #999;

$disabled-color: rgba(0, 0, 0, 0.3);
$disabled-background-color: #eee;

$primary-color: #26abe2;
$primary-color-translucent: rgba($primary-color, 0.2);

$red-color: #f84d4f;
$red-color-translucent: rgba($red-color, 0.2);

$red-box-shadow: 0 10px 30px -6px #f84d4f;

$green-color: rgb(47, 194, 91);
$green-color-translucent: rgba($green-color, 0.2);

$grey-color-translucent: rgba(0, 0, 0, 0.05);

$box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);

// Tags

$green-tag: rgb(71, 160, 33);
$dark-blue-tag: rgb(31, 124, 234);
$red-tag: rgb(236, 30, 30);
$brown-tag: rgb(154, 117, 73);
$blue-tag: rgb(45, 139, 206);
$pink-tag: rgb(245, 61, 131);
$yellow-tag: rgb(232, 183, 72);

// Field Switching

$dispatched-background-color: rgba($dark-blue-tag, 0.15);
$dispatched-color: $dark-blue-tag;
$active-background-color: rgba($green-tag, 0.15);
$active-color: $green-tag;
$future-color: $pink-tag;
$instructed-color: $yellow-tag;
$instructed-external-color: $blue-tag;
$completed-color: $brown-tag;
$aborted-color: $red-tag;
