:root {
    /* neutral */
    --color-neutral-100: #f8f9fa;
    --color-neutral-200: #f1f3f5;
    --color-neutral-300: #e9ecee;
    --color-neutral-400: #dee2e6;
    --color-neutral-500: #cfd4da;
    --color-neutral-600: #adb5bd;
    --color-neutral-700: #868e96;
    --color-neutral-800: #495057;
    --color-neutral-900: #343a40;
    --color-neutral-1000: #20252a;
    /* grey */
    --color-grey-100: #f8f9fa;
    --color-grey-200: #e1e7ec;
    --color-grey-300: #d5dde5;
    --color-grey-400: #ccd4db;
    --color-grey-500: #aebecd;
    --color-grey-600: #929fb1;
    --color-grey-700: #6e7a8a;
    --color-grey-800: #404b5a;
    --color-grey-900: #202833;
    /* primary */
    /*  accents */
    /*  teal */
    --color-teal-100: #e7fffe;
    --color-teal-200: #a8eeeb;
    --color-teal-300: #6ed7d3;
    --color-teal-400: #3caea3;
    --color-teal-500: #2a9187;
    --color-teal-600: #1c655e;
    --color-teal-700: #104443;
    /*  yellow */
    --color-yellow-100: #fffcf4;
    --color-yellow-200: #fdf3d7;
    --color-yellow-300: #fae29f;
    --color-yellow-400: #f4ca64;
    --color-yellow-500: #caa53d;
    --color-yellow-600: #8c6d1f;
    --color-yellow-700: #5c4812;
    /*  red */
    --color-red-100: #fce8e8;
    --color-red-200: #f4aaaa;
    --color-red-300: #e36363;
    --color-red-400: #dc3030;
    --color-red-500: #b72020;
    --color-red-600: #881a1c;
    --color-red-700: #5f1717;
    /*  green */
    --color-green-100: #e3fcec;
    --color-green-200: #a8eec1;
    --color-green-300: #74d99f;
    --color-green-400: #38c172;
    --color-green-500: #249d57;
    --color-green-600: #177741;
    --color-green-700: #165239;
    /*  blue */
    --color-blue-100: #eff8ff;
    --color-blue-200: #aad4f5;
    --color-blue-300: #63a2d8;
    --color-blue-400: #3183c8;
    --color-blue-500: #2368a2;
    --color-blue-600: #1a4971;
    --color-blue-700: #12283a;
}

.color-neutral-100 {
    color: var(--color-neutral-100);
}

.color-neutral-200 {
    color: var(--color-neutral-200);
}

.color-neutral-300 {
    color: var(--color-neutral-300);
}

.color-neutral-400 {
    color: var(--color-neutral-400);
}

.color-neutral-500 {
    color: var(--color-neutral-500);
}

.color-neutral-600 {
    color: var(--color-neutral-600);
}

.color-neutral-700 {
    color: var(--color-neutral-700);
}

.color-neutral-800 {
    color: var(--color-neutral-800);
}

.color-neutral-900 {
    color: var(--color-neutral-900);
}

.color-neutral-1000 {
    color: var(--color-neutral-1000);
}

.neutral-100 {
    background-color: var(--color-neutral-100);
}

.neutral-200 {
    background-color: var(--color-neutral-200);
}

.neutral-300 {
    background-color: var(--color-neutral-300);
}

.neutral-400 {
    background-color: var(--color-neutral-400);
}

.neutral-500 {
    background-color: var(--color-neutral-500);
}

.neutral-600 {
    background-color: var(--color-neutral-600);
}

.neutral-700 {
    background-color: var(--color-neutral-700);
}

.neutral-800 {
    background-color: var(--color-neutral-800);
}

.neutral-900 {
    background-color: var(--color-neutral-900);
}

.neutral-1000 {
    background-color: var(--color-neutral-1000);
}

.grey-100 {
    background-color: var(--color-grey-100);
}

.grey-200 {
    background-color: var(--color-grey-200);
}

.grey-300 {
    background-color: var(--color-grey-300);
}

.grey-400 {
    background-color: var(--color-grey-400);
}

.grey-500 {
    background-color: var(--color-grey-500);
}

.grey-600 {
    background-color: var(--color-grey-600);
}

.grey-700 {
    background-color: var(--color-grey-700);
}

.teal-100 {
    background-color: var(--color-teal-100);
}

.teal-200 {
    background-color: var(--color-teal-200);
}

.teal-300 {
    background-color: var(--color-teal-300);
}

.teal-400 {
    background-color: var(--color-teal-400);
}

.teal-500 {
    background-color: var(--color-teal-500);
}

.teal-600 {
    background-color: var(--color-teal-600);
}

.teal-700 {
    background-color: var(--color-teal-700);
}

.yellow-100 {
    background-color: var(--color-yellow-100);
}

.yellow-200 {
    background-color: var(--color-yellow-200);
}

.yellow-300 {
    background-color: var(--color-yellow-300);
}

.yellow-400 {
    background-color: var(--color-yellow-400);
}

.yellow-500 {
    background-color: var(--color-yellow-500);
}

.yellow-600 {
    background-color: var(--color-yellow-600);
}

.yellow-700 {
    background-color: var(--color-yellow-700);
}

.red-100 {
    background-color: var(--color-red-100);
}

.red-200 {
    background-color: var(--color-red-200);
}

.red-300 {
    background-color: var(--color-red-300);
}

.red-400 {
    background-color: var(--color-red-400);
}

.red-500 {
    background-color: var(--color-red-500);
}

.red-600 {
    background-color: var(--color-red-600);
}

.red-700 {
    background-color: var(--color-red-700);
}

.green-100 {
    background-color: var(--color-green-100);
}

.green-200 {
    background-color: var(--color-green-200);
}

.green-300 {
    background-color: var(--color-green-300);
}

.green-400 {
    background-color: var(--color-green-400);
}

.green-500 {
    background-color: var(--color-green-500);
}

.green-600 {
    background-color: var(--color-green-600);
}

.green-700 {
    background-color: var(--color-green-700);
}

.blue-100 {
    background-color: var(--color-blue-100);
}

.blue-200 {
    background-color: var(--color-blue-200);
}

.blue-300 {
    background-color: var(--color-blue-300);
}

.blue-400 {
    background-color: var(--color-blue-400);
}

.blue-500 {
    background-color: var(--color-blue-500);
}

.blue-600 {
    background-color: var(--color-blue-600);
}

.blue-700 {
    background-color: var(--color-blue-700);
}