// Base colors
$color--blue-100: #1B2834;
$color--blue-50: #1D3458;
$color--blue-40: #2D60E5;
$color--blue-30: #7295F1;
$color--blue-20: #CCD7F4;

$color--grey-100: #333333;
$color--grey-80: #666666;
$color--grey-60: #999999;
$color--grey-40: #CCCCCC;
$color--grey-30: #DCDEE0;
$color--grey-20: #F0F2F5;
$color--grey-10: #FAFBFC;
$color--grey-0: #FFFFFF;

// Accent colors
$color--teal-70: #098292;
$color--teal-50: #00B6CB;
$color--teal-20: #CCF0F5;

$color--green-50: #0A7D06;
$color--green-20: #C6E8C5;

$color--yellow-70: #DB7C00;
$color--yellow-50: #FEDF39;
$color--yellow-20: #FFF8E4;

$color--red-50: #DA1416;
$color--red-20: #FAD3D3;

// Color mapping
$base-01--01: $color--blue-100;
$base-01--02: $color--blue-50;
$base-01--03: $color--blue-40;
$base-01--04: $color--blue-30;
$base-01--05: $color--blue-20;

$base-02--01: $color--grey-100;
$base-02--02: $color--grey-80;
$base-02--03: $color--grey-60;
$base-02--04: $color--grey-40;
$base-02--05: $color--grey-30;
$base-02--06: $color--grey-20;
$base-02--07: $color--grey-10;
$base-02--08: $color--grey-0;

$accent-01--01: $color--teal-70;
$accent-01--02: $color--teal-50;
$accent-01--03: $color--teal-20;

$accent-02--01: $color--green-50;
$accent-02--02: $color--green-20;

$accent-03--01: $color--yellow-70;
$accent-03--02: $color--yellow-50;
$accent-03--03: $color--yellow-20;

$accent-04--01: $color--red-50;
$accent-04--02: $color--red-20;

// Global
$primary-light: $base-02--08;
$primary-dark: $base-02--01;
$primary-accent: $base-01--03;

$primary-action: $base-01--03;
$primary-action--hover: $base-01--04;

$text-01: $base-02--01;
$text-02: $base-02--02;
$text-03: $base-02--06;

$background-01: $primary-light;
$background-02: $base-02--06;
$background-03: $base-02--05;
$background-04: $base-01--01;
$background-05: $base-01--02;

$border-color-01: $base-02--05;
$border-color-02: $base-02--03;

$box-shadow-color: $base-02--05;

$status-error: $accent-04--01;
$status-ok: $accent-02--01;
$status-warn: $accent-03--01;