// COLORS
//	Gradients
@amount-subtle: 2%;
@amount-muted: 10%;
@amount-light: 15%;
@amount-extra-light: 35%;

//	General
@color-app-background: #ececec;

@color-transparent: transparent;

@color-white: #ffffff;
@color-white-subtle: darken(@color-white, @amount-subtle);

@color-blue: #5195e4;
@color-blue-subtle: lighten(@color-blue, @amount-subtle);
@color-blue-light: lighten(@color-blue, @amount-light);
@color-blue-extra-light: lighten(@color-blue, @amount-extra-light);

@color-red: #f55055;
@color-red-light: lighten(@color-red, @amount-light);

@color-green: #3bb477;
@color-green-light: lighten(@color-green, @amount-light);
@color-green-extra-light: lighten(@color-green, @amount-extra-light);

@color-orange: #fd940a;
@color-orange-light: lighten(@color-orange, @amount-light);

@color-purple: #7b3dd9;

@color-gray: #c8c8c8;
@color-gray-light: lighten(@color-gray, @amount-light);
@color-gray-extra-light: lighten(@color-gray, @amount-extra-light);

@color-black: #000000;
@color-black-extra-light: lighten(@color-black, @amount-extra-light);

@color-black: #000000;
@color-black-extra-light: lighten(@color-black, @amount-extra-light);

//	Specific
@color-disabled: #b4b4b4;

@color-border: #c8c8c8;
@color-border-muted: lighten(@color-border, @amount-muted);
@color-border-light: lighten(@color-border, @amount-light);

@color-text-light: @color-white;
@color-text-light-muted: darken(@color-text-light, @amount-muted);
@color-text-light-light: darken(@color-text-light, @amount-light);

@color-text-dark: #2a373e;
@color-text-dark-muted: lighten(@color-text-dark, @amount-muted);
@color-text-dark-light: lighten(@color-text-dark, @amount-light);

@color-input-background: #fbfbfb;

@color-nav-background: #5c2634;
@color-nav-background-active: #391b23;

@color-side-bar-background: @color-nav-background-active;
@color-side-bar-background-active: @color-app-background;

@color-footer-background: #fafaff;
@color-mask-background: fade(@color-black, 70%);

// 	Mixins
.colorize {
	&.positive,
	.positive {
		.value {
			color: @color-green;
		}

		.denomination {
			color: @color-green-light;
		}
	}

	&.negative,
	.negative {
		.value {
			color: @color-red;
		}

		.denomination {
			color: @color-red-light;
		}
	}
}

// 	Historical
// TODO -- remove
// Left for potential reference
@color-site-background: rgba(250, 250, 255, 1);

@color-border-dark: #d3d3da;
@color-border-darker: #c3c3ca;

// @color-purple: #a15e87;
// @color-purple-dark: #864f71;
// @color-purple-lighter: #d491ba;

@color-positive: #00c853; // green, up-arrows
@color-positive-light: #61ffa3; // green, up-arrows

@color-negative: #ff5050; // red, down-arrows

@color-primary-lightest: #e3f2fd;
@color-primary-normal: #62a8ea;
@color-primary-hover: #3583ca;
@color-primary-active: #3075b5;

@color-plain-normal: #e4eaec;
@color-plain-hover: #ccd5db;
@color-plain-active: #76838f;

@color-dark-normal: #222229;
@color-dark-hover: #32323a; // font/text color
@color-dark-active: #43505c;

@color-light-normal: #eaeaef;
@color-light-hover: #dadadf;
@color-light-active: #cacacf;

@color-muted-normal: #bdbdbd;
@color-muted-hover: #a0a0a0;
@color-muted-active: #838383;

@color-success-normal: #54b530;
@color-success-hover: #479929;
@color-success-active: #3c8122;

@color-info-normal: #57c7d4;
@color-info-hover: #77d6e1;
@color-info-active: #47b8c6;

@color-warning-normal: #fcb531;
@color-warning-hover: #f19e04;
@color-warning-active: #e79704;

@color-danger-normal: #f96868;
@color-danger-hover: #fa7a7a;
@color-danger-active: #e9595b;
@color-danger-dark: #8c1717;