@red: #F44336;
@red--600: #E53935;

// pink
@pink: #E91E63;
@pink--700: #C2185B;
@pink--accent-200: #FF4081;
@pink--accent-400: #F50057;

@purple: #9C27B0;
@deep-purple: #673AB7;
@indigo: #3F51B5;

// blue
@blue: #2196F3;
@blue--600: #1E88E5;
@blue--700: #1976D2;
@blue--800: #1565c0;
@blue--900: #0d47a1;

@blue--accent-400: #2979FF;
@blue--accent-700: #2962FF;

// light blue
@light-blue: #03A9F4;
@light-blue--700: #0288d1;
@light-blue--900: #01579b;

@cyan: #00BCD4;
@teal: #009688;

@green: #4CAF50;
@green--accent-400: #00E676;
@green--accent-700: #00C853;

@light-green: #8BC34A;
@lime: #CDDC39;
@yellow: #FFEB3B;
@amber: #FFC107;
@orange: #FF9800;
@deep-orange: #FF5722;
@blue-grey: #607D8B;

@color-link: mix(@color-text, @blue--accent-400, 10%);

// background colors
@color-bg: mix(@blue--accent-700, fadeout(#000, 98%), 1%);
@color-bg--white-transparent: fadeout(#fff, 75%);
@color-bg--black-transparent: fadeout(#000, 95%);
@color-bg--light-gray: tint(#000, 95%);
@color-bg--lighter-gray: tint(#000, 97%);
@color-bg--lightest-gray: tint(#000, 98%);
@color-bg--card-form: tint(#000, 99%);
@color-bg--hover: tint(#000, 95%);
@color-bg--light-blue: tint(@blue, 95%);

// border colors
@color-border--transparent-btn: fadeout(#000, 90%);
@color-border--input: fadeout(#000, 75%);
@color-border--light-gray: tint(#000, 85%);
@color-border--lighter-gray: tint(#000, 90%);
@color-border--lightest-gray: fadeout(#000, 94%);
@color-border--dark-gray: tint(#000, 50%);
@color-border--gray: tint(#000, 75%);
@color-border--light-blue: fadeout(@blue, 70%);

// text colors
@color-text: #111;
@color-text--muted: tint(@color-text, 40%);
@color-text--light: tint(@color-text, 65%);
@color-text--white-transparent: fadeout(#fff, 1%);
@color-text--form-warning: mix(@color-text, @pink, 25%);

// media queries
@tablet-vertical: 600px;
@tablet-horizontal: 800px;
@desktop: 950px;
@desktop-wide: 1300px;

// z-indexes
@on-top: 3;
@underneath: -3;