:root {
    --thm-primary-1: #8c0000;
    --thm-primary-2: #c60000;
    --thm-primary-3: #d32929;
    --thm-primary-4: #df5353;
    --thm-primary-5: #eb8585;
    --thm-primary-6: #f4b5b5;
    --thm-primary-7: #fbe3e3;
    --thm-secondary-1: #242424;
    --thm-secondary-2: #373737;
    --thm-secondary-3: #505050;
    --thm-secondary-4: #737373;
    --thm-secondary-5: #999999;
    --thm-secondary-6: #c5c5c5;
    --thm-secondary-7: #ebebeb;
    --thm-accent-1: #9d6700;
    --thm-accent-2: #bf8400;
    --thm-accent-3: #e5a900;
    --thm-accent-4: #fdbf03;
    --thm-accent-5: #ffd453;
    --thm-accent-6: #fde086;
    --thm-accent-7: #fcecb9;
    --thm-background-1: #d9d9d9;
    --thm-background-2: #e5e5e5;
    --thm-background-3: #ebebeb;
    --thm-background-4: #f1f1f1;
    --thm-background-5: #f5f7fa;
    --thm-background-6: #fafafa;
    --thm-background-7: #ffffff;
    --thm-text-1: #111111;
    --thm-text-2: #232323;
    --thm-text-3: #303030;
    --thm-text-4: #505050;
    --thm-text-5: #686868;
    --thm-text-6: #909090;
    --thm-text-7: #cccccc;
    --thm-green-1: #49720f;
    --thm-green-2: #73ac19;
    --thm-green-3: #86c325;
    --thm-green-4: #98cf3f;
    --thm-green-5: #bde182;
    --thm-green-6: #cfeaa4;
    --thm-green-7: #eafad1;
    --thm-blue-1: #0f4876;
    --thm-blue-2: #23547c;
    --thm-blue-3: #2f6999;
    --thm-blue-4: #4888bc;
    --thm-blue-5: #6da5d3;
    --thm-blue-6: #9dcaee;
    --thm-blue-7: #c2def6;
    --thm-orange-1: #ab4100;
    --thm-orange-2: #d45300;
    --thm-orange-3: #fb701a;
    --thm-orange-4: #f29052;
    --thm-orange-5: #f7af82;
    --thm-orange-6: #fdc7a6;
    --thm-orange-7: #fdd9c3;
    --thm-cyan-1: #087078;
    --thm-cyan-2: #10979f;
    --thm-cyan-3: #1aa6ae;
    --thm-cyan-4: #30b2b9;
    --thm-cyan-5: #47c8cf;
    --thm-cyan-6: #56d4da;
    --thm-cyan-7: #79e8ee;
    --bc-r0: var(--thm-primary-1);
    --bc-r1: var(--thm-primary-2);
    --bc-r2: var(--thm-primary-3);
    --bc-r3: var(--thm-primary-4);
    --bc-r4: var(--thm-primary-5);
    --bc-r5: var(--thm-primary-6);
    --bc-r6: var(--thm-primary-7);
    --bc-r7: var(--thm-primary-7);
    --bc-r8: var(--thm-primary-7);
    --bc-r9: var(--thm-primary-7);
    --bc-b0: var(--thm-blue-1);
    --bc-b1: var(--thm-blue-2);
    --bc-b2: var(--thm-blue-3);
    --bc-b3: var(--thm-blue-4);
    --bc-b4: var(--thm-blue-5);
    --bc-b5: var(--thm-blue-6);
    --bc-b6: var(--thm-blue-7);
    --bc-g0: var(--thm-green-1);
    --bc-g1: var(--thm-green-2);
    --bc-g2: var(--thm-green-3);
    --bc-g3: var(--thm-green-4);
    --bc-g4: var(--thm-green-5);
    --bc-g5: var(--thm-green-6);
    --bc-g6: var(--thm-green-7);
    --bc-y0: var(--thm-accent-1);
    --bc-y1: var(--thm-accent-2);
    --bc-y2: var(--thm-accent-3);
    --bc-y3: var(--thm-accent-4);
    --bc-y4: var(--thm-accent-5);
    --bc-y5: var(--thm-accent-6);
    --bc-y6: var(--thm-accent-7);
    --bc-o0: var(--thm-orange-1);
    --bc-o1: var(--thm-orange-2);
    --bc-o2: var(--thm-orange-3);
    --bc-o3: var(--thm-orange-4);
    --bc-o4: var(--thm-orange-5);
    --bc-o5: var(--thm-orange-6);
    --bc-o6: var(--thm-orange-7);
    --bc-c0: var(--thm-cyan-1);
    --bc-c1: var(--thm-cyan-2);
    --bc-c2: var(--thm-cyan-3);
    --bc-c3: var(--thm-cyan-4);
    --bc-c4: var(--thm-cyan-5);
    --bc-c5: var(--thm-cyan-6);
    --bc-c6: var(--thm-cyan-7);
    --bc-n0: var(--thm-text-1);
    --bc-n1: var(--thm-text-2);
    --bc-n2: var(--thm-text-3);
    --bc-n3: var(--thm-text-4);
    --bc-n4: var(--thm-text-5);
    --bc-n5: var(--thm-background-1);
    --bc-n6: var(--thm-background-2);
    --bc-n7: var(--thm-background-3);
    --bc-n8: var(--thm-background-4);
}
.clr-r0 { color: var(--bc-r0); }
.bgc-r0 { background-color: var(--bc-r0); }
.clr-r1 { color: var(--bc-r1); }
.bgc-r1 { background-color: var(--bc-r1); }
.clr-r2 { color: var(--bc-r2); }
.bgc-r2 { background-color: var(--bc-r2); }
.clr-r3 { color: var(--bc-r3); }
.bgc-r3 { background-color: var(--bc-r3); }
.clr-r4 { color: var(--bc-r4); }
.bgc-r4 { background-color: var(--bc-r4); }
.clr-r5 { color: var(--bc-r5); }
.bgc-r5 { background-color: var(--bc-r5); }
.clr-r6 { color: var(--bc-r6); }
.bgc-r6 { background-color: var(--bc-r6); }
.clr-b0 { color: var(--bc-b0); }
.bgc-b0 { background-color: var(--bc-b0); }
.clr-b1 { color: var(--bc-b1); }
.bgc-b1 { background-color: var(--bc-b1); }
.clr-b2 { color: var(--bc-b2); }
.bgc-b2 { background-color: var(--bc-b2); }
.clr-b3 { color: var(--bc-b3); }
.bgc-b3 { background-color: var(--bc-b3); }
.clr-b4 { color: var(--bc-b4); }
.bgc-b4 { background-color: var(--bc-b4); }
.clr-b5 { color: var(--bc-b5); }
.bgc-b5 { background-color: var(--bc-b5); }
.clr-b6 { color: var(--bc-b6); }
.bgc-b6 { background-color: var(--bc-b6); }
.clr-g0 { color: var(--bc-g0); }
.bgc-g0 { background-color: var(--bc-g0); }
.clr-g1 { color: var(--bc-g1); }
.bgc-g1 { background-color: var(--bc-g1); }
.clr-g2 { color: var(--bc-g2); }
.bgc-g2 { background-color: var(--bc-g2); }
.clr-g3 { color: var(--bc-g3); }
.bgc-g3 { background-color: var(--bc-g3); }
.clr-g4 { color: var(--bc-g4); }
.bgc-g4 { background-color: var(--bc-g4); }
.clr-g5 { color: var(--bc-g5); }
.bgc-g5 { background-color: var(--bc-g5); }
.clr-g6 { color: var(--bc-g6); }
.bgc-g6 { background-color: var(--bc-g6); }
.clr-y0 { color: var(--bc-y0); }
.bgc-y0 { background-color: var(--bc-y0); }
.clr-y1 { color: var(--bc-y1); }
.bgc-y1 { background-color: var(--bc-y1); }
.clr-y2 { color: var(--bc-y2); }
.bgc-y2 { background-color: var(--bc-y2); }
.clr-y3 { color: var(--bc-y3); }
.bgc-y3 { background-color: var(--bc-y3); }
.clr-y4 { color: var(--bc-y4); }
.bgc-y4 { background-color: var(--bc-y4); }
.clr-y5 { color: var(--bc-y5); }
.bgc-y5 { background-color: var(--bc-y5); }
.clr-y6 { color: var(--bc-y6); }
.bgc-y6 { background-color: var(--bc-y6); }
.clr-o0 { color: var(--bc-o0); }
.bgc-o0 { background-color: var(--bc-o0); }
.clr-o1 { color: var(--bc-o1); }
.bgc-o1 { background-color: var(--bc-o1); }
.clr-o2 { color: var(--bc-o2); }
.bgc-o2 { background-color: var(--bc-o2); }
.clr-o3 { color: var(--bc-o3); }
.bgc-o3 { background-color: var(--bc-o3); }
.clr-o4 { color: var(--bc-o4); }
.bgc-o4 { background-color: var(--bc-o4); }
.clr-o5 { color: var(--bc-o5); }
.bgc-o5 { background-color: var(--bc-o5); }
.clr-o6 { color: var(--bc-o6); }
.bgc-o6 { background-color: var(--bc-o6); }
.clr-c0 { color: var(--bc-c0); }
.bgc-c0 { background-color: var(--bc-c0); }
.clr-c1 { color: var(--bc-c1); }
.bgc-c1 { background-color: var(--bc-c1); }
.clr-c2 { color: var(--bc-c2); }
.bgc-c2 { background-color: var(--bc-c2); }
.clr-c3 { color: var(--bc-c3); }
.bgc-c3 { background-color: var(--bc-c3); }
.clr-c4 { color: var(--bc-c4); }
.bgc-c4 { background-color: var(--bc-c4); }
.clr-c5 { color: var(--bc-c5); }
.bgc-c5 { background-color: var(--bc-c5); }
.clr-c6 { color: var(--bc-c6); }
.bgc-c6 { background-color: var(--bc-c6); }
.clr-n0 { color: var(--bc-n0); }
.bgc-n0 { background-color: var(--bc-n0); }
.clr-n1 { color: var(--bc-n1); }
.bgc-n1 { background-color: var(--bc-n1); }
.clr-n2 { color: var(--bc-n2); }
.bgc-n2 { background-color: var(--bc-n2); }
.clr-n3 { color: var(--bc-n3); }
.bgc-n3 { background-color: var(--bc-n3); }
.clr-n4 { color: var(--bc-n4); }
.bgc-n4 { background-color: var(--bc-n4); }
.clr-n5 { color: var(--bc-n5); }
.bgc-n5 { background-color: var(--bc-n5); }
.clr-n6 { color: var(--bc-n6); }
.bgc-n6 { background-color: var(--bc-n6); }
.clr-n7 { color: var(--bc-n7); }
.bgc-n7 { background-color: var(--bc-n7); }
.clr-n8 { color: var(--bc-n8); }
.bgc-n8 { background-color: var(--bc-n8); }
.clr-white { color: var(--thm-background-7); }
.bgc-white { background-color: var(--thm-background-7); }
:root {
    --surface-1: #c62529;
    --surface-2: #bd1e1c;
    --surface-3: #6c1110;
    --surface-4: #ffffff;
    --surface-5: #eaeaea;
    --surface-6: #30afe5;
    --surface-7: #87cdeb;
    --surface-8: #b00e0e;
    --surface-9: #feb23f;
    --surface-10: #212531;
    --surface-11: #b98585;
    --surface-12: #f1c481;
    --surface-13: #333a50;
    --surface-14: #1f1f1f;
    --surface-15: #828282;
    --surface-16: rgba(0, 0, 0, 0.2);
    --surface-17: #1d1d1d27;
    --surface-18: #f5f7fa;
    --surface-19: #f0f4f8;
    --surface-20: #000;
    --surface-21: rgba(0, 0, 0, 0.1);
    --surface-22: #fff;
    --surface-23: #ff3b3b;
    --surface-24: rgba(0, 0, 0, 0.25);
    --surface-25: rgba(0, 0, 0, 0.55);
    --surface-26: rgba(18, 18, 18, 0.194);
    --surface-27: rgba(0, 0, 0, 0.45);
    --surface-28: rgba(49, 49, 49, 0.8);
    --surface-29: rgba(255, 183, 0, 0.9);
    --surface-30: #111;
    --surface-31: rgba(176, 176, 176, 0.85);
    --surface-32: rgba(0,0,0,0.4);
    --surface-33: #4d4b4bbf;
    --surface-34: rgba(0,0,0,0.5);
    --surface-35: #ccc;
    --surface-36: #f2b705;
}