/* the base of the entire palette */
@color-primary: #36454F;
@color-primary-i: #FFFFFF;

/* these are the standard colors of the palette */
@color-primary-dark: shade(@color-primary, 45%);
@color-link: tint(@color-primary, 20%);
@color-secondary: tint(@color-primary, 34%);
@color-hint: tint(@color-primary, 70%);
@color-disabled: @color-hint;
@color-border: tint(@color-primary, 82%);
@color-separator: tint(@color-primary, 88%);
@color-tap: @color-separator;
@color-off-white: tint(@color-primary, 92%);
@color-illegal-white: tint(@color-off-white, 50%);

/* these are the inverse colors of the standard colors */
@color-link-i: shade(@color-primary-i, 20%);
@color-secondary-i: shade(@color-primary-i, 34%);
@color-hint-i: shade(@color-primary-i, 70%);
@color-disabled-i: @color-hint-i;
@color-border-i: shade(@color-primary-i, 82%);
@color-separator-i: shade(@color-primary-i, 88%);
@color-tap-i: @color-separator-i;
@color-off-white-i: shade(@color-primary-i, 92%);
@color-illegal-white-i: shade(@color-off-white-i, 50%);

/* these are the opaque versions of the standard colors */
@color-link-o: fade(@color-primary, 70%);
@color-secondary-o: fade(@color-primary, 54%);
@color-hint-o: fade(@color-primary, 30%);
@color-disabled-o: @color-hint-o;
@color-border-o: fade(@color-primary, 15%);
@color-separator-o: fade(@color-primary, 10%);
@color-tap-o: @color-separator-o;
@color-off-white-o: fade(@color-primary, 4%);

/* these are the inverse versions of the opaque colors */
@color-link-oi: fade(@color-primary-i, 70%);
@color-secondary-oi: fade(@color-primary-i, 54%);
@color-hint-oi: fade(@color-primary-i, 30%);
@color-disabled-oi: @color-hint-oi;
@color-border-oi: fade(@color-primary-i, 15%);
@color-separator-oi: fade(@color-primary-i, 10%);
@color-tap-oi: @color-separator-oi;
@color-off-white-oi: fade(@color-primary-i, 4%);

/* these are colors for error states */
@color-error: #E52817;
@color-error-input-bg: #FDEEED;
@color-error-input-placeholder: #F2938B;
@color-error-disabled: #F8C9C5;
@color-error-disabled-bg: #FCE9E7;
