:root
{
 --white-rgb:rgb(255, 255, 255);
 --white-hex:#ffffff;
 --white-h:0; --white-s:0%; --white-l:100%;
 --white-hsl:var(--white-h) var(--white-s) var(--white-l);
 --white:hsl(var(--white-hsl));

 --black-rgb:rgb(0, 0, 0);
 --black-hex:#000000;
 --black-h:0; --black-s:0%; --black-l:0%;
 --black-hsl:var(--black-h) var(--black-s) var(--black-l);
 --black:hsl(var(--black-hsl));

 --grey1-rgb:rgb(250, 250, 250);
 --grey1-hex:#fafafa;
 --grey1-h:0; --grey1-s:0%; --grey1-l:98%;
 --grey1-hsl:var(--grey1-h) var(--grey1-s) var(--grey1-l);
 --grey1:hsl(var(--grey1-hsl));

 --grey1-on-rgb:rgb(148, 148, 148);
 --grey1-on-hex:#949494;
 --grey1-on-h:0; --grey1-on-s:0%; --grey1-on-l:58%;
 --grey1-on-hsl:var(--grey1-on-h) var(--grey1-on-s) var(--grey1-on-l);
 --grey1-on:hsl(var(--grey1-on-hsl));

 --grey2-rgb:rgb(244, 245, 246);
 --grey2-hex:#f4f5f6;
 --grey2-h:210; --grey2-s:10%; --grey2-l:96%;
 --grey2-hsl:var(--grey2-h) var(--grey2-s) var(--grey2-l);
 --grey2:hsl(var(--grey2-hsl));

 --grey-2-on-rgb:rgb(135, 135, 135);
 --grey-2-on-hex:#878787;
 --grey2-on-h:0; --grey2-on-s:0%; --grey2-on-l:53%;
 --grey2-on-hsl:var(--grey2-on-h) var(--grey2-on-s) var(--grey2-on-l);
 --grey2-on:hsl(var(--grey2-on-hsl));

 --grey3-rgb:rgb(242, 242, 242);
 --grey3-hex:#f2f2f2;
 --grey3-h:0; --grey3-s:0%; --grey3-l:95%;
 --grey3-hsl:var(--grey3-h) var(--grey3-s) var(--grey3-l);
 --grey3:hsl(var(--grey3-hsl));

 --grey3-on-rgb:rgb(133, 133, 133);
 --grey3-on-hex:#858585;
 --grey3-on-h:0; --grey3-on-s:0%; --grey3-on-l:52%;
 --grey3-on-hsl:var(--grey3-on-h) var(--grey3-on-s) var(--grey3-on-l);
 --grey3-on:hsl(var(--grey3-on-hsl));

 --grey4-rgb:rgb(226, 228, 227);
 --grey4-hex:#e2e4e3;
 --grey4-h:150; --grey4-s:4%; --grey4-l:89%;
 --grey4-hsl:var(--grey4-h) var(--grey4-s) var(--grey4-l);
 --grey4:hsl(var(--grey4-hsl));

 --grey4-on-rgb:rgb(120, 120, 120);
 --grey4-on-hex:#787878;
 --grey4-on-h:0; --grey4-on-s:0%; --grey4-on-l:47%;
 --grey4-on-hsl:var(--grey4-on-h) var(--grey4-on-s) var(--grey4-on-l);
 --grey4-on:hsl(var(--grey4-on-hsl));

 --grey5-rgb:rgb(210, 213, 213);
 --grey5-hex:#d2d5d5;
 --grey5-h:180; --grey5-s:3%; --grey5-l:83%;
 --grey5-hsl:var(--grey5-h) var(--grey5-s) var(--grey5-l);
 --grey5:hsl(var(--grey5-hsl));

 --grey5-on-rgb:rgb(112, 112, 112);
 --grey5-on-hex:#707070;
 --grey5-on-h:0; --grey5-on-s:0%; --grey5-on-l:44%;
 --grey5-on-hsl:var(--grey5-on-h) var(--grey5-on-s) var(--grey5-on-l);
 --grey5-on:hsl(var(--grey5-on-hsl));

 --grey6-rgb:rgb(181, 183, 186);
 --grey6-hex:#b5b7ba;
 --grey6-h:220; --grey6-s:4%; --grey6-l:72%;
 --grey6-hsl:var(--grey6-h) var(--grey6-s) var(--grey6-l);
 --grey6:hsl(var(--grey6-hsl));

 --grey6-on-rgb:rgb(92, 92, 92);
 --grey6-on-hex:#5c5c5c;
 --grey6-on-h:0; --grey6-on-s:0%; --grey6-on-l:36%;
 --grey6-on-hsl:var(--grey6-on-h) var(--grey6-on-s) var(--grey6-on-l);
 --grey6-on:hsl(var(--grey6-on-hsl));

 --grey7-rgb:rgb(120, 122, 125);
 --grey7-hex:#787a7d;
 --grey7-h:216; --grey7-s:2%; --grey7-l:48%;
 --grey7-hsl:var(--grey7-h) var(--grey7-s) var(--grey7-l);
 --grey7:hsl(var(--grey7-hsl));

 --grey7-on-rgb:rgb(255, 255, 255);
 --grey7-on-hex:#ffffff;
 --grey7-on-h:0; --grey7-on-s:0%; --grey7-on-l:100%;
 --grey7-on-hsl:var(--grey7-on-h) var(--grey7-on-s) var(--grey7-on-l);
 --grey7-on:hsl(var(--grey7-on-hsl));

 --grey8-rgb:rgb(61, 61, 61);
 --grey8-hex:#3d3d3d;
 --grey8-h:0; --grey8-s:0%; --grey8-l:24%;
 --grey8-hsl:var(--grey8-h) var(--grey8-s) var(--grey8-l);
 --grey8:hsl(var(--grey8-hsl));

 --grey8-on-rgb:rgb(255, 255, 255);
 --grey8-on-hex:#ffffff;
 --grey8-on-h:0; --grey8-on-s:0%; --grey8-on-l:100%;
 --grey8-on-hsl:var(--grey8-on-h) var(--grey8-on-s) var(--grey8-on-l);
 --grey8-on:hsl(var(--grey8-on-hsl));

 --blue1-rgb:rgb(212, 231, 242);
 --blue1-hex:#d4e7f2;
 --blue1-h:201; --blue1-s:53%; --blue1-l:89%;
 --blue1-hsl:var(--blue1-h) var(--blue1-s) var(--blue1-l);
 --blue1:hsl(var(--blue1-hsl));

 --blue1-on-rgb:rgb(68, 163, 218);
 --blue1-on-hex:#44a3da;
 --blue1-on-h:202; --blue1-on-s:67%; --blue1-on-l:56%;
 --blue1-on-hsl:var(--blue1-on-h) var(--blue1-on-s) var(--blue1-on-l);
 --blue1-on:hsl(var(--blue1-on-hsl));

 --blue2-rgb:rgb(122, 190, 250);
 --blue2-hex:#7abefa;
 --blue2-h:208; --blue2-s:93%; --blue2-l:73%;
 --blue2-hsl:var(--blue2-h) var(--blue2-s) var(--blue2-l);
 --blue2:hsl(var(--blue2-hsl));

 --blue2-on-rgb:rgb(255, 255, 255);
 --blue2-on-hex:#ffffff;
 --blue2-on-h:0; --blue2-on-s:0%; --blue2-on-l:100%;
 --blue2-on-hsl:var(--blue2-on-h) var(--blue2-on-s) var(--blue2-on-l);
 --blue2-on:hsl(var(--blue2-on-hsl));

 --blue3-rgb:rgb(68, 163, 218);
 --blue3-hex:#44a3da;
 --blue3-h:202; --blue3-s:67%; --blue3-l:56%;
 --blue3-hsl:var(--blue3-h) var(--blue3-s) var(--blue3-l);
 --blue3:hsl(var(--blue3-hsl));

 --blue3-complementary-rgb:rgb(218, 123, 68);
 --blue3-complementary-hex:#da7b44;
 --blue3-complementary-h:22; --blue3-complementary-s:67%; --blue3-complementary-l:56%;
 --blue3-complementary-hsl:var(--blue3-complementary-h) var(--blue3-complementary-s) var(--blue3-complementary-l);
 --blue3-complementary:hsl(var(--blue3-complementary-hsl));

 --blue3-on-rgb:rgb(255, 255, 255);
 --blue3-on-hex:#ffffff;
 --blue3-on-h:0; --blue3-on-s:0%; --blue3-on-l:100%;
 --blue3-on-hsl:var(--blue3-on-h) var(--blue3-on-s) var(--blue3-on-l);
 --blue3-on:hsl(var(--blue3-on-hsl));

 --blue4-rgb:rgb(54, 142, 196);
 --blue4-hex:#368ec4;
 --blue4-h:203; --blue4-s:57%; --blue4-l:49%;
 --blue4-hsl:var(--blue4-h) var(--blue4-s) var(--blue4-l);
 --blue4:hsl(var(--blue4-hsl));

 --blue4-on-rgb:rgb(255, 255, 255);
 --blue4-on-hex:#ffffff;
 --blue4-on-h:0; --blue4-on-s:0%; --blue4-on-l:100%;
 --blue4-on-hsl:var(--blue4-on-h) var(--blue4-on-s) var(--blue4-on-l);
 --blue4-on:hsl(var(--blue4-on-hsl));

 --blue4-complementary-rgb:rgb(196, 108, 54);
 --blue4-complementary-hex:#c46c36;
 --blue4-complementary-h:23; --blue4-complementary-s:57%; --blue4-complementary-l:49%;
 --blue4-complementary-hsl:var(--blue4-complementary-h) var(--blue4-complementary-s) var(--blue4-complementary-l);
 --blue4-complementary:hsl(var(--blue4-complementary-hsl));

 --blue5-rgb:rgb(0, 86, 133);
 --blue5-hex:#005685;
 --blue5-h:201; --blue5-s:100%; --blue5-l:26%;
 --blue5-hsl:var(--blue5-h) var(--blue5-s) var(--blue5-l);
 --blue5:hsl(var(--blue5-hsl));

 --blue5-on-rgb:rgb(255, 255, 255);
 --blue5-on-hex:#ffffff;
 --blue5-on-h:0; --blue5-on-s:0%; --blue5-on-l:100%;
 --blue5-on-hsl:var(--blue5-on-h) var(--blue5-on-s) var(--blue5-on-l);
 --blue5-on:hsl(var(--blue5-on-hsl));

 --blue6-rgb:rgb(0, 61, 92);
 --blue6-hex:#003d5c;
 --blue6-h:200; --blue6-s:100%; --blue6-l:18%;
 --blue6-hsl:var(--blue6-h) var(--blue6-s) var(--blue6-l);
 --blue6:hsl(var(--blue6-hsl));

 --blue6-on-rgb:rgb(255, 255, 255);
 --blue6-on-hex:#ffffff;
 --blue6-on-h:0; --blue6-on-s:0%; --blue6-on-l:100%;
 --blue6-on-hsl:var(--blue6-on-h) var(--blue6-on-s) var(--blue6-on-l);
 --blue6-on:hsl(var(--blue6-on-hsl));

 --red1-rgb:rgb(255, 241, 240);
 --red1-hex:#fff1f0;
 --red1-h:7; --red1-s:100%; --red1-l:97%;
 --red1-hsl:var(--red1-h) var(--red1-s) var(--red1-l);
 --red1:hsl(var(--red1-hsl));

 --red1-on-rgb:rgb(175, 58, 40);
 --red1-on-hex:#af3a28;
 --red1-on-h:8; --red1-on-s:63%; --red1-on-l:42%;
 --red1-on-hsl:var(--red1-on-h) var(--red1-on-s) var(--red1-on-l);
 --red1-on:hsl(var(--red1-on-hsl));

 --red2-rgb:rgb(234, 80, 57);
 --red2-hex:#ea5039;
 --red2-h:8; --red2-s:81%; --red2-l:57%;
 --red2-hsl:var(--red2-h) var(--red2-s) var(--red2-l);
 --red2:hsl(var(--red2-hsl));

 --red2-on-rgb:rgb(255, 255, 255);
 --red2-on-hex:#ffffff;
 --red2-on-h:0; --red2-on-s:0%; --red2-on-l:100%;
 --red2-on-hsl:var(--red2-on-h) var(--red2-on-s) var(--red2-on-l);
 --red2-on:hsl(var(--red2-on-hsl));

 --red3-rgb:rgb(132, 65, 57);
 --red3-hex:#844139;
 --red3-h:7; --red3-s:40%; --red3-l:37%;
 --red3-hsl:var(--red3-h) var(--red3-s) var(--red3-l);
 --red3:hsl(var(--red3-hsl));

 --red3-on-rgb:rgb(255, 255, 255);
 --red3-on-hex:#ffffff;
 --red3-on-h:0; --red3-on-s:0%; --red3-on-l:100%;
 --red3-on-hsl:var(--red3-on-h) var(--red3-on-s) var(--red3-on-l);
 --red3-on:hsl(var(--red3-on-hsl));

 --orange-1-rgb:rgb(230, 122, 0);
 --orange-1-hex:#e67a00;
 --orange1-h:32; --orange1-s:100%; --orange1-l:45%;
 --orange1-hsl:var(--orange1-h) var(--orange1-s) var(--orange1-l);
 --orange1:hsl(var(--orange1-hsl));

 --orange1-on-rgb:rgb(255, 255, 255);
 --orange1-on-hex:#ffffff;
 --orange1-on-h:0; --orange1-on-s:0%; --orange1-on-l:100%;
 --orange1-on-hsl:var(--orange1-on-h) var(--orange1-on-s) var(--orange1-on-l);
 --orange1-on:hsl(var(--orange1-on-hsl));

 --orange2-rgb:rgb(255, 137, 46);
 --orange2-hex:#ff892e;
 --orange2-h:26; --orange2-s:100%; --orange2-l:59%;
 --orange2-hsl:var(--orange2-h) var(--orange2-s) var(--orange2-l);
 --orange2:hsl(var(--orange2-hsl));

 --orange2-on-rgb:rgb(61, 61, 61);
 --orange2-on-hex:#3d3d3d;
 --orange2-on-h:0; --orange2-on-s:0%; --orange2-on-l:24%;
 --orange2-on-hsl:var(--orange2-on-h) var(--orange2-on-s) var(--orange2-on-l);
 --orange2-on:hsl(var(--orange2-on-hsl));

 --green1-rgb:rgb(234, 246, 235);
 --green1-hex:#eaf6eb;
 --green1-h:125; --green1-s:39%; --green1-l:94%;
 --green1-hsl:var(--green1-h) var(--green1-s) var(--green1-l);
 --green1:hsl(var(--green1-hsl));

 --green1-on-rgb:rgb(47, 127, 51);
 --green1-on-hex:#2f7f33;
 --green1-on-h:123; --green1-on-s:46%; --green1-on-l:34%;
 --green1-on-hsl:var(--green1-on-h) var(--green1-on-s) var(--green1-on-l);
 --green1-on:hsl(var(--green1-on-hsl));

 --green2-rgb:rgb(86, 184, 71);
 --green2-hex:#56b847;
 --green2-h:112; --green2-s:44%; --green2-l:50%;
 --green2-hsl:var(--green2-h) var(--green2-s) var(--green2-l);
 --green2:hsl(var(--green2-hsl));

 --green2-on-rgb:rgb(255, 255, 255);
 --green2-on-hex:#ffffff;
 --green2-on-h:0; --green2-on-s:0%; --green2-on-l:100%;
 --green2-on-hsl:var(--green2-on-h) var(--green2-on-s) var(--green2-on-l);
 --green2-on:hsl(var(--green2-on-hsl));

 --green3-rgb:rgb(70, 118, 55);
 --green3-hex:#467637;
 --green3-h:106; --green3-s:36%; --green3-l:34%;
 --green3-hsl:var(--green3-h) var(--green3-s) var(--green3-l);
 --green3:hsl(var(--green3-hsl));

 --green3-on-rgb:rgb(255, 255, 255);
 --green3-on-hex:#ffffff;
 --green3-on-h:0; --green3-on-s:0%; --green3-on-l:100%;
 --green3-on-hsl:var(--green3-on-h) var(--green3-on-s) var(--green3-on-l);
 --green3-on:hsl(var(--green3-on-hsl));


 /* TODO : everything from here should be in UI.css */
 --error-background-color:hsl(var(--red1-hsl) / 0.35);
 --error-border-color:var(--red2);
 --error-color:var(--red1-on);

 --info-background-color:hsl(var(--white-hsl) / 0.35);
 --info-border-color:var(--blue2);
 --info-color:var(--grey8);

 --success-background-color:hsl(var(--green1-hsl) / 0.35);
 --success-border-color:var(--green3);
 --success-color:var(--green1-on);

 --warning-background-color:hsl(var(--white-hsl) / 0.35);
 --warning-border-color:var(--orange1);
 --warning-color:var(--grey8);

 --link:var(--blue3);
 --link-hover:var(--blue4);

 --link-destructive:var(--red2);
 --link-destructive-hover:var(--red3);

 --body-background-color:var(--grey3);

 --header-background-color:var(--blue4);
 --header-background-gradient:linear-gradient(145deg, var(--blue6) 0%, var(--blue4) 20%, var(--blue4) 100%);
 --header-color:var(--blue4-on);
 --header-sub-title-color:var(--blue3);
 --header-link:var(--blue4-on);
 --header-link-hover:var(--blue1);

 --main-background-color:var(--white);
 --main-color:var(--grey8);

 --section-header-background-color:var(--grey3);
 --section-header-color:var(--blue4);
 --section-header-link:var(--blue4);

 --card-header-color:var(--blue4);
 --card-header-link:var(--blue4);

 --footer-background-color:var(--grey3);
 --footer-color:var(--grey3-on);
 --footer-border-color:var(--grey5);
}