Color Screamer

Mid Red

mid-red-12

mid-red-11

mid-red-10

mid-red-9

mid-red-8

mid-red-7

mid-red-6

mid-red-5

mid-red-4

mid-red-3

mid-red-2

mid-red-1

Warm Red

warm-red-12

warm-red-11

warm-red-10

warm-red-9

warm-red-8

warm-red-7

warm-red-6

warm-red-5

warm-red-4

warm-red-3

warm-red-2

warm-red-1

Orange

orange-12

orange-11

orange-10

orange-9

orange-8

orange-7

orange-6

orange-5

orange-4

orange-3

orange-2

orange-1

Warm Yellow

warm-yellow-12

warm-yellow-11

warm-yellow-10

warm-yellow-9

warm-yellow-8

warm-yellow-7

warm-yellow-6

warm-yellow-5

warm-yellow-4

warm-yellow-3

warm-yellow-2

warm-yellow-1

Mid Yellow

mid-yellow-12

mid-yellow-11

mid-yellow-10

mid-yellow-9

mid-yellow-8

mid-yellow-7

mid-yellow-6

mid-yellow-5

mid-yellow-4

mid-yellow-3

mid-yellow-2

mid-yellow-1

Cool Yellow

cool-yellow-12

cool-yellow-11

cool-yellow-10

cool-yellow-9

cool-yellow-8

cool-yellow-7

cool-yellow-6

cool-yellow-5

cool-yellow-4

cool-yellow-3

cool-yellow-2

cool-yellow-1

Yellow Green

yellow-green-12

yellow-green-11

yellow-green-10

yellow-green-9

yellow-green-8

yellow-green-7

yellow-green-6

yellow-green-5

yellow-green-4

yellow-green-3

yellow-green-2

yellow-green-1

Warm Green

warm-green-12

warm-green-11

warm-green-10

warm-green-9

warm-green-8

warm-green-7

warm-green-6

warm-green-5

warm-green-4

warm-green-3

warm-green-2

warm-green-1

Mid Green

mid-green-12

mid-green-11

mid-green-10

mid-green-9

mid-green-8

mid-green-7

mid-green-6

mid-green-5

mid-green-4

mid-green-3

mid-green-2

mid-green-1

Cool Green

cool-green-12

cool-green-11

cool-green-10

cool-green-9

cool-green-8

cool-green-7

cool-green-6

cool-green-5

cool-green-4

cool-green-3

cool-green-2

cool-green-1

Green Cyan

green-cyan-12

green-cyan-11

green-cyan-10

green-cyan-9

green-cyan-8

green-cyan-7

green-cyan-6

green-cyan-5

green-cyan-4

green-cyan-3

green-cyan-2

green-cyan-1

Warm Cyan

warm-cyan-12

warm-cyan-11

warm-cyan-10

warm-cyan-9

warm-cyan-8

warm-cyan-7

warm-cyan-6

warm-cyan-5

warm-cyan-4

warm-cyan-3

warm-cyan-2

warm-cyan-1

Mid Cyan

mid-cyan-12

mid-cyan-11

mid-cyan-10

mid-cyan-9

mid-cyan-8

mid-cyan-7

mid-cyan-6

mid-cyan-5

mid-cyan-4

mid-cyan-3

mid-cyan-2

mid-cyan-1

Cool Cyan

cool-cyan-12

cool-cyan-11

cool-cyan-10

cool-cyan-9

cool-cyan-8

cool-cyan-7

cool-cyan-6

cool-cyan-5

cool-cyan-4

cool-cyan-3

cool-cyan-2

cool-cyan-1

Blue Cyan

blue-cyan-12

blue-cyan-11

blue-cyan-10

blue-cyan-9

blue-cyan-8

blue-cyan-7

blue-cyan-6

blue-cyan-5

blue-cyan-4

blue-cyan-3

blue-cyan-2

blue-cyan-1

Cool Blue

cool-blue-12

cool-blue-11

cool-blue-10

cool-blue-9

cool-blue-8

cool-blue-7

cool-blue-6

cool-blue-5

cool-blue-4

cool-blue-3

cool-blue-2

cool-blue-1

Mid Blue

mid-blue-12

mid-blue-11

mid-blue-10

mid-blue-9

mid-blue-8

mid-blue-7

mid-blue-6

mid-blue-5

mid-blue-4

mid-blue-3

mid-blue-2

mid-blue-1

Warm Blue

warm-blue-12

warm-blue-11

warm-blue-10

warm-blue-9

warm-blue-8

warm-blue-7

warm-blue-6

warm-blue-5

warm-blue-4

warm-blue-3

warm-blue-2

warm-blue-1

Violet

violet-12

violet-11

violet-10

violet-9

violet-8

violet-7

violet-6

violet-5

violet-4

violet-3

violet-2

violet-1

Cool Magenta

cool-magenta-12

cool-magenta-11

cool-magenta-10

cool-magenta-9

cool-magenta-8

cool-magenta-7

cool-magenta-6

cool-magenta-5

cool-magenta-4

cool-magenta-3

cool-magenta-2

cool-magenta-1

Mid Magenta

mid-magenta-12

mid-magenta-11

mid-magenta-10

mid-magenta-9

mid-magenta-8

mid-magenta-7

mid-magenta-6

mid-magenta-5

mid-magenta-4

mid-magenta-3

mid-magenta-2

mid-magenta-1

Warm Magenta

warm-magenta-12

warm-magenta-11

warm-magenta-10

warm-magenta-9

warm-magenta-8

warm-magenta-7

warm-magenta-6

warm-magenta-5

warm-magenta-4

warm-magenta-3

warm-magenta-2

warm-magenta-1

Red Magenta

red-magenta-12

red-magenta-11

red-magenta-10

red-magenta-9

red-magenta-8

red-magenta-7

red-magenta-6

red-magenta-5

red-magenta-4

red-magenta-3

red-magenta-2

red-magenta-1

Cool Red

cool-red-12

cool-red-11

cool-red-10

cool-red-9

cool-red-8

cool-red-7

cool-red-6

cool-red-5

cool-red-4

cool-red-3

cool-red-2

cool-red-1

gray-13

gray-12

gray-11

gray-10

gray-9

gray-8

gray-7

gray-6

gray-5

gray-4

gray-3

gray-2

gray-1

⛔ danger-message

✅ success-message

⚠️ warning-message

ℹ️ info-message

complementary

Uses two colors opposite each other on the color wheel, creating high contrast and vibrant looks.

complementary-bg-1

complementary-bg-2

analogous

Uses colors that are next to each other on the color wheel, providing a harmonious and pleasing design.

analogous-bg-1

analogous-bg-2

analogous-bg-3

monochromatic

Uses variations in lightness and saturation of a single color, offering a cohesive and elegant look.

monochromatic-bg-1

monochromatic-bg-2

monochromatic-bg-3

monochromatic-bg-4

monochromatic-bg-5

monochromatic-bg-6

monochromatic-bg-7

monochromatic-bg-8

monochromatic-bg-9

monochromatic-bg-10

monochromatic-bg-11

monochromatic-bg-12

split-complementary

Uses a base color and two adjacent colors to its complementary, balancing contrast and harmony.

split-complementary-bg-1

split-complementary-bg-2

split-complementary-bg-3

triadic

Uses three colors evenly spaced around the color wheel, creating vibrant and balanced designs.

triadic-bg-1

triadic-bg-2

triadic-bg-3

tetradic

Uses four colors arranged into two complementary pairs, offering rich variety and high contrast.

tetradic-bg-1

tetradic-bg-2

tetradic-bg-3

tetradic-bg-4

rectangle

A type of tetradic scheme forming a rectangle on the color wheel with two complementary pairs, providing balanced contrast.

rectangle-bg-1

rectangle-bg-2

rectangle-bg-3

rectangle-bg-4

double-split-complementary

Uses two pairs of complementary colors, enhancing diversity and balance without the intensity of a tetradic scheme.

double-split-complementary-bg-1

double-split-complementary-bg-2

double-split-complementary-bg-3

double-split-complementary-bg-4

:root {
--blue-cyan: #1e90ff;
--blue-cyan-12: #004e99;
--blue-cyan-11: #005ab3;
--blue-cyan-10: #0067cc;
--blue-cyan-9: #0074e6;
--blue-cyan-8: #0081ff;
--blue-cyan-7: #1a8eff;
--blue-cyan-6: #339aff;
--blue-cyan-5: #4da7ff;
--blue-cyan-4: #66b4ff;
--blue-cyan-3: #80c0ff;
--blue-cyan-2: #99cdff;
--blue-cyan-1: #b3d9ff;
--cool-blue: #1e58ff;
--cool-blue-12: #002799;
--cool-blue-11: #002eb3;
--cool-blue-10: #0034cc;
--cool-blue-9: #003be6;
--cool-blue-8: #0041ff;
--cool-blue-7: #1a54ff;
--cool-blue-6: #3367ff;
--cool-blue-5: #4d7aff;
--cool-blue-4: #668dff;
--cool-blue-3: #80a0ff;
--cool-blue-2: #99b3ff;
--cool-blue-1: #b3c6ff;
--mid-blue: #1e20ff;
--mid-blue-12: #000199;
--mid-blue-11: #0001b3;
--mid-blue-10: #0001cc;
--mid-blue-9: #0002e6;
--mid-blue-8: #0002ff;
--mid-blue-7: #1a1bff;
--mid-blue-6: #3334ff;
--mid-blue-5: #4d4eff;
--mid-blue-4: #6667ff;
--mid-blue-3: #8080ff;
--mid-blue-2: #999aff;
--mid-blue-1: #b3b3ff;
--warm-blue: #551eff;
--warm-blue-12: #250099;
--warm-blue-11: #2b00b3;
--warm-blue-10: #3200cc;
--warm-blue-9: #3800e6;
--warm-blue-8: #3e00ff;
--warm-blue-7: #511aff;
--warm-blue-6: #6533ff;
--warm-blue-5: #784dff;
--warm-blue-4: #8b66ff;
--warm-blue-3: #9f80ff;
--warm-blue-2: #b299ff;
--warm-blue-1: #c5b3ff;
--violet: #8d1eff;
--violet-12: #4b0099;
--violet-11: #5800b3;
--violet-10: #6500cc;
--violet-9: #7100e6;
--violet-8: #7e00ff;
--violet-7: #8b1aff;
--violet-6: #9833ff;
--violet-5: #a54dff;
--violet-4: #b166ff;
--violet-3: #be80ff;
--violet-2: #cb99ff;
--violet-1: #d8b3ff;
--cool-magenta: #c51eff;
--cool-magenta-12: #720099;
--cool-magenta-11: #8500b3;
--cool-magenta-10: #9800cc;
--cool-magenta-9: #ab00e6;
--cool-magenta-8: #be00ff;
--cool-magenta-7: #c41aff;
--cool-magenta-6: #cb33ff;
--cool-magenta-5: #d14dff;
--cool-magenta-4: #d866ff;
--cool-magenta-3: #de80ff;
--cool-magenta-2: #e599ff;
--cool-magenta-1: #ebb3ff;
--mid-magenta: #fe1eff;
--mid-magenta-12: #980099;
--mid-magenta-11: #b100b3;
--mid-magenta-10: #cb00cc;
--mid-magenta-9: #e400e6;
--mid-magenta-8: #fd00ff;
--mid-magenta-7: #fd1aff;
--mid-magenta-6: #fe33ff;
--mid-magenta-5: #fe4dff;
--mid-magenta-4: #fe66ff;
--mid-magenta-3: #fe80ff;
--mid-magenta-2: #fe99ff;
--mid-magenta-1: #feb3ff;
--warm-magenta: #ff1ec8;
--warm-magenta-12: #990074;
--warm-magenta-11: #b30087;
--warm-magenta-10: #cc009a;
--warm-magenta-9: #e600ae;
--warm-magenta-8: #ff00c1;
--warm-magenta-7: #ff1ac7;
--warm-magenta-6: #ff33cd;
--warm-magenta-5: #ff4dd4;
--warm-magenta-4: #ff66da;
--warm-magenta-3: #ff80e0;
--warm-magenta-2: #ff99e6;
--warm-magenta-1: #ffb3ec;
--red-magenta: #ff1e90;
--red-magenta-12: #99004e;
--red-magenta-11: #b3005a;
--red-magenta-10: #cc0067;
--red-magenta-9: #e60074;
--red-magenta-8: #ff0081;
--red-magenta-7: #ff1a8e;
--red-magenta-6: #ff339a;
--red-magenta-5: #ff4da7;
--red-magenta-4: #ff66b4;
--red-magenta-3: #ff80c0;
--red-magenta-2: #ff99cd;
--red-magenta-1: #ffb3d9;
--cool-red: #ff1e58;
--cool-red-12: #990027;
--cool-red-11: #b3002e;
--cool-red-10: #cc0034;
--cool-red-9: #e6003b;
--cool-red-8: #ff0041;
--cool-red-7: #ff1a54;
--cool-red-6: #ff3367;
--cool-red-5: #ff4d7a;
--cool-red-4: #ff668d;
--cool-red-3: #ff80a0;
--cool-red-2: #ff99b3;
--cool-red-1: #ffb3c6;
--mid-red: #ff1e1f;
--mid-red-12: #990001;
--mid-red-11: #b30001;
--mid-red-10: #cc0001;
--mid-red-9: #e60002;
--mid-red-8: #ff0002;
--mid-red-7: #ff1a1b;
--mid-red-6: #ff3334;
--mid-red-5: #ff4d4e;
--mid-red-4: #ff6667;
--mid-red-3: #ff8080;
--mid-red-2: #ff999a;
--mid-red-1: #ffb3b3;
--warm-red: #ff551e;
--warm-red-12: #992500;
--warm-red-11: #b32b00;
--warm-red-10: #cc3200;
--warm-red-9: #e63800;
--warm-red-8: #ff3e00;
--warm-red-7: #ff511a;
--warm-red-6: #ff6533;
--warm-red-5: #ff784d;
--warm-red-4: #ff8b66;
--warm-red-3: #ff9f80;
--warm-red-2: #ffb299;
--warm-red-1: #ffc5b3;
--orange: #ff8d1e;
--orange-12: #994b00;
--orange-11: #b35800;
--orange-10: #cc6500;
--orange-9: #e67100;
--orange-8: #ff7e00;
--orange-7: #ff8b1a;
--orange-6: #ff9833;
--orange-5: #ffa54d;
--orange-4: #ffb166;
--orange-3: #ffbe80;
--orange-2: #ffcb99;
--orange-1: #ffd8b3;
--warm-yellow: #ffc51e;
--warm-yellow-12: #997200;
--warm-yellow-11: #b38500;
--warm-yellow-10: #cc9800;
--warm-yellow-9: #e6ab00;
--warm-yellow-8: #ffbe00;
--warm-yellow-7: #ffc41a;
--warm-yellow-6: #ffcb33;
--warm-yellow-5: #ffd14d;
--warm-yellow-4: #ffd866;
--warm-yellow-3: #ffde80;
--warm-yellow-2: #ffe599;
--warm-yellow-1: #ffebb3;
--mid-yellow: #fffe1e;
--mid-yellow-12: #999800;
--mid-yellow-11: #b3b100;
--mid-yellow-10: #cccb00;
--mid-yellow-9: #e6e400;
--mid-yellow-8: #fffd00;
--mid-yellow-7: #fffd1a;
--mid-yellow-6: #fffe33;
--mid-yellow-5: #fffe4d;
--mid-yellow-4: #fffe66;
--mid-yellow-3: #fffe80;
--mid-yellow-2: #fffe99;
--mid-yellow-1: #fffeb3;
--cool-yellow: #c8ff1e;
--cool-yellow-12: #749900;
--cool-yellow-11: #87b300;
--cool-yellow-10: #9acc00;
--cool-yellow-9: #aee600;
--cool-yellow-8: #c1ff00;
--cool-yellow-7: #c7ff1a;
--cool-yellow-6: #cdff33;
--cool-yellow-5: #d4ff4d;
--cool-yellow-4: #daff66;
--cool-yellow-3: #e0ff80;
--cool-yellow-2: #e6ff99;
--cool-yellow-1: #ecffb3;
--yellow-green: #90ff1e;
--yellow-green-12: #4e9900;
--yellow-green-11: #5ab300;
--yellow-green-10: #67cc00;
--yellow-green-9: #74e600;
--yellow-green-8: #81ff00;
--yellow-green-7: #8eff1a;
--yellow-green-6: #9aff33;
--yellow-green-5: #a7ff4d;
--yellow-green-4: #b4ff66;
--yellow-green-3: #c0ff80;
--yellow-green-2: #cdff99;
--yellow-green-1: #d9ffb3;
--warm-green: #58ff1e;
--warm-green-12: #279900;
--warm-green-11: #2eb300;
--warm-green-10: #34cc00;
--warm-green-9: #3be600;
--warm-green-8: #41ff00;
--warm-green-7: #54ff1a;
--warm-green-6: #67ff33;
--warm-green-5: #7aff4d;
--warm-green-4: #8dff66;
--warm-green-3: #a0ff80;
--warm-green-2: #b3ff99;
--warm-green-1: #c6ffb3;
--mid-green: #1fff1e;
--mid-green-12: #019900;
--mid-green-11: #01b300;
--mid-green-10: #01cc00;
--mid-green-9: #02e600;
--mid-green-8: #02ff00;
--mid-green-7: #1bff1a;
--mid-green-6: #34ff33;
--mid-green-5: #4eff4d;
--mid-green-4: #67ff66;
--mid-green-3: #80ff80;
--mid-green-2: #9aff99;
--mid-green-1: #b3ffb3;
--cool-green: #1eff55;
--cool-green-12: #009925;
--cool-green-11: #00b32b;
--cool-green-10: #00cc32;
--cool-green-9: #00e638;
--cool-green-8: #00ff3e;
--cool-green-7: #1aff51;
--cool-green-6: #33ff65;
--cool-green-5: #4dff78;
--cool-green-4: #66ff8b;
--cool-green-3: #80ff9f;
--cool-green-2: #99ffb2;
--cool-green-1: #b3ffc5;
--green-cyan: #1eff8d;
--green-cyan-12: #00994b;
--green-cyan-11: #00b358;
--green-cyan-10: #00cc65;
--green-cyan-9: #00e671;
--green-cyan-8: #00ff7e;
--green-cyan-7: #1aff8b;
--green-cyan-6: #33ff98;
--green-cyan-5: #4dffa5;
--green-cyan-4: #66ffb1;
--green-cyan-3: #80ffbe;
--green-cyan-2: #99ffcb;
--green-cyan-1: #b3ffd8;
--warm-cyan: #1effc5;
--warm-cyan-12: #009972;
--warm-cyan-11: #00b385;
--warm-cyan-10: #00cc98;
--warm-cyan-9: #00e6ab;
--warm-cyan-8: #00ffbe;
--warm-cyan-7: #1affc4;
--warm-cyan-6: #33ffcb;
--warm-cyan-5: #4dffd1;
--warm-cyan-4: #66ffd8;
--warm-cyan-3: #80ffde;
--warm-cyan-2: #99ffe5;
--warm-cyan-1: #b3ffeb;
--mid-cyan: #1efffe;
--mid-cyan-12: #009998;
--mid-cyan-11: #00b3b1;
--mid-cyan-10: #00cccb;
--mid-cyan-9: #00e6e4;
--mid-cyan-8: #00fffd;
--mid-cyan-7: #1afffd;
--mid-cyan-6: #33fffe;
--mid-cyan-5: #4dfffe;
--mid-cyan-4: #66fffe;
--mid-cyan-3: #80fffe;
--mid-cyan-2: #99fffe;
--mid-cyan-1: #b3fffe;
--cool-cyan: #1ec8ff;
--cool-cyan-12: #007499;
--cool-cyan-11: #0087b3;
--cool-cyan-10: #009acc;
--cool-cyan-9: #00aee6;
--cool-cyan-8: #00c1ff;
--cool-cyan-7: #1ac7ff;
--cool-cyan-6: #33cdff;
--cool-cyan-5: #4dd4ff;
--cool-cyan-4: #66daff;
--cool-cyan-3: #80e0ff;
--cool-cyan-2: #99e6ff;
--cool-cyan-1: #b3ecff;
--gray-13: #0d0d0d;
--gray-12: #141414;
--gray-11: #2b2b2b;
--gray-10: #404040;
--gray-9: #545454;
--gray-8: #6b6b6b;
--gray-7: #808080;
--gray-6: #949494;
--gray-5: #ababab;
--gray-4: #bfbfbf;
--gray-3: #d4d4d4;
--gray-2: #ebebeb;
--gray-1: #f2f2f2;

}
.blue-cyan-12-bg {background-color: var(--blue-cyan-12);}
.blue-cyan-12-fg {color: var(--blue-cyan-12);}
.blue-cyan-11-bg {background-color: var(--blue-cyan-11);}
.blue-cyan-11-fg {color: var(--blue-cyan-11);}
.blue-cyan-10-bg {background-color: var(--blue-cyan-10);}
.blue-cyan-10-fg {color: var(--blue-cyan-10);}
.blue-cyan-9-bg {background-color: var(--blue-cyan-9);}
.blue-cyan-9-fg {color: var(--blue-cyan-9);}
.blue-cyan-8-bg {background-color: var(--blue-cyan-8);}
.blue-cyan-8-fg {color: var(--blue-cyan-8);}
.blue-cyan-7-bg {background-color: var(--blue-cyan-7);}
.blue-cyan-7-fg {color: var(--blue-cyan-7);}
.blue-cyan-6-bg {background-color: var(--blue-cyan-6);}
.blue-cyan-6-fg {color: var(--blue-cyan-6);}
.blue-cyan-5-bg {background-color: var(--blue-cyan-5);}
.blue-cyan-5-fg {color: var(--blue-cyan-5);}
.blue-cyan-4-bg {background-color: var(--blue-cyan-4);}
.blue-cyan-4-fg {color: var(--blue-cyan-4);}
.blue-cyan-3-bg {background-color: var(--blue-cyan-3);}
.blue-cyan-3-fg {color: var(--blue-cyan-3);}
.blue-cyan-2-bg {background-color: var(--blue-cyan-2);}
.blue-cyan-2-fg {color: var(--blue-cyan-2);}
.blue-cyan-1-bg {background-color: var(--blue-cyan-1);}
.blue-cyan-1-fg {color: var(--blue-cyan-1);}
.cool-blue-12-bg {background-color: var(--cool-blue-12);}
.cool-blue-12-fg {color: var(--cool-blue-12);}
.cool-blue-11-bg {background-color: var(--cool-blue-11);}
.cool-blue-11-fg {color: var(--cool-blue-11);}
.cool-blue-10-bg {background-color: var(--cool-blue-10);}
.cool-blue-10-fg {color: var(--cool-blue-10);}
.cool-blue-9-bg {background-color: var(--cool-blue-9);}
.cool-blue-9-fg {color: var(--cool-blue-9);}
.cool-blue-8-bg {background-color: var(--cool-blue-8);}
.cool-blue-8-fg {color: var(--cool-blue-8);}
.cool-blue-7-bg {background-color: var(--cool-blue-7);}
.cool-blue-7-fg {color: var(--cool-blue-7);}
.cool-blue-6-bg {background-color: var(--cool-blue-6);}
.cool-blue-6-fg {color: var(--cool-blue-6);}
.cool-blue-5-bg {background-color: var(--cool-blue-5);}
.cool-blue-5-fg {color: var(--cool-blue-5);}
.cool-blue-4-bg {background-color: var(--cool-blue-4);}
.cool-blue-4-fg {color: var(--cool-blue-4);}
.cool-blue-3-bg {background-color: var(--cool-blue-3);}
.cool-blue-3-fg {color: var(--cool-blue-3);}
.cool-blue-2-bg {background-color: var(--cool-blue-2);}
.cool-blue-2-fg {color: var(--cool-blue-2);}
.cool-blue-1-bg {background-color: var(--cool-blue-1);}
.cool-blue-1-fg {color: var(--cool-blue-1);}
.mid-blue-12-bg {background-color: var(--mid-blue-12);}
.mid-blue-12-fg {color: var(--mid-blue-12);}
.mid-blue-11-bg {background-color: var(--mid-blue-11);}
.mid-blue-11-fg {color: var(--mid-blue-11);}
.mid-blue-10-bg {background-color: var(--mid-blue-10);}
.mid-blue-10-fg {color: var(--mid-blue-10);}
.mid-blue-9-bg {background-color: var(--mid-blue-9);}
.mid-blue-9-fg {color: var(--mid-blue-9);}
.mid-blue-8-bg {background-color: var(--mid-blue-8);}
.mid-blue-8-fg {color: var(--mid-blue-8);}
.mid-blue-7-bg {background-color: var(--mid-blue-7);}
.mid-blue-7-fg {color: var(--mid-blue-7);}
.mid-blue-6-bg {background-color: var(--mid-blue-6);}
.mid-blue-6-fg {color: var(--mid-blue-6);}
.mid-blue-5-bg {background-color: var(--mid-blue-5);}
.mid-blue-5-fg {color: var(--mid-blue-5);}
.mid-blue-4-bg {background-color: var(--mid-blue-4);}
.mid-blue-4-fg {color: var(--mid-blue-4);}
.mid-blue-3-bg {background-color: var(--mid-blue-3);}
.mid-blue-3-fg {color: var(--mid-blue-3);}
.mid-blue-2-bg {background-color: var(--mid-blue-2);}
.mid-blue-2-fg {color: var(--mid-blue-2);}
.mid-blue-1-bg {background-color: var(--mid-blue-1);}
.mid-blue-1-fg {color: var(--mid-blue-1);}
.warm-blue-12-bg {background-color: var(--warm-blue-12);}
.warm-blue-12-fg {color: var(--warm-blue-12);}
.warm-blue-11-bg {background-color: var(--warm-blue-11);}
.warm-blue-11-fg {color: var(--warm-blue-11);}
.warm-blue-10-bg {background-color: var(--warm-blue-10);}
.warm-blue-10-fg {color: var(--warm-blue-10);}
.warm-blue-9-bg {background-color: var(--warm-blue-9);}
.warm-blue-9-fg {color: var(--warm-blue-9);}
.warm-blue-8-bg {background-color: var(--warm-blue-8);}
.warm-blue-8-fg {color: var(--warm-blue-8);}
.warm-blue-7-bg {background-color: var(--warm-blue-7);}
.warm-blue-7-fg {color: var(--warm-blue-7);}
.warm-blue-6-bg {background-color: var(--warm-blue-6);}
.warm-blue-6-fg {color: var(--warm-blue-6);}
.warm-blue-5-bg {background-color: var(--warm-blue-5);}
.warm-blue-5-fg {color: var(--warm-blue-5);}
.warm-blue-4-bg {background-color: var(--warm-blue-4);}
.warm-blue-4-fg {color: var(--warm-blue-4);}
.warm-blue-3-bg {background-color: var(--warm-blue-3);}
.warm-blue-3-fg {color: var(--warm-blue-3);}
.warm-blue-2-bg {background-color: var(--warm-blue-2);}
.warm-blue-2-fg {color: var(--warm-blue-2);}
.warm-blue-1-bg {background-color: var(--warm-blue-1);}
.warm-blue-1-fg {color: var(--warm-blue-1);}
.violet-12-bg {background-color: var(--violet-12);}
.violet-12-fg {color: var(--violet-12);}
.violet-11-bg {background-color: var(--violet-11);}
.violet-11-fg {color: var(--violet-11);}
.violet-10-bg {background-color: var(--violet-10);}
.violet-10-fg {color: var(--violet-10);}
.violet-9-bg {background-color: var(--violet-9);}
.violet-9-fg {color: var(--violet-9);}
.violet-8-bg {background-color: var(--violet-8);}
.violet-8-fg {color: var(--violet-8);}
.violet-7-bg {background-color: var(--violet-7);}
.violet-7-fg {color: var(--violet-7);}
.violet-6-bg {background-color: var(--violet-6);}
.violet-6-fg {color: var(--violet-6);}
.violet-5-bg {background-color: var(--violet-5);}
.violet-5-fg {color: var(--violet-5);}
.violet-4-bg {background-color: var(--violet-4);}
.violet-4-fg {color: var(--violet-4);}
.violet-3-bg {background-color: var(--violet-3);}
.violet-3-fg {color: var(--violet-3);}
.violet-2-bg {background-color: var(--violet-2);}
.violet-2-fg {color: var(--violet-2);}
.violet-1-bg {background-color: var(--violet-1);}
.violet-1-fg {color: var(--violet-1);}
.cool-magenta-12-bg {background-color: var(--cool-magenta-12);}
.cool-magenta-12-fg {color: var(--cool-magenta-12);}
.cool-magenta-11-bg {background-color: var(--cool-magenta-11);}
.cool-magenta-11-fg {color: var(--cool-magenta-11);}
.cool-magenta-10-bg {background-color: var(--cool-magenta-10);}
.cool-magenta-10-fg {color: var(--cool-magenta-10);}
.cool-magenta-9-bg {background-color: var(--cool-magenta-9);}
.cool-magenta-9-fg {color: var(--cool-magenta-9);}
.cool-magenta-8-bg {background-color: var(--cool-magenta-8);}
.cool-magenta-8-fg {color: var(--cool-magenta-8);}
.cool-magenta-7-bg {background-color: var(--cool-magenta-7);}
.cool-magenta-7-fg {color: var(--cool-magenta-7);}
.cool-magenta-6-bg {background-color: var(--cool-magenta-6);}
.cool-magenta-6-fg {color: var(--cool-magenta-6);}
.cool-magenta-5-bg {background-color: var(--cool-magenta-5);}
.cool-magenta-5-fg {color: var(--cool-magenta-5);}
.cool-magenta-4-bg {background-color: var(--cool-magenta-4);}
.cool-magenta-4-fg {color: var(--cool-magenta-4);}
.cool-magenta-3-bg {background-color: var(--cool-magenta-3);}
.cool-magenta-3-fg {color: var(--cool-magenta-3);}
.cool-magenta-2-bg {background-color: var(--cool-magenta-2);}
.cool-magenta-2-fg {color: var(--cool-magenta-2);}
.cool-magenta-1-bg {background-color: var(--cool-magenta-1);}
.cool-magenta-1-fg {color: var(--cool-magenta-1);}
.mid-magenta-12-bg {background-color: var(--mid-magenta-12);}
.mid-magenta-12-fg {color: var(--mid-magenta-12);}
.mid-magenta-11-bg {background-color: var(--mid-magenta-11);}
.mid-magenta-11-fg {color: var(--mid-magenta-11);}
.mid-magenta-10-bg {background-color: var(--mid-magenta-10);}
.mid-magenta-10-fg {color: var(--mid-magenta-10);}
.mid-magenta-9-bg {background-color: var(--mid-magenta-9);}
.mid-magenta-9-fg {color: var(--mid-magenta-9);}
.mid-magenta-8-bg {background-color: var(--mid-magenta-8);}
.mid-magenta-8-fg {color: var(--mid-magenta-8);}
.mid-magenta-7-bg {background-color: var(--mid-magenta-7);}
.mid-magenta-7-fg {color: var(--mid-magenta-7);}
.mid-magenta-6-bg {background-color: var(--mid-magenta-6);}
.mid-magenta-6-fg {color: var(--mid-magenta-6);}
.mid-magenta-5-bg {background-color: var(--mid-magenta-5);}
.mid-magenta-5-fg {color: var(--mid-magenta-5);}
.mid-magenta-4-bg {background-color: var(--mid-magenta-4);}
.mid-magenta-4-fg {color: var(--mid-magenta-4);}
.mid-magenta-3-bg {background-color: var(--mid-magenta-3);}
.mid-magenta-3-fg {color: var(--mid-magenta-3);}
.mid-magenta-2-bg {background-color: var(--mid-magenta-2);}
.mid-magenta-2-fg {color: var(--mid-magenta-2);}
.mid-magenta-1-bg {background-color: var(--mid-magenta-1);}
.mid-magenta-1-fg {color: var(--mid-magenta-1);}
.warm-magenta-12-bg {background-color: var(--warm-magenta-12);}
.warm-magenta-12-fg {color: var(--warm-magenta-12);}
.warm-magenta-11-bg {background-color: var(--warm-magenta-11);}
.warm-magenta-11-fg {color: var(--warm-magenta-11);}
.warm-magenta-10-bg {background-color: var(--warm-magenta-10);}
.warm-magenta-10-fg {color: var(--warm-magenta-10);}
.warm-magenta-9-bg {background-color: var(--warm-magenta-9);}
.warm-magenta-9-fg {color: var(--warm-magenta-9);}
.warm-magenta-8-bg {background-color: var(--warm-magenta-8);}
.warm-magenta-8-fg {color: var(--warm-magenta-8);}
.warm-magenta-7-bg {background-color: var(--warm-magenta-7);}
.warm-magenta-7-fg {color: var(--warm-magenta-7);}
.warm-magenta-6-bg {background-color: var(--warm-magenta-6);}
.warm-magenta-6-fg {color: var(--warm-magenta-6);}
.warm-magenta-5-bg {background-color: var(--warm-magenta-5);}
.warm-magenta-5-fg {color: var(--warm-magenta-5);}
.warm-magenta-4-bg {background-color: var(--warm-magenta-4);}
.warm-magenta-4-fg {color: var(--warm-magenta-4);}
.warm-magenta-3-bg {background-color: var(--warm-magenta-3);}
.warm-magenta-3-fg {color: var(--warm-magenta-3);}
.warm-magenta-2-bg {background-color: var(--warm-magenta-2);}
.warm-magenta-2-fg {color: var(--warm-magenta-2);}
.warm-magenta-1-bg {background-color: var(--warm-magenta-1);}
.warm-magenta-1-fg {color: var(--warm-magenta-1);}
.red-magenta-12-bg {background-color: var(--red-magenta-12);}
.red-magenta-12-fg {color: var(--red-magenta-12);}
.red-magenta-11-bg {background-color: var(--red-magenta-11);}
.red-magenta-11-fg {color: var(--red-magenta-11);}
.red-magenta-10-bg {background-color: var(--red-magenta-10);}
.red-magenta-10-fg {color: var(--red-magenta-10);}
.red-magenta-9-bg {background-color: var(--red-magenta-9);}
.red-magenta-9-fg {color: var(--red-magenta-9);}
.red-magenta-8-bg {background-color: var(--red-magenta-8);}
.red-magenta-8-fg {color: var(--red-magenta-8);}
.red-magenta-7-bg {background-color: var(--red-magenta-7);}
.red-magenta-7-fg {color: var(--red-magenta-7);}
.red-magenta-6-bg {background-color: var(--red-magenta-6);}
.red-magenta-6-fg {color: var(--red-magenta-6);}
.red-magenta-5-bg {background-color: var(--red-magenta-5);}
.red-magenta-5-fg {color: var(--red-magenta-5);}
.red-magenta-4-bg {background-color: var(--red-magenta-4);}
.red-magenta-4-fg {color: var(--red-magenta-4);}
.red-magenta-3-bg {background-color: var(--red-magenta-3);}
.red-magenta-3-fg {color: var(--red-magenta-3);}
.red-magenta-2-bg {background-color: var(--red-magenta-2);}
.red-magenta-2-fg {color: var(--red-magenta-2);}
.red-magenta-1-bg {background-color: var(--red-magenta-1);}
.red-magenta-1-fg {color: var(--red-magenta-1);}
.cool-red-12-bg {background-color: var(--cool-red-12);}
.cool-red-12-fg {color: var(--cool-red-12);}
.cool-red-11-bg {background-color: var(--cool-red-11);}
.cool-red-11-fg {color: var(--cool-red-11);}
.cool-red-10-bg {background-color: var(--cool-red-10);}
.cool-red-10-fg {color: var(--cool-red-10);}
.cool-red-9-bg {background-color: var(--cool-red-9);}
.cool-red-9-fg {color: var(--cool-red-9);}
.cool-red-8-bg {background-color: var(--cool-red-8);}
.cool-red-8-fg {color: var(--cool-red-8);}
.cool-red-7-bg {background-color: var(--cool-red-7);}
.cool-red-7-fg {color: var(--cool-red-7);}
.cool-red-6-bg {background-color: var(--cool-red-6);}
.cool-red-6-fg {color: var(--cool-red-6);}
.cool-red-5-bg {background-color: var(--cool-red-5);}
.cool-red-5-fg {color: var(--cool-red-5);}
.cool-red-4-bg {background-color: var(--cool-red-4);}
.cool-red-4-fg {color: var(--cool-red-4);}
.cool-red-3-bg {background-color: var(--cool-red-3);}
.cool-red-3-fg {color: var(--cool-red-3);}
.cool-red-2-bg {background-color: var(--cool-red-2);}
.cool-red-2-fg {color: var(--cool-red-2);}
.cool-red-1-bg {background-color: var(--cool-red-1);}
.cool-red-1-fg {color: var(--cool-red-1);}
.mid-red-12-bg {background-color: var(--mid-red-12);}
.mid-red-12-fg {color: var(--mid-red-12);}
.mid-red-11-bg {background-color: var(--mid-red-11);}
.mid-red-11-fg {color: var(--mid-red-11);}
.mid-red-10-bg {background-color: var(--mid-red-10);}
.mid-red-10-fg {color: var(--mid-red-10);}
.mid-red-9-bg {background-color: var(--mid-red-9);}
.mid-red-9-fg {color: var(--mid-red-9);}
.mid-red-8-bg {background-color: var(--mid-red-8);}
.mid-red-8-fg {color: var(--mid-red-8);}
.mid-red-7-bg {background-color: var(--mid-red-7);}
.mid-red-7-fg {color: var(--mid-red-7);}
.mid-red-6-bg {background-color: var(--mid-red-6);}
.mid-red-6-fg {color: var(--mid-red-6);}
.mid-red-5-bg {background-color: var(--mid-red-5);}
.mid-red-5-fg {color: var(--mid-red-5);}
.mid-red-4-bg {background-color: var(--mid-red-4);}
.mid-red-4-fg {color: var(--mid-red-4);}
.mid-red-3-bg {background-color: var(--mid-red-3);}
.mid-red-3-fg {color: var(--mid-red-3);}
.mid-red-2-bg {background-color: var(--mid-red-2);}
.mid-red-2-fg {color: var(--mid-red-2);}
.mid-red-1-bg {background-color: var(--mid-red-1);}
.mid-red-1-fg {color: var(--mid-red-1);}
.warm-red-12-bg {background-color: var(--warm-red-12);}
.warm-red-12-fg {color: var(--warm-red-12);}
.warm-red-11-bg {background-color: var(--warm-red-11);}
.warm-red-11-fg {color: var(--warm-red-11);}
.warm-red-10-bg {background-color: var(--warm-red-10);}
.warm-red-10-fg {color: var(--warm-red-10);}
.warm-red-9-bg {background-color: var(--warm-red-9);}
.warm-red-9-fg {color: var(--warm-red-9);}
.warm-red-8-bg {background-color: var(--warm-red-8);}
.warm-red-8-fg {color: var(--warm-red-8);}
.warm-red-7-bg {background-color: var(--warm-red-7);}
.warm-red-7-fg {color: var(--warm-red-7);}
.warm-red-6-bg {background-color: var(--warm-red-6);}
.warm-red-6-fg {color: var(--warm-red-6);}
.warm-red-5-bg {background-color: var(--warm-red-5);}
.warm-red-5-fg {color: var(--warm-red-5);}
.warm-red-4-bg {background-color: var(--warm-red-4);}
.warm-red-4-fg {color: var(--warm-red-4);}
.warm-red-3-bg {background-color: var(--warm-red-3);}
.warm-red-3-fg {color: var(--warm-red-3);}
.warm-red-2-bg {background-color: var(--warm-red-2);}
.warm-red-2-fg {color: var(--warm-red-2);}
.warm-red-1-bg {background-color: var(--warm-red-1);}
.warm-red-1-fg {color: var(--warm-red-1);}
.orange-12-bg {background-color: var(--orange-12);}
.orange-12-fg {color: var(--orange-12);}
.orange-11-bg {background-color: var(--orange-11);}
.orange-11-fg {color: var(--orange-11);}
.orange-10-bg {background-color: var(--orange-10);}
.orange-10-fg {color: var(--orange-10);}
.orange-9-bg {background-color: var(--orange-9);}
.orange-9-fg {color: var(--orange-9);}
.orange-8-bg {background-color: var(--orange-8);}
.orange-8-fg {color: var(--orange-8);}
.orange-7-bg {background-color: var(--orange-7);}
.orange-7-fg {color: var(--orange-7);}
.orange-6-bg {background-color: var(--orange-6);}
.orange-6-fg {color: var(--orange-6);}
.orange-5-bg {background-color: var(--orange-5);}
.orange-5-fg {color: var(--orange-5);}
.orange-4-bg {background-color: var(--orange-4);}
.orange-4-fg {color: var(--orange-4);}
.orange-3-bg {background-color: var(--orange-3);}
.orange-3-fg {color: var(--orange-3);}
.orange-2-bg {background-color: var(--orange-2);}
.orange-2-fg {color: var(--orange-2);}
.orange-1-bg {background-color: var(--orange-1);}
.orange-1-fg {color: var(--orange-1);}
.warm-yellow-12-bg {background-color: var(--warm-yellow-12);}
.warm-yellow-12-fg {color: var(--warm-yellow-12);}
.warm-yellow-11-bg {background-color: var(--warm-yellow-11);}
.warm-yellow-11-fg {color: var(--warm-yellow-11);}
.warm-yellow-10-bg {background-color: var(--warm-yellow-10);}
.warm-yellow-10-fg {color: var(--warm-yellow-10);}
.warm-yellow-9-bg {background-color: var(--warm-yellow-9);}
.warm-yellow-9-fg {color: var(--warm-yellow-9);}
.warm-yellow-8-bg {background-color: var(--warm-yellow-8);}
.warm-yellow-8-fg {color: var(--warm-yellow-8);}
.warm-yellow-7-bg {background-color: var(--warm-yellow-7);}
.warm-yellow-7-fg {color: var(--warm-yellow-7);}
.warm-yellow-6-bg {background-color: var(--warm-yellow-6);}
.warm-yellow-6-fg {color: var(--warm-yellow-6);}
.warm-yellow-5-bg {background-color: var(--warm-yellow-5);}
.warm-yellow-5-fg {color: var(--warm-yellow-5);}
.warm-yellow-4-bg {background-color: var(--warm-yellow-4);}
.warm-yellow-4-fg {color: var(--warm-yellow-4);}
.warm-yellow-3-bg {background-color: var(--warm-yellow-3);}
.warm-yellow-3-fg {color: var(--warm-yellow-3);}
.warm-yellow-2-bg {background-color: var(--warm-yellow-2);}
.warm-yellow-2-fg {color: var(--warm-yellow-2);}
.warm-yellow-1-bg {background-color: var(--warm-yellow-1);}
.warm-yellow-1-fg {color: var(--warm-yellow-1);}
.mid-yellow-12-bg {background-color: var(--mid-yellow-12);}
.mid-yellow-12-fg {color: var(--mid-yellow-12);}
.mid-yellow-11-bg {background-color: var(--mid-yellow-11);}
.mid-yellow-11-fg {color: var(--mid-yellow-11);}
.mid-yellow-10-bg {background-color: var(--mid-yellow-10);}
.mid-yellow-10-fg {color: var(--mid-yellow-10);}
.mid-yellow-9-bg {background-color: var(--mid-yellow-9);}
.mid-yellow-9-fg {color: var(--mid-yellow-9);}
.mid-yellow-8-bg {background-color: var(--mid-yellow-8);}
.mid-yellow-8-fg {color: var(--mid-yellow-8);}
.mid-yellow-7-bg {background-color: var(--mid-yellow-7);}
.mid-yellow-7-fg {color: var(--mid-yellow-7);}
.mid-yellow-6-bg {background-color: var(--mid-yellow-6);}
.mid-yellow-6-fg {color: var(--mid-yellow-6);}
.mid-yellow-5-bg {background-color: var(--mid-yellow-5);}
.mid-yellow-5-fg {color: var(--mid-yellow-5);}
.mid-yellow-4-bg {background-color: var(--mid-yellow-4);}
.mid-yellow-4-fg {color: var(--mid-yellow-4);}
.mid-yellow-3-bg {background-color: var(--mid-yellow-3);}
.mid-yellow-3-fg {color: var(--mid-yellow-3);}
.mid-yellow-2-bg {background-color: var(--mid-yellow-2);}
.mid-yellow-2-fg {color: var(--mid-yellow-2);}
.mid-yellow-1-bg {background-color: var(--mid-yellow-1);}
.mid-yellow-1-fg {color: var(--mid-yellow-1);}
.cool-yellow-12-bg {background-color: var(--cool-yellow-12);}
.cool-yellow-12-fg {color: var(--cool-yellow-12);}
.cool-yellow-11-bg {background-color: var(--cool-yellow-11);}
.cool-yellow-11-fg {color: var(--cool-yellow-11);}
.cool-yellow-10-bg {background-color: var(--cool-yellow-10);}
.cool-yellow-10-fg {color: var(--cool-yellow-10);}
.cool-yellow-9-bg {background-color: var(--cool-yellow-9);}
.cool-yellow-9-fg {color: var(--cool-yellow-9);}
.cool-yellow-8-bg {background-color: var(--cool-yellow-8);}
.cool-yellow-8-fg {color: var(--cool-yellow-8);}
.cool-yellow-7-bg {background-color: var(--cool-yellow-7);}
.cool-yellow-7-fg {color: var(--cool-yellow-7);}
.cool-yellow-6-bg {background-color: var(--cool-yellow-6);}
.cool-yellow-6-fg {color: var(--cool-yellow-6);}
.cool-yellow-5-bg {background-color: var(--cool-yellow-5);}
.cool-yellow-5-fg {color: var(--cool-yellow-5);}
.cool-yellow-4-bg {background-color: var(--cool-yellow-4);}
.cool-yellow-4-fg {color: var(--cool-yellow-4);}
.cool-yellow-3-bg {background-color: var(--cool-yellow-3);}
.cool-yellow-3-fg {color: var(--cool-yellow-3);}
.cool-yellow-2-bg {background-color: var(--cool-yellow-2);}
.cool-yellow-2-fg {color: var(--cool-yellow-2);}
.cool-yellow-1-bg {background-color: var(--cool-yellow-1);}
.cool-yellow-1-fg {color: var(--cool-yellow-1);}
.yellow-green-12-bg {background-color: var(--yellow-green-12);}
.yellow-green-12-fg {color: var(--yellow-green-12);}
.yellow-green-11-bg {background-color: var(--yellow-green-11);}
.yellow-green-11-fg {color: var(--yellow-green-11);}
.yellow-green-10-bg {background-color: var(--yellow-green-10);}
.yellow-green-10-fg {color: var(--yellow-green-10);}
.yellow-green-9-bg {background-color: var(--yellow-green-9);}
.yellow-green-9-fg {color: var(--yellow-green-9);}
.yellow-green-8-bg {background-color: var(--yellow-green-8);}
.yellow-green-8-fg {color: var(--yellow-green-8);}
.yellow-green-7-bg {background-color: var(--yellow-green-7);}
.yellow-green-7-fg {color: var(--yellow-green-7);}
.yellow-green-6-bg {background-color: var(--yellow-green-6);}
.yellow-green-6-fg {color: var(--yellow-green-6);}
.yellow-green-5-bg {background-color: var(--yellow-green-5);}
.yellow-green-5-fg {color: var(--yellow-green-5);}
.yellow-green-4-bg {background-color: var(--yellow-green-4);}
.yellow-green-4-fg {color: var(--yellow-green-4);}
.yellow-green-3-bg {background-color: var(--yellow-green-3);}
.yellow-green-3-fg {color: var(--yellow-green-3);}
.yellow-green-2-bg {background-color: var(--yellow-green-2);}
.yellow-green-2-fg {color: var(--yellow-green-2);}
.yellow-green-1-bg {background-color: var(--yellow-green-1);}
.yellow-green-1-fg {color: var(--yellow-green-1);}
.warm-green-12-bg {background-color: var(--warm-green-12);}
.warm-green-12-fg {color: var(--warm-green-12);}
.warm-green-11-bg {background-color: var(--warm-green-11);}
.warm-green-11-fg {color: var(--warm-green-11);}
.warm-green-10-bg {background-color: var(--warm-green-10);}
.warm-green-10-fg {color: var(--warm-green-10);}
.warm-green-9-bg {background-color: var(--warm-green-9);}
.warm-green-9-fg {color: var(--warm-green-9);}
.warm-green-8-bg {background-color: var(--warm-green-8);}
.warm-green-8-fg {color: var(--warm-green-8);}
.warm-green-7-bg {background-color: var(--warm-green-7);}
.warm-green-7-fg {color: var(--warm-green-7);}
.warm-green-6-bg {background-color: var(--warm-green-6);}
.warm-green-6-fg {color: var(--warm-green-6);}
.warm-green-5-bg {background-color: var(--warm-green-5);}
.warm-green-5-fg {color: var(--warm-green-5);}
.warm-green-4-bg {background-color: var(--warm-green-4);}
.warm-green-4-fg {color: var(--warm-green-4);}
.warm-green-3-bg {background-color: var(--warm-green-3);}
.warm-green-3-fg {color: var(--warm-green-3);}
.warm-green-2-bg {background-color: var(--warm-green-2);}
.warm-green-2-fg {color: var(--warm-green-2);}
.warm-green-1-bg {background-color: var(--warm-green-1);}
.warm-green-1-fg {color: var(--warm-green-1);}
.mid-green-12-bg {background-color: var(--mid-green-12);}
.mid-green-12-fg {color: var(--mid-green-12);}
.mid-green-11-bg {background-color: var(--mid-green-11);}
.mid-green-11-fg {color: var(--mid-green-11);}
.mid-green-10-bg {background-color: var(--mid-green-10);}
.mid-green-10-fg {color: var(--mid-green-10);}
.mid-green-9-bg {background-color: var(--mid-green-9);}
.mid-green-9-fg {color: var(--mid-green-9);}
.mid-green-8-bg {background-color: var(--mid-green-8);}
.mid-green-8-fg {color: var(--mid-green-8);}
.mid-green-7-bg {background-color: var(--mid-green-7);}
.mid-green-7-fg {color: var(--mid-green-7);}
.mid-green-6-bg {background-color: var(--mid-green-6);}
.mid-green-6-fg {color: var(--mid-green-6);}
.mid-green-5-bg {background-color: var(--mid-green-5);}
.mid-green-5-fg {color: var(--mid-green-5);}
.mid-green-4-bg {background-color: var(--mid-green-4);}
.mid-green-4-fg {color: var(--mid-green-4);}
.mid-green-3-bg {background-color: var(--mid-green-3);}
.mid-green-3-fg {color: var(--mid-green-3);}
.mid-green-2-bg {background-color: var(--mid-green-2);}
.mid-green-2-fg {color: var(--mid-green-2);}
.mid-green-1-bg {background-color: var(--mid-green-1);}
.mid-green-1-fg {color: var(--mid-green-1);}
.cool-green-12-bg {background-color: var(--cool-green-12);}
.cool-green-12-fg {color: var(--cool-green-12);}
.cool-green-11-bg {background-color: var(--cool-green-11);}
.cool-green-11-fg {color: var(--cool-green-11);}
.cool-green-10-bg {background-color: var(--cool-green-10);}
.cool-green-10-fg {color: var(--cool-green-10);}
.cool-green-9-bg {background-color: var(--cool-green-9);}
.cool-green-9-fg {color: var(--cool-green-9);}
.cool-green-8-bg {background-color: var(--cool-green-8);}
.cool-green-8-fg {color: var(--cool-green-8);}
.cool-green-7-bg {background-color: var(--cool-green-7);}
.cool-green-7-fg {color: var(--cool-green-7);}
.cool-green-6-bg {background-color: var(--cool-green-6);}
.cool-green-6-fg {color: var(--cool-green-6);}
.cool-green-5-bg {background-color: var(--cool-green-5);}
.cool-green-5-fg {color: var(--cool-green-5);}
.cool-green-4-bg {background-color: var(--cool-green-4);}
.cool-green-4-fg {color: var(--cool-green-4);}
.cool-green-3-bg {background-color: var(--cool-green-3);}
.cool-green-3-fg {color: var(--cool-green-3);}
.cool-green-2-bg {background-color: var(--cool-green-2);}
.cool-green-2-fg {color: var(--cool-green-2);}
.cool-green-1-bg {background-color: var(--cool-green-1);}
.cool-green-1-fg {color: var(--cool-green-1);}
.green-cyan-12-bg {background-color: var(--green-cyan-12);}
.green-cyan-12-fg {color: var(--green-cyan-12);}
.green-cyan-11-bg {background-color: var(--green-cyan-11);}
.green-cyan-11-fg {color: var(--green-cyan-11);}
.green-cyan-10-bg {background-color: var(--green-cyan-10);}
.green-cyan-10-fg {color: var(--green-cyan-10);}
.green-cyan-9-bg {background-color: var(--green-cyan-9);}
.green-cyan-9-fg {color: var(--green-cyan-9);}
.green-cyan-8-bg {background-color: var(--green-cyan-8);}
.green-cyan-8-fg {color: var(--green-cyan-8);}
.green-cyan-7-bg {background-color: var(--green-cyan-7);}
.green-cyan-7-fg {color: var(--green-cyan-7);}
.green-cyan-6-bg {background-color: var(--green-cyan-6);}
.green-cyan-6-fg {color: var(--green-cyan-6);}
.green-cyan-5-bg {background-color: var(--green-cyan-5);}
.green-cyan-5-fg {color: var(--green-cyan-5);}
.green-cyan-4-bg {background-color: var(--green-cyan-4);}
.green-cyan-4-fg {color: var(--green-cyan-4);}
.green-cyan-3-bg {background-color: var(--green-cyan-3);}
.green-cyan-3-fg {color: var(--green-cyan-3);}
.green-cyan-2-bg {background-color: var(--green-cyan-2);}
.green-cyan-2-fg {color: var(--green-cyan-2);}
.green-cyan-1-bg {background-color: var(--green-cyan-1);}
.green-cyan-1-fg {color: var(--green-cyan-1);}
.warm-cyan-12-bg {background-color: var(--warm-cyan-12);}
.warm-cyan-12-fg {color: var(--warm-cyan-12);}
.warm-cyan-11-bg {background-color: var(--warm-cyan-11);}
.warm-cyan-11-fg {color: var(--warm-cyan-11);}
.warm-cyan-10-bg {background-color: var(--warm-cyan-10);}
.warm-cyan-10-fg {color: var(--warm-cyan-10);}
.warm-cyan-9-bg {background-color: var(--warm-cyan-9);}
.warm-cyan-9-fg {color: var(--warm-cyan-9);}
.warm-cyan-8-bg {background-color: var(--warm-cyan-8);}
.warm-cyan-8-fg {color: var(--warm-cyan-8);}
.warm-cyan-7-bg {background-color: var(--warm-cyan-7);}
.warm-cyan-7-fg {color: var(--warm-cyan-7);}
.warm-cyan-6-bg {background-color: var(--warm-cyan-6);}
.warm-cyan-6-fg {color: var(--warm-cyan-6);}
.warm-cyan-5-bg {background-color: var(--warm-cyan-5);}
.warm-cyan-5-fg {color: var(--warm-cyan-5);}
.warm-cyan-4-bg {background-color: var(--warm-cyan-4);}
.warm-cyan-4-fg {color: var(--warm-cyan-4);}
.warm-cyan-3-bg {background-color: var(--warm-cyan-3);}
.warm-cyan-3-fg {color: var(--warm-cyan-3);}
.warm-cyan-2-bg {background-color: var(--warm-cyan-2);}
.warm-cyan-2-fg {color: var(--warm-cyan-2);}
.warm-cyan-1-bg {background-color: var(--warm-cyan-1);}
.warm-cyan-1-fg {color: var(--warm-cyan-1);}
.mid-cyan-12-bg {background-color: var(--mid-cyan-12);}
.mid-cyan-12-fg {color: var(--mid-cyan-12);}
.mid-cyan-11-bg {background-color: var(--mid-cyan-11);}
.mid-cyan-11-fg {color: var(--mid-cyan-11);}
.mid-cyan-10-bg {background-color: var(--mid-cyan-10);}
.mid-cyan-10-fg {color: var(--mid-cyan-10);}
.mid-cyan-9-bg {background-color: var(--mid-cyan-9);}
.mid-cyan-9-fg {color: var(--mid-cyan-9);}
.mid-cyan-8-bg {background-color: var(--mid-cyan-8);}
.mid-cyan-8-fg {color: var(--mid-cyan-8);}
.mid-cyan-7-bg {background-color: var(--mid-cyan-7);}
.mid-cyan-7-fg {color: var(--mid-cyan-7);}
.mid-cyan-6-bg {background-color: var(--mid-cyan-6);}
.mid-cyan-6-fg {color: var(--mid-cyan-6);}
.mid-cyan-5-bg {background-color: var(--mid-cyan-5);}
.mid-cyan-5-fg {color: var(--mid-cyan-5);}
.mid-cyan-4-bg {background-color: var(--mid-cyan-4);}
.mid-cyan-4-fg {color: var(--mid-cyan-4);}
.mid-cyan-3-bg {background-color: var(--mid-cyan-3);}
.mid-cyan-3-fg {color: var(--mid-cyan-3);}
.mid-cyan-2-bg {background-color: var(--mid-cyan-2);}
.mid-cyan-2-fg {color: var(--mid-cyan-2);}
.mid-cyan-1-bg {background-color: var(--mid-cyan-1);}
.mid-cyan-1-fg {color: var(--mid-cyan-1);}
.cool-cyan-12-bg {background-color: var(--cool-cyan-12);}
.cool-cyan-12-fg {color: var(--cool-cyan-12);}
.cool-cyan-11-bg {background-color: var(--cool-cyan-11);}
.cool-cyan-11-fg {color: var(--cool-cyan-11);}
.cool-cyan-10-bg {background-color: var(--cool-cyan-10);}
.cool-cyan-10-fg {color: var(--cool-cyan-10);}
.cool-cyan-9-bg {background-color: var(--cool-cyan-9);}
.cool-cyan-9-fg {color: var(--cool-cyan-9);}
.cool-cyan-8-bg {background-color: var(--cool-cyan-8);}
.cool-cyan-8-fg {color: var(--cool-cyan-8);}
.cool-cyan-7-bg {background-color: var(--cool-cyan-7);}
.cool-cyan-7-fg {color: var(--cool-cyan-7);}
.cool-cyan-6-bg {background-color: var(--cool-cyan-6);}
.cool-cyan-6-fg {color: var(--cool-cyan-6);}
.cool-cyan-5-bg {background-color: var(--cool-cyan-5);}
.cool-cyan-5-fg {color: var(--cool-cyan-5);}
.cool-cyan-4-bg {background-color: var(--cool-cyan-4);}
.cool-cyan-4-fg {color: var(--cool-cyan-4);}
.cool-cyan-3-bg {background-color: var(--cool-cyan-3);}
.cool-cyan-3-fg {color: var(--cool-cyan-3);}
.cool-cyan-2-bg {background-color: var(--cool-cyan-2);}
.cool-cyan-2-fg {color: var(--cool-cyan-2);}
.cool-cyan-1-bg {background-color: var(--cool-cyan-1);}
.cool-cyan-1-fg {color: var(--cool-cyan-1);}
.gray-13-bg {background-color: var(--gray-13);}
.gray-13-fg {color: var(--gray-13);}
.gray-12-bg {background-color: var(--gray-12);}
.gray-12-fg {color: var(--gray-12);}
.gray-11-bg {background-color: var(--gray-11);}
.gray-11-fg {color: var(--gray-11);}
.gray-10-bg {background-color: var(--gray-10);}
.gray-10-fg {color: var(--gray-10);}
.gray-9-bg {background-color: var(--gray-9);}
.gray-9-fg {color: var(--gray-9);}
.gray-8-bg {background-color: var(--gray-8);}
.gray-8-fg {color: var(--gray-8);}
.gray-7-bg {background-color: var(--gray-7);}
.gray-7-fg {color: var(--gray-7);}
.gray-6-bg {background-color: var(--gray-6);}
.gray-6-fg {color: var(--gray-6);}
.gray-5-bg {background-color: var(--gray-5);}
.gray-5-fg {color: var(--gray-5);}
.gray-4-bg {background-color: var(--gray-4);}
.gray-4-fg {color: var(--gray-4);}
.gray-3-bg {background-color: var(--gray-3);}
.gray-3-fg {color: var(--gray-3);}
.gray-2-bg {background-color: var(--gray-2);}
.gray-2-fg {color: var(--gray-2);}
.gray-1-bg {background-color: var(--gray-1);}
.gray-1-fg {color: var(--gray-1);}

.primary-button {
      background-color: var(--blue-cyan-7);
      color: var(--gray-13);
    }
.primary-button-inverted {
      background-color: var(--gray-13);
      color: var(--blue-cyan-7);
    }
.secondary-button {
      background-color: var(--orange-7);
      color: var(--gray-13);
    }
.secondary-button-inverted {
      background-color: var(--gray-13);
      color: var(--orange-7);
    }
.tertiary-button {
      background-color: var(--gray-2);
      color: var(--gray-13);
    }
.tertiary-button-inverted {
      background-color: var(--gray-13);
      color: var(--gray-2);
    }
.danger-button {
      background-color: var(--mid-red-7);
      color: var(--gray-13);
    }
.danger-button-inverted {
      background-color: var(--gray-13);
      color: var(--mid-red-7);
    }
.warning-button {
      background-color: var(--warm-yellow-7);
      color: var(--gray-13);
    }
.warning-button-inverted {
      background-color: var(--gray-13);
      color: var(--warm-yellow-7);
    }
.info-button {
      background-color: var(--blue-cyan-7);
      color: var(--gray-13);
    }
.info-button-inverted {
      background-color: var(--gray-13);
      color: var(--blue-cyan-7);
    }
.success-button {
      background-color: var(--cool-green-7);
      color: var(--gray-13);
    }
.success-button-inverted {
      background-color: var(--gray-13);
      color: var(--cool-green-7);
    }
.danger-message {
      background-color: var(--mid-red-1);
      color: var(--gray-13);
    }
.danger-message-inverted {
      background-color: var(--gray-13);
      color: var(--mid-red-1);
    }
.success-message {
      background-color: var(--cool-green-1);
      color: var(--gray-13);
    }
.success-message-inverted {
      background-color: var(--gray-13);
      color: var(--cool-green-1);
    }
.warning-message {
      background-color: var(--warm-yellow-1);
      color: var(--gray-13);
    }
.warning-message-inverted {
      background-color: var(--gray-13);
      color: var(--warm-yellow-1);
    }
.info-message {
      background-color: var(--blue-cyan-1);
      color: var(--gray-13);
    }
.info-message-inverted {
      background-color: var(--gray-13);
      color: var(--blue-cyan-1);
    }

.complementary-bg-1 {background-color: var(--blue-cyan);}
.complementary-fg-1 {color: var(--blue-cyan);}
.complementary-bg-2 {background-color: var(--orange);}
.complementary-fg-2 {color: var(--orange);}
.analogous-bg-1 {background-color: var(--blue-cyan);}
.analogous-fg-1 {color: var(--blue-cyan);}
.analogous-bg-2 {background-color: var(--mid-blue);}
.analogous-fg-2 {color: var(--mid-blue);}
.analogous-bg-3 {background-color: var(--violet);}
.analogous-fg-3 {color: var(--violet);}
.monochromatic-bg-1 {background-color: var(--blue-cyan-1);}
.monochromatic-fg-1 {color: var(--blue-cyan-1);}
.monochromatic-bg-2 {background-color: var(--blue-cyan-2);}
.monochromatic-fg-2 {color: var(--blue-cyan-2);}
.monochromatic-bg-3 {background-color: var(--blue-cyan-3);}
.monochromatic-fg-3 {color: var(--blue-cyan-3);}
.monochromatic-bg-4 {background-color: var(--blue-cyan-4);}
.monochromatic-fg-4 {color: var(--blue-cyan-4);}
.monochromatic-bg-5 {background-color: var(--blue-cyan-5);}
.monochromatic-fg-5 {color: var(--blue-cyan-5);}
.monochromatic-bg-6 {background-color: var(--blue-cyan-6);}
.monochromatic-fg-6 {color: var(--blue-cyan-6);}
.monochromatic-bg-7 {background-color: var(--blue-cyan-7);}
.monochromatic-fg-7 {color: var(--blue-cyan-7);}
.monochromatic-bg-8 {background-color: var(--blue-cyan-8);}
.monochromatic-fg-8 {color: var(--blue-cyan-8);}
.monochromatic-bg-9 {background-color: var(--blue-cyan-9);}
.monochromatic-fg-9 {color: var(--blue-cyan-9);}
.monochromatic-bg-10 {background-color: var(--blue-cyan-10);}
.monochromatic-fg-10 {color: var(--blue-cyan-10);}
.monochromatic-bg-11 {background-color: var(--blue-cyan-11);}
.monochromatic-fg-11 {color: var(--blue-cyan-11);}
.monochromatic-bg-12 {background-color: var(--blue-cyan-12);}
.monochromatic-fg-12 {color: var(--blue-cyan-12);}
.split-complementary-bg-1 {background-color: var(--blue-cyan);}
.split-complementary-fg-1 {color: var(--blue-cyan);}
.split-complementary-bg-2 {background-color: var(--mid-red);}
.split-complementary-fg-2 {color: var(--mid-red);}
.split-complementary-bg-3 {background-color: var(--mid-yellow);}
.split-complementary-fg-3 {color: var(--mid-yellow);}
.triadic-bg-1 {background-color: var(--blue-cyan);}
.triadic-fg-1 {color: var(--blue-cyan);}
.triadic-bg-2 {background-color: var(--red-magenta);}
.triadic-fg-2 {color: var(--red-magenta);}
.triadic-bg-3 {background-color: var(--yellow-green);}
.triadic-fg-3 {color: var(--yellow-green);}
.tetradic-bg-1 {background-color: var(--blue-cyan);}
.tetradic-fg-1 {color: var(--blue-cyan);}
.tetradic-bg-2 {background-color: var(--violet);}
.tetradic-fg-2 {color: var(--violet);}
.tetradic-bg-3 {background-color: var(--orange);}
.tetradic-fg-3 {color: var(--orange);}
.tetradic-bg-4 {background-color: var(--yellow-green);}
.tetradic-fg-4 {color: var(--yellow-green);}
.rectangle-bg-1 {background-color: var(--blue-cyan);}
.rectangle-fg-1 {color: var(--blue-cyan);}
.rectangle-bg-2 {background-color: var(--violet);}
.rectangle-fg-2 {color: var(--violet);}
.rectangle-bg-3 {background-color: var(--orange);}
.rectangle-fg-3 {color: var(--orange);}
.rectangle-bg-4 {background-color: var(--yellow-green);}
.rectangle-fg-4 {color: var(--yellow-green);}
.double-split-complementary-bg-1 {background-color: var(--blue-cyan);}
.double-split-complementary-fg-1 {color: var(--blue-cyan);}
.double-split-complementary-bg-2 {background-color: var(--mid-blue);}
.double-split-complementary-fg-2 {color: var(--mid-blue);}
.double-split-complementary-bg-3 {background-color: var(--orange);}
.double-split-complementary-fg-3 {color: var(--orange);}
.double-split-complementary-bg-4 {background-color: var(--mid-yellow);}
.double-split-complementary-fg-4 {color: var(--mid-yellow);}