/*********************************
*    ThreeFlow Color Variables   *
**********************************/

// REGULAR
$tf-blue: #009;
$tf-green: #00b980;
$tf-red: #f92f37;
$tf-orange: #f7912a;
$tf-yellow: #ffea00;

// VARIANTS
//---- Light
$tf-light-blue: #eff3fd;
$tf-light-green: #e3f8f2;
$tf-light-red: #ffece9;
$tf-light-orange: #fff4ea;
$tf-light-yellow: #fffde1;

//---- Medium-Light
$tf-medium-light-blue: #a3a5f9;
$tf-medium-light-green: #85daba;

//---- Medium
$tf-medium-blue: #7a7ff5;
$tf-medium-green: #53b684;

//---- Darks
$tf-dark-blue: #006;
$tf-dark-green: #1a7848;
$tf-dark-yellow: #cdbf1d;

// GRAYS
$tf-dark-gray: #42474c;
$tf-medium-gray: #999;
$tf-light-gray: #c1c1c1;
$tf-extra-light-gray-1: #efefef;
$tf-extra-light-gray-2: #fafafa;

// BASE
$tf-black: #000;
$tf-white: #fff;

// STATE/Status colors
$tf-success: $tf-green;
$tf-success-light: $tf-light-green;
$tf-warning: $tf-orange;
$tf-warning-light: $tf-light-orange;
$tf-danger: $tf-red;
$tf-danger-light: $tf-light-red;

// dimensions
$tf-form-gutter: 24px;
$tf-form-half-gutter: 12px;
// Used for styling `.wt-button + .wt-button` meant to act as the margin-left for the `+ .wt-button` portion
// https://threeflow.slack.com/archives/CDZB763LP/p1616106034011200
$tf-btn-margin-large: 20px; // large button
$tf-btn-margin-medium: 15px; // medium button, text, text-icon
$tf-btn-margin-small: 4px; // icon