@import 'colorPalette';

// color palettes
@blue-base: #2b6de5;
@blue-0: color(~`colorPalette('@{blue-5}', 1) `);
@blue-1: color(~`colorPalette('@{blue-5}', 2) `);
@blue-2: color(~`colorPalette('@{blue-5}', 3) `);
@blue-3: color(~`colorPalette('@{blue-5}', 4) `);
@blue-4: color(~`colorPalette('@{blue-5}', 5) `);
@blue-5: @blue-base;
@blue-6: color(~`colorPalette('@{blue-5}', 7) `);
@blue-7: color(~`colorPalette('@{blue-5}', 8) `);
@blue-8: color(~`colorPalette('@{blue-5}', 9) `);
@blue-9: color(~`colorPalette('@{blue-5}', 10) `);

@red-base: #f72231;
@red-0: color(~`colorPalette('@{red-5}', 1) `);
@red-1: color(~`colorPalette('@{red-5}', 2) `);
@red-2: color(~`colorPalette('@{red-5}', 3) `);
@red-3: color(~`colorPalette('@{red-5}', 4) `);
@red-4: color(~`colorPalette('@{red-5}', 5) `);
@red-5: @red-base;
@red-6: color(~`colorPalette('@{red-5}', 7) `);
@red-7: color(~`colorPalette('@{red-5}', 8) `);
@red-8: color(~`colorPalette('@{red-5}', 9) `);
@red-9: color(~`colorPalette('@{red-5}', 10) `);

@green-base: #1acb7c;
@green-0: color(~`colorPalette('@{green-5}', 1) `);
@green-1: color(~`colorPalette('@{green-5}', 2) `);
@green-2: color(~`colorPalette('@{green-5}', 3) `);
@green-3: color(~`colorPalette('@{green-5}', 4) `);
@green-4: color(~`colorPalette('@{green-5}', 5) `);
@green-5: @green-base;
@green-6: color(~`colorPalette('@{green-5}', 7) `);
@green-7: color(~`colorPalette('@{green-5}', 8) `);
@green-8: color(~`colorPalette('@{green-5}', 9) `);
@green-9: color(~`colorPalette('@{green-5}', 10) `);

@gold-base: #fa8c16;
@gold-0: color(~`colorPalette('@{gold-5}', 1) `);
@gold-1: color(~`colorPalette('@{gold-5}', 2) `);
@gold-2: color(~`colorPalette('@{gold-5}', 3) `);
@gold-3: color(~`colorPalette('@{gold-5}', 4) `);
@gold-4: color(~`colorPalette('@{gold-5}', 5) `);
@gold-5: @gold-base;
@gold-6: color(~`colorPalette('@{gold-5}', 7) `);
@gold-7: color(~`colorPalette('@{gold-5}', 8) `);
@gold-8: color(~`colorPalette('@{gold-5}', 9) `);
@gold-9: color(~`colorPalette('@{gold-5}', 10) `);

@grey-base: #0a1b39;
@grey-0: #fbfbfc;
@grey-1: #f6f7f8;
@grey-2: #f1f2f4;
@grey-3: #eceef0;
@grey-4: #dbdee2;
@grey-5: #c2c7ce;
@grey-6: #aab0ba;
@grey-7: #6d7789;
@grey-8: #3c4961;
@grey-9: @grey-base;

@grey-opacity-0: fade(@grey-base, 2%);
@grey-opacity-1: fade(@grey-base, 4%);
@grey-opacity-2: fade(@grey-base, 6%);
@grey-opacity-3: fade(@grey-base, 8%);
@grey-opacity-4: fade(@grey-base, 15%);
@grey-opacity-5: fade(@grey-base, 25%);
@grey-opacity-6: fade(@grey-base, 35%);
@grey-opacity-7: fade(@grey-base, 60%);
@grey-opacity-8: fade(@grey-base, 80%);
@grey-opacity-9: fade(@grey-base, 100%);