$hue: -42;
$desaturate: 20%;

@function transform2($color) {
  //$color: saturate($color, 10%);
  $color: desaturate($color, 100%);
  @return($color);
};

$black-color: transform2(#000);
$white-color: transform2(#fff);
$border-color: transform2(#f4f4f4); //border

//fill
$blue-color-1: #252525; //dark-dark
$blue-color-2: #2e2e2e; //dark
$blue-color-3: #4C4C4C; //contrast2
$blue-color-5: transform2(#76849a); //top dropdown border
$blue-color-9: transform2(#ecf2f6); //background, top dropdown text
$blue-color-10: transform2(#f6fafc); //contrast

//text
$blue-color-4: transform2(#6f7e95); //text
$blue-color-7: transform2(#c0cad8); //light side
$blue-color-8: transform2(#d0dbe6); //dim color, secondary button
$blue-color-11: transform2(#c0d4e8); //top color

$contrast-color: #E0744B;
$contrast-dim-color: transparentize($contrast-color, 0.25);
$contrast2-color: #E4BF62;

$success-color-1: transform2(#8ecb8e);
$success-color-2: transform2(#c9eaca);

$info-color-1: transform2(#bebe92);
$info-color-2: transform2(#e8e8bd);

$selected-color-1: #e5e2a5;
$selected-color-2: #fffcc0;

$warning-color-1: transform2(#dba4a4);
$warning-color-2: transform2(#f0dada);
$warning-color-3: transform2(#c14747);


@function transform($color) {
  $color: saturate($color, 10%);
  @return($color);
};

@debug "$black-color: " + transform($black-color) + ";";
@debug "$white-color: " + transform($white-color) + ";";
@debug "$border-color: " + transform($border-color) + ";";
@debug "$blue-color-1: " + transform($blue-color-1) + ";";
@debug "$blue-color-2: " + transform($blue-color-2) + ";";
@debug "$blue-color-3: " + transform($blue-color-3) + ";";
@debug "$blue-color-5: " + transform($blue-color-5) + ";";
@debug "$blue-color-9: " + transform($blue-color-9) + ";";
@debug "$blue-color-10: " + transform($blue-color-10) + ";";
@debug "$blue-color-4: " + transform($blue-color-4) + ";";
@debug "$blue-color-7: " + transform($blue-color-7) + ";";
@debug "$blue-color-8: " + transform($blue-color-8) + ";";
@debug "$blue-color-11: " + transform($blue-color-11) + ";";
@debug "$contrast-color: " + transform($contrast-color) + ";";
@debug "$contrast-dim-color: " + transform($contrast-dim-color) + ";";
@debug "$contrast2-color: " + transform($contrast2-color) + ";";
@debug "$success-color-1: " + transform($success-color-1) + ";";
@debug "$success-color-2: " + transform($success-color-2) + ";";
@debug "$info-color-1: " + transform($info-color-1) + ";";
@debug "$info-color-2: " + transform($info-color-2) + ";";
@debug "$selected-color-1: " + transform($selected-color-1) + ";";
@debug "$selected-color-2: " + transform($selected-color-2) + ";";
@debug "$warning-color-1: " + transform($warning-color-1) + ";";
@debug "$warning-color-2: " + transform($warning-color-2) + ";";
@debug "$warning-color-3: " + transform($warning-color-3) + ";";

//$black-color: black;
//$white-color: white;
//$border-color: #f5f3f4;
//$blue-color-1: #254d49;
//$blue-color-2: #2e5955;
//$blue-color-3: #3c706b;
//$blue-color-5: #6aa6a1;
//$blue-color-9: #eff6f5;
//$blue-color-10: #f5fdfa;
//$blue-color-4: #62a29c;
//$blue-color-7: #bbddd9;
//$blue-color-8: #cceae4;
//$blue-color-11: #B4DCD4;
//$contrast-color: #44b78b;
//$contrast-dim-color: transparentize($contrast-color, 0.25);
//$contrast2-color: #7FB1DC;
//$success-color-1: #bcd386;
//$success-color-2: #e0eec5;
//$info-color-1: #c79c89;
//$info-color-2: #ecc8b9;
//$selected-color-1: #ebb29f;
//$selected-color-2: #ffd0c0;
//$warning-color-1: #e19e9e;
//$warning-color-2: #f3d7d7;
//$warning-color-3: #cd3b3b;
//
//$info-color-1: #bebe92;
//$info-color-2: #e8e8bd;
//
//$selected-color-1: #e5e2a5;
//$selected-color-2: #fffcc0;
//
//$warning-color-1: #dba4a4;
//$warning-color-2: #f0dada;
//$warning-color-3: #c14747;

$success-color-1: #8ecb8e;
$success-color-2: #c9eaca;

$info-color-1: #bebe92;
$info-color-2: #e8e8bd;

$selected-color-1: #e5e2a5;
$selected-color-2: #fffcc0;

$warning-color-1: #dba4a4;
$warning-color-2: #f0dada;
$warning-color-3: #c14747;

/*
 * General
 */

$background-color: $blue-color-9;
$text-color: $blue-color-4;
$dim-text-color: $blue-color-8;
$error-text-color: $warning-color-3;

$link-color: #8EACD4;
$hover-link-color: $contrast-color;

$font: Arial, sans-serif;
$font-size: 14px;

/*
 * Sidebar
 */

$sidebar-width: 250px;

$sidebar-background-color: $blue-color-2;
$sidebar-border-color: $blue-color-1;
$sidebar-contrast-color: $contrast-color;
$sidebar-contrast2-color: $contrast2-color;

$sidebar-text-color: $blue-color-4;
$sidebar-icon-color: $blue-color-4;
$sidebar-link-color: $blue-color-7;
$sidebar-hover-link-color: $white-color;
$sidebar-hover-background-color: $blue-color-1;

$sidebar-popup-search-input-background-color: $blue-color-8;
$sidebar-popup-search-input-text-color: $blue-color-4;
$sidebar-popup-search-input-placeholder-color: $blue-color-8;

$sidebar-popup-background-color: $blue-color-9;
$sidebar-popup-text-color: $blue-color-4;
$sidebar-popup-overlay-color: $black-color;

$sidebar-popup-link-text-color: $blue-color-4;
$sidebar-popup-hover-link-color: $white-color;
$sidebar-popup-hover-link-background-color: $contrast2-color;

/*
 * Top
 */

$top-height: 32px;

$top-text-color: $blue-color-11;
$top-link-color: $blue-color-11;
$top-hover-link-color: $contrast2-color;
$top-border-color: $blue-color-11;
$top-icon-color: $contrast-color;
$top-dropdown-background-color: $blue-color-4;
$top-dropdown-border-color: $blue-color-5;
$top-dropdown-text-color: $blue-color-9;
$top-dropdown-link-color: $blue-color-9;
$top-dropdown-hover-link-color: $blue-color-9;

/*
 * Content
 */

$content-background-color: $white-color;
$content-contrast-background-color: $blue-color-10; //inline list bg
$content-contrast2-background-color: $blue-color-3; //table header
$content-contrast3-background-color: $blue-color-8; //delete collapsable
$content-selected-background-color: $selected-color-2;
$content-contrast2-text-color: $white-color;
$content-border-color: $border-color; //row bottom
$content-border2-color: $blue-color-8; //table bottom
$content-selected-border-color: $selected-color-1;

$tab-selected-border-color: $contrast2-color;
$tab-error-border-color: $warning-color-3;

/*
 * Buttons
 */

$button-background-color: $blue-color-8;
$button-hover-background-color: $contrast2-color;
$button-active-background-color: $blue-color-4;
$button-text-color: $blue-color-4;
$button-hover-text-color: $white-color;
$button-active-text-color: $white-color;

$primary-button-background-color: $contrast-color;
$primary-button-text-color: $white-color;

$danger-button-background-color: $warning-color-3;
$danger-button-text-color: $white-color;

$background-button-background-color: $white-color;
$background-button-text-color: $blue-color-4;

/*
 * Inputs
 */

$input-background-color: $white-color;
$input-contrast-background-color: $blue-color-8;
$input-border-color: $blue-color-9;
$input-hover-background-color: $contrast2-color;
$input-icon-color: $contrast-color;
$input-text-color: $blue-color-4;
$input-contrast-text-color: $blue-color-4;
$input-hover-text-color: $white-color;
$input-selected-text-color: $contrast-color;
$input-disabled-text-color: $blue-color-8;
$input-placeholder-color: $blue-color-8;
$input-shadow-color: $contrast-dim-color;

$background-input-background-color: $white-color;
$background-input-border-color: $white-color;
$background-input-text-color: $blue-color-4;

/*
 * Messages
 */

$warning-color: $warning-color-2;
$warning-text-color: $warning-color-1;
$info-color: $info-color-2;
$info-text-color: $info-color-1;
$success-color: $success-color-2;
$success-text-color: $success-color-1;

/*
 * Login
 */

$login-background-color: $blue-color-2;
$login-title-text-color: $blue-color-4;
$login-title-contrast-text-color: $white-color;
$login-header-background-color: $blue-color-3;
$login-header-text-color: $white-color;
$login-content-background-color: $white-color;

/*
 * jQuery UI
 */

$jquery-ui-buttonpane-background: $blue-color-9;

$jquery-ui-state-default-background-color: $white-color;
$jquery-ui-state-default-border-color: $blue-color-9;
$jquery-ui-state-default-text-color: $blue-color-4;

$jquery-ui-state-hover-background-color: $contrast2-color;
$jquery-ui-state-hover-border-color: $contrast2-color;
$jquery-ui-state-hover-text-color: $white-color;

$jquery-ui-state-active-background-color: $contrast-color;
$jquery-ui-state-active-border-color: $contrast-color;
$jquery-ui-state-active-text-color: $white-color;

$jquery-ui-state-highlight-background-color: $white-color;
$jquery-ui-state-highlight-border-color: $contrast2-color;
$jquery-ui-state-highlight-text-color: $contrast2-color;

$jquery-ui-overlay-color: $black-color;

$jquery-ui-tooltip-background-color: $black-color;
$jquery-ui-tooltip-text-color: $white-color;