:root {
    --color-sys-blue-dark: #08457b;
    --color-sys-blue: #0b63b0;
    --color-sys-blue-mid: #78acd8;
    --color-sys-blue-light: #e6f4ff;

    --color-sys-green-dark: #205720;
    --color-sys-green: #2d7c2d;
    --color-sys-green-mid: #8bbc8b;
    --color-sys-green-light: #e9fbe9;

    --color-sys-yellow-dark: #815e00;
    --color-sys-yellow: #b88600;
    --color-sys-yellow-mid: #dcc06e;
    --color-sys-yellow-light: #fff9db;

    --color-sys-purple-dark: #452672;
    --color-sys-purple: #6236a3;
    --color-sys-purple-mid: #aa91d1;
    --color-sys-purple-light: #f3ecff;

    --color-sys-orange-dark: #8a4200;
    --color-sys-orange: #c55e00;
    --color-sys-orange-mid: #e2a973;
    --color-sys-orange-light: #fff4e6;

    --color-sys-grey-dark: #40454a;
    --color-sys-grey: #5c636a;
    --color-sys-grey-mid: #a8acb0;
    --color-sys-grey-light: #f5f6f7;

    --color-sys-red-dark: #7d1c1f;
    --color-sys-red: #b3282d;
    --color-sys-red-mid: #d98a8c;
    --color-sys-red-light: #ffecec;

    --color-sys-cyan-dark: #035762;
    --color-sys-cyan: #047c8c;
    --color-sys-cyan-mid: #74bac4;
    --color-sys-cyan-light: #e3f9fc;

    --color-sys-brown-dark: #55371d;
    --color-sys-brown: #7a4f2a;
    --color-sys-brown-mid: #b99f88;
    --color-sys-brown-light: #f8efe6;

    --color-sys-olive-dark: #3c4c08;
    --color-sys-olive: #566c0b;
    --color-sys-olive-mid: #a2b173;
    --color-sys-olive-light: #eff6db;

    --color-sys-magenta-dark: #6d0d4c;
    --color-sys-magenta: #9c136d;
    --color-sys-magenta-mid: #cc7eb2;
    --color-sys-magenta-light: #fde9f6;
}

.sys-blue-mid-bg-color {
    background-color: var(--color-sys-blue-mid);
}
.sys-blue-light-bg-color {
    background-color: var(--color-sys-blue-light);
}

.sys-green-mid-bg-color {
    background-color: var(--color-sys-green-mid);
}
.sys-green-light-bg-color {
    background-color: var(--color-sys-green-light);
}

.sys-yellow-mid-bg-color {
    background-color: var(--color-sys-yellow-mid);
}
.sys-yellow-light-bg-color {
    background-color: var(--color-sys-yellow-light);
}

.sys-purple-mid-bg-color {
    background-color: var(--color-sys-purple-mid);
}
.sys-purple-light-bg-color {
    background-color: var(--color-sys-purple-light);
}

.sys-orange-mid-bg-color {
    background-color: var(--color-sys-orange-mid);
}
.sys-orange-light-bg-color {
    background-color: var(--color-sys-orange-light);
}

.sys-grey-mid-bg-color {
    background-color: var(--color-sys-grey-mid);
}
.sys-grey-light-bg-color {
    background-color: var(--color-sys-grey-light);
}

.sys-red-mid-bg-color {
    background-color: var(--color-sys-red-mid);
}
.sys-red-light-bg-color {
    background-color: var(--color-sys-red-light);
}

.sys-cyan-mid-bg-color {
    background-color: var(--color-sys-cyan-mid);
}
.sys-cyan-light-bg-color {
    background-color: var(--color-sys-cyan-light);
}

.sys-brown-mid-bg-color {
    background-color: var(--color-sys-brown-mid);
}
.sys-brown-light-bg-color {
    background-color: var(--color-sys-brown-light);
}

.sys-olive-mid-bg-color {
    background-color: var(--color-sys-olive-mid);
}
.sys-olive-light-bg-color {
    background-color: var(--color-sys-olive-light);
}

.sys-magenta-mid-bg-color {
    background-color: var(--color-sys-magenta-mid);
}
.sys-magenta-light-bg-color {
    background-color: var(--color-sys-magenta-light);
}