// -----------------------------------------------------------------------------
// Typography
// -----------------------------------------------------------------------------

@fontSize: 12px;
@fontFamily: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
@font: @fontSize @fontFamily;
@font-chart: 11px sans-serif;

// -----------------------------------------------------------------------------
// Sizes
// -----------------------------------------------------------------------------

@size-font-S: 9px;
@size-font: 12px;
@size-font-L: 15px;
@size-font-XL: 18px;

// standard border radius
@size-borderRadius: 4px;
@size-borderWidth: 1px;

@size-standard-height: 28px; // should have been `@size-height-standard`
@size-height-L: 46px;

@size-XXS: 3px;
@size-XS: 6px;
@size-S: 9px;
@size-standard: 12px;
@size-L: 15px;
@size-XL: 24px;
@size-XXL: 30px;

@size-expander-button: 20px;
@size-tag: 20px;

// -----------------------------------------------------------------------------
// Z Indices
// -----------------------------------------------------------------------------

@zindex-base: 1;
@zindex-nav: 3000;
@zindex-modal: 4000;
@zindex-tooltip: 5000;

// -----------------------------------------------------------------------------
// Animations
// -----------------------------------------------------------------------------
@timing-animation-hover: 100ms;
@timing-animation-fade: 300ms;
@timing-function-easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);

// -----------------------------------------------------------------------------
// Gradients
// -----------------------------------------------------------------------------

// Used when defining a gradient (mostly buttons)
@standardGradient: to bottom;
@hoverGradient: to top;

// -----------------------------------------------------------------------------
// Shadows
// -----------------------------------------------------------------------------

// Standard inset shadow
@shadow-inset: 0 10px 10px -10px @color-gray-30 inset;

// -----------------------------------------------------------------------------
// Colors
// -----------------------------------------------------------------------------

// Grays
@color-lightGray: #f4f4f4;
@color-gray: #e3e3e3;
@color-mediumGray: #c5c5c5;
@color-darkGray: #333;

// Standard text color
@color-textColor: @color-darkGray;
@color-disabledText: tint(@color-textColor, 50%);

// Standard link colors
@color-linkColor: @color-primary;
@color-linkColorHover: darken(@color-linkColor, 20%);

// Standard background color
@color-backgroundColor: @color-lightGray;

// Standard background color
@color-pageBackgroundColor: @color-gray;

// General colors
@color-white: #fff;
@color-black: #000;
@color-transparent: rgba(255, 255, 255, 0); // normalize transparent due to Safari bug

// Primary colors
@color-primary: #2abbb0;
@color-primaryLight: tint(@color-primary, 85%);
@color-primaryMedium: tint(@color-primary, 65%);

// Transparent primary colors
@color-primary-10: fade(@color-primary, 10%);
@color-primary-30: fade(@color-primary, 30%);

// Transparent grays
@color-gray-5: fade(@color-black, 5%);
@color-gray-10: fade(@color-black, 10%);
@color-gray-25: fade(@color-black, 25%);
@color-gray-30: fade(@color-black, 30%);
@color-gray-40: fade(@color-black, 40%);
@color-gray-50: fade(@color-black, 50%);
@color-gray-60: fade(@color-black, 60%);

// Transparent whites
@color-white-50: fade(@color-white, 50%);
@color-white-85: fade(@color-white, 85%);

// Standard border color
@color-borderColor: @color-mediumGray;
@color-borderColorLight: @color-gray;

// Table colors
@color-table-header: #767b7f;
@color-table-header-sorted: #525659;
@color-table-header-light: @color-lightGray;
@color-table-header-sorted-light: @color-gray;

// -------------------------------------
// Featured Colors
// -------------------------------------
// Featured color variables are intended to only be used for components that
// have "states" to them like `info`, `waring`, `danger` etc.

// `@featured-color-default-borderColor` should only be used for banner or
// button or button like components.

// Generally you should not use `@featured-color-primary` instead use
// `@color-primary`

// Featured colors
@featured-color-default: #f3f3f3;
@featured-color-primary: @color-primary;
@featured-color-success: #3fa516;
@featured-color-info: #0089c4;
@featured-color-warning: #feb209;
@featured-color-danger: #f7403a;
@featured-color-danger-30: fade(@featured-color-danger, 30%);

// Featured default color
@featured-color-default-borderColor: #c5c5c5;
@featured-color-default-backgroundColor: #ededed;
@featured-color-default-gradientStartColor: #f3f3f3;
@featured-color-default-gradientEndColor: #e2e2e2;

// Featured primary color
@featured-color-primary-colorHover: shade(@featured-color-primary, 35%);
@featured-color-primary-backgroundColorLight: tint(@featured-color-primary, 90%);
@featured-color-primary-backgroundColor: tint(@featured-color-primary, 70%);
@featured-color-primary-borderColorLite: tint(@featured-color-primary, 60%);
@featured-color-primary-borderColorMedium: tint(@featured-color-primary, 30%);
@featured-color-primary-gradientStartColor: tint(@featured-color-primary, 30%);
@featured-color-primary-gradientEndColor: @featured-color-primary;
@featured-color-primary-borderColor: @featured-color-primary;

// Featured success color
@featured-color-success-colorHover: shade(@featured-color-success, 35%);
@featured-color-success-backgroundColorLight: tint(@featured-color-success, 90%);
@featured-color-success-backgroundColor: tint(@featured-color-success, 70%);
@featured-color-success-borderColorLite: tint(@featured-color-success, 60%);
@featured-color-success-gradientStartColor: tint(@featured-color-success, 30%);
@featured-color-success-gradientEndColor: @featured-color-success;
@featured-color-success-borderColor: @featured-color-success;

// Featured info color
@featured-color-info-colorHover: shade(@featured-color-info, 35%);
@featured-color-info-backgroundColorLight: tint(@featured-color-info, 90%);
@featured-color-info-borderColorLite: tint(@featured-color-info, 60%);
@featured-color-info-backgroundColor: tint(@featured-color-info, 70%);
@featured-color-info-gradientStartColor: tint(@featured-color-info, 30%);
@featured-color-info-gradientEndColor: @featured-color-info;
@featured-color-info-borderColor: @featured-color-info;

// Featured warning color
@featured-color-warning-colorHover: shade(@featured-color-warning, 35%);
@featured-color-warning-backgroundColorLight: tint(@featured-color-warning, 90%);
@featured-color-warning-borderColorLite: tint(@featured-color-warning, 60%);
@featured-color-warning-backgroundColor: tint(@featured-color-warning, 70%);
@featured-color-warning-gradientStartColor: tint(@featured-color-warning, 30%);
@featured-color-warning-gradientEndColor: @featured-color-warning;
@featured-color-warning-borderColor: @featured-color-warning;

// Featured danger color
@featured-color-danger-colorHover: shade(@featured-color-danger, 35%);
@featured-color-danger-backgroundColorLight: tint(@featured-color-danger, 90%);
@featured-color-danger-borderColorLite: tint(@featured-color-danger, 60%);
@featured-color-danger-backgroundColor: tint(@featured-color-danger, 70%);
@featured-color-danger-gradientStartColor: tint(@featured-color-danger, 30%);
@featured-color-danger-gradientEndColor: @featured-color-danger;
@featured-color-danger-borderColor: @featured-color-danger;

// -------------------------------------
// Chart Colors
// -------------------------------------
// NOTE: if you make changes to chart colors, you **must** keep their javascript
// counterparts in sync.

// This list should always be in sync with the full set of chart colors
@color-chart-variables:
	color-chart-0,
	color-chart-0-lightest,
	color-chart-0-light,
	color-chart-0-dark,
	color-chart-0-darkest,
	color-chart-1,
	color-chart-1-lightest,
	color-chart-1-light,
	color-chart-1-dark,
	color-chart-1-darkest,
	color-chart-2,
	color-chart-2-lightest,
	color-chart-2-light,
	color-chart-2-dark,
	color-chart-2-darkest,
	color-chart-3,
	color-chart-3-lightest,
	color-chart-3-light,
	color-chart-3-dark,
	color-chart-3-darkest,
	color-chart-4,
	color-chart-4-lightest,
	color-chart-4-light,
	color-chart-4-dark,
	color-chart-4-darkest,
	color-chart-5,
	color-chart-5-lightest,
	color-chart-5-light,
	color-chart-5-dark,
	color-chart-5-darkest,
	color-chart-good,
	color-chart-good-lightest,
	color-chart-good-light,
	color-chart-good-dark,
	color-chart-good-darkest,
	color-chart-bad,
	color-chart-bad-lightest,
	color-chart-bad-light,
	color-chart-bad-dark,
	color-chart-bad-darkest,
	color-chart-neutral;

@color-chart-0: @featured-color-info;
@color-chart-0-lightest: tint(@color-chart-0, 90%);
@color-chart-0-light: tint(@color-chart-0, 65%);
@color-chart-0-dark: shade(@color-chart-0, 35%);
@color-chart-0-darkest: shade(@color-chart-0, 70%);

@color-chart-1: #ff8700;
@color-chart-1-lightest: tint(@color-chart-1, 90%);
@color-chart-1-light: tint(@color-chart-1, 65%);
@color-chart-1-dark: shade(@color-chart-1, 35%);
@color-chart-1-darkest: shade(@color-chart-1, 70%);

@color-chart-2: #c73774;
@color-chart-2-lightest: tint(@color-chart-2, 90%);
@color-chart-2-light: tint(@color-chart-2, 65%);
@color-chart-2-dark: shade(@color-chart-2, 35%);
@color-chart-2-darkest: shade(@color-chart-2, 70%);

@color-chart-3: #00b8c8;
@color-chart-3-lightest: tint(@color-chart-3, 90%);
@color-chart-3-light: tint(@color-chart-3, 65%);
@color-chart-3-dark: shade(@color-chart-3, 35%);
@color-chart-3-darkest: shade(@color-chart-3, 70%);

@color-chart-4: #fed100;
@color-chart-4-lightest: tint(@color-chart-4, 90%);
@color-chart-4-light: tint(@color-chart-4, 65%);
@color-chart-4-dark: shade(@color-chart-4, 35%);
@color-chart-4-darkest: shade(@color-chart-4, 70%);

@color-chart-5: #824bb0;
@color-chart-5-lightest: tint(@color-chart-5, 90%);
@color-chart-5-light: tint(@color-chart-5, 65%);
@color-chart-5-dark: shade(@color-chart-5, 35%);
@color-chart-5-darkest: shade(@color-chart-5, 70%);

// Semantic colors

@color-chart-good: @featured-color-success;
@color-chart-good-lightest: tint(@color-chart-good, 90%);
@color-chart-good-light: tint(@color-chart-good, 65%);
@color-chart-good-dark: shade(@color-chart-good, 35%);
@color-chart-good-darkest: shade(@color-chart-good, 70%);

@color-chart-bad: @featured-color-danger;
@color-chart-bad-lightest: tint(@color-chart-bad, 90%);
@color-chart-bad-light: tint(@color-chart-bad, 65%);
@color-chart-bad-dark: shade(@color-chart-bad, 35%);
@color-chart-bad-darkest: shade(@color-chart-bad, 70%);

@color-chart-neutral: @color-gray;

// -----------------------------------------------------------------------------
// Borders
// -----------------------------------------------------------------------------

@border-standardBorder: 1px solid @color-borderColor;
@border-lightBorder: 1px solid @color-borderColorLight;

@border-table: 1px solid @color-table-header;
@border-table-header: 1px solid #babdbe;
@border-table-header-light: 1px solid @color-gray;
@border-table-body: 1px solid @color-gray;

// -----------------------------------------------------------------------------
// Patterns
// -----------------------------------------------------------------------------

@pattern-diagonal-striped: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cGF0aCBkPSJNLTEgNUw1IC0xWk01IDNMMyA1Wk0tMSAxTDEgLTEiIHN0cm9rZT0iI2UzZTNlMyIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+Cjwvc3ZnPg==");