/* Componiq Colors — 31 ramps, 436 tones */
:root {
  --indigo-1: #f7f8fe;
  --indigo-2: #eff1fd;
  --indigo-3: #e7eafc;
  --indigo-4: #dee3fc;
  --indigo-5: #d2d8fc;
  --indigo-6: #aeb8fb;
  --indigo-7: #8993fb;
  --indigo-8: #777efb;
  --indigo-9: #533bfb;
  --indigo-10: #4217da;
  --indigo-11: #3419ae;
  --indigo-12: #2b1a91;
  --indigo-13: #1f146c;
  --indigo-14: #0c0639;
  --indigo-soft-1: #f8f8fb;
  --indigo-soft-2: #f0f1f8;
  --indigo-soft-3: #e9ebf4;
  --indigo-soft-4: #e1e4f1;
  --indigo-soft-5: #d6daec;
  --indigo-soft-6: #b5bbde;
  --indigo-soft-7: #929acf;
  --indigo-soft-8: #818ac8;
  --indigo-soft-9: #575eb6;
  --indigo-soft-10: #43479a;
  --indigo-soft-11: #36397b;
  --indigo-soft-12: #2d3167;
  --indigo-soft-13: #21244c;
  --indigo-soft-14: #0d0f26;
  --indigo-muted-1: #f8f8f9;
  --indigo-muted-2: #f1f2f4;
  --indigo-muted-3: #eaebee;
  --indigo-muted-4: #e3e4e9;
  --indigo-muted-5: #d9dae1;
  --indigo-muted-6: #bbbdc9;
  --indigo-muted-7: #9a9db0;
  --indigo-muted-8: #8a8ea4;
  --indigo-muted-9: #626785;
  --indigo-muted-10: #4c506d;
  --indigo-muted-11: #3d4158;
  --indigo-muted-12: #333649;
  --indigo-muted-13: #252836;
  --indigo-muted-14: #101119;
  --purple-1: #fef5fe;
  --purple-2: #fdebfd;
  --purple-3: #fde1fc;
  --purple-4: #fcd6fb;
  --purple-5: #fdc5fc;
  --purple-6: #fb8efc;
  --purple-7: #f62ffc;
  --purple-8: #e310ea;
  --purple-9: #a907ae;
  --purple-10: #850b89;
  --purple-11: #6b0f6e;
  --purple-12: #5a115c;
  --purple-13: #420d44;
  --purple-14: #200321;
  --purple-soft-1: #fbf7fb;
  --purple-soft-2: #f8eef7;
  --purple-soft-3: #f4e6f4;
  --purple-soft-4: #f1ddf1;
  --purple-soft-5: #edd0ec;
  --purple-soft-6: #e0a8df;
  --purple-soft-7: #d178d1;
  --purple-soft-8: #c069c0;
  --purple-soft-9: #8e4c8e;
  --purple-soft-10: #703c70;
  --purple-soft-11: #5a305a;
  --purple-soft-12: #4b294b;
  --purple-soft-13: #371e38;
  --purple-soft-14: #1a0b1a;
  --purple-muted-1: #f9f8f9;
  --purple-muted-2: #f4f0f4;
  --purple-muted-3: #eee9ee;
  --purple-muted-4: #e9e2e9;
  --purple-muted-5: #e1d7e1;
  --purple-muted-6: #cbb6ca;
  --purple-muted-7: #b292b1;
  --purple-muted-8: #a283a1;
  --purple-muted-9: #776077;
  --purple-muted-10: #5e4b5d;
  --purple-muted-11: #4b3d4b;
  --purple-muted-12: #3f333f;
  --purple-muted-13: #2e252e;
  --purple-muted-14: #151015;
  --red-1: #fef6f6;
  --red-2: #fdeeed;
  --red-3: #fce5e4;
  --red-4: #fcdcda;
  --red-5: #fccecb;
  --red-6: #fba29f;
  --red-7: #fb676a;
  --red-8: #fc384c;
  --red-9: #c3102f;
  --red-10: #9a1025;
  --red-11: #7c121e;
  --red-12: #67131b;
  --red-13: #4d0e13;
  --red-14: #270406;
  --red-soft-1: #fbf7f7;
  --red-soft-2: #f8f0ef;
  --red-soft-3: #f4e8e7;
  --red-soft-4: #f1e0df;
  --red-soft-5: #edd4d3;
  --red-soft-6: #e0b0ae;
  --red-soft-7: #d38684;
  --red-soft-8: #ce6f6e;
  --red-soft-9: #9d4d4d;
  --red-soft-10: #7c3d3c;
  --red-soft-11: #643131;
  --red-soft-12: #532a2a;
  --red-soft-13: #3e1f1e;
  --red-soft-14: #1e0b0b;
  --red-muted-1: #f9f8f8;
  --red-muted-2: #f4f1f1;
  --red-muted-3: #eeeaea;
  --red-muted-4: #e9e3e2;
  --red-muted-5: #e1d8d8;
  --red-muted-6: #cbb9b8;
  --red-muted-7: #b39695;
  --red-muted-8: #a88583;
  --red-muted-9: #7e605f;
  --red-muted-10: #634c4b;
  --red-muted-11: #503d3c;
  --red-muted-12: #433433;
  --red-muted-13: #312625;
  --red-muted-14: #16100f;
  --ocher-1: #fef7f1;
  --ocher-2: #fdefe4;
  --ocher-3: #fce7d6;
  --ocher-4: #fbdfc7;
  --ocher-5: #fbd2af;
  --ocher-6: #f9aa60;
  --ocher-7: #dd8728;
  --ocher-8: #c97920;
  --ocher-9: #955814;
  --ocher-10: #764511;
  --ocher-11: #5e3810;
  --ocher-12: #4f3010;
  --ocher-13: #3a230c;
  --ocher-14: #1c0e03;
  --ocher-soft-1: #fbf8f4;
  --ocher-soft-2: #f8f0ea;
  --ocher-soft-3: #f4e9df;
  --ocher-soft-4: #f1e1d4;
  --ocher-soft-5: #edd6c3;
  --ocher-soft-6: #e0b48e;
  --ocher-soft-7: #c39369;
  --ocher-soft-8: #b1855d;
  --ocher-soft-9: #836143;
  --ocher-soft-10: #674c34;
  --ocher-soft-11: #533d2b;
  --ocher-soft-12: #453425;
  --ocher-soft-13: #33261a;
  --ocher-soft-14: #181009;
  --ocher-muted-1: #f9f8f7;
  --ocher-muted-2: #f4f1ef;
  --ocher-muted-3: #eeeae7;
  --ocher-muted-4: #e9e3df;
  --ocher-muted-5: #e1d9d2;
  --ocher-muted-6: #cabaad;
  --ocher-muted-7: #ac9b8c;
  --ocher-muted-8: #9c8c7e;
  --ocher-muted-9: #73665c;
  --ocher-muted-10: #5a5048;
  --ocher-muted-11: #48413a;
  --ocher-muted-12: #3d3731;
  --ocher-muted-13: #2d2824;
  --ocher-muted-14: #14110f;
  --amber-1: #fff7ec;
  --amber-2: #fff0d8;
  --amber-3: #ffe8c4;
  --amber-4: #ffd898;
  --amber-5: #ffc65c;
  --amber-6: #f9ae00;
  --amber-7: #d29000;
  --amber-8: #be8200;
  --amber-9: #8d5f00;
  --amber-10: #6f4b00;
  --amber-11: #593c00;
  --amber-12: #4b3302;
  --amber-13: #372503;
  --amber-14: #1a0f01;
  --amber-soft-1: #fbf8f2;
  --amber-soft-2: #f8f1e6;
  --amber-soft-3: #f4ead9;
  --amber-soft-4: #f1e2cb;
  --amber-soft-5: #edd8b5;
  --amber-soft-6: #dbb87f;
  --amber-soft-7: #b89968;
  --amber-soft-8: #a68b5d;
  --amber-soft-9: #7b6542;
  --amber-soft-10: #615034;
  --amber-soft-11: #4d402a;
  --amber-soft-12: #413624;
  --amber-soft-13: #30281a;
  --amber-soft-14: #161109;
  --amber-muted-1: #f9f8f6;
  --amber-muted-2: #f4f1ed;
  --amber-muted-3: #eeebe4;
  --amber-muted-4: #e9e4db;
  --amber-muted-5: #e1dacd;
  --amber-muted-6: #c8bca8;
  --amber-muted-7: #a89d8c;
  --amber-muted-8: #988e7e;
  --amber-muted-9: #6f685c;
  --amber-muted-10: #585248;
  --amber-muted-11: #46423a;
  --amber-muted-12: #3b3731;
  --amber-muted-13: #2b2824;
  --amber-muted-14: #13110f;
  --yellow-1: #fefee2;
  --yellow-2: #fdfdbd;
  --yellow-3: #fcfc9e;
  --yellow-4: #fcf979;
  --yellow-5: #e5e259;
  --yellow-6: #c7c449;
  --yellow-7: #a6a438;
  --yellow-8: #97942f;
  --yellow-9: #6f6d20;
  --yellow-10: #57561a;
  --yellow-11: #464516;
  --yellow-12: #3b3a15;
  --yellow-13: #2b2a0f;
  --yellow-14: #131204;
  --yellow-soft-1: #fbfcd2;
  --yellow-soft-2: #f7f7ac;
  --yellow-soft-3: #f1f1a0;
  --yellow-soft-4: #ebea99;
  --yellow-soft-5: #e1e08f;
  --yellow-soft-6: #c3c37a;
  --yellow-soft-7: #a3a364;
  --yellow-soft-8: #949359;
  --yellow-soft-9: #6c6c3f;
  --yellow-soft-10: #555532;
  --yellow-soft-11: #444428;
  --yellow-soft-12: #3a3923;
  --yellow-soft-13: #2a2a19;
  --yellow-soft-14: #121208;
  --yellow-muted-1: #f9faeb;
  --yellow-muted-2: #f3f4da;
  --yellow-muted-3: #edeed2;
  --yellow-muted-4: #e6e7cb;
  --yellow-muted-5: #ddddc1;
  --yellow-muted-6: #bfc0a7;
  --yellow-muted-7: #a0a08b;
  --yellow-muted-8: #90917d;
  --yellow-muted-9: #6a6a5b;
  --yellow-muted-10: #535348;
  --yellow-muted-11: #43433a;
  --yellow-muted-12: #383931;
  --yellow-muted-13: #292923;
  --yellow-muted-14: #12120e;
  --green-1: #eefeec;
  --green-2: #dcfdd9;
  --green-3: #c7fcc4;
  --green-4: #b0fbab;
  --green-5: #81fb7d;
  --green-6: #3fe241;
  --green-7: #2ebe31;
  --green-8: #25ac28;
  --green-9: #187f1b;
  --green-10: #146416;
  --green-11: #135014;
  --green-12: #134313;
  --green-13: #0e320d;
  --green-14: #041703;
  --green-soft-1: #f2fbf2;
  --green-soft-2: #e5f8e4;
  --green-soft-3: #d8f5d5;
  --green-soft-4: #c8f2c5;
  --green-soft-5: #aeefaa;
  --green-soft-6: #87d483;
  --green-soft-7: #6fb26b;
  --green-soft-8: #63a160;
  --green-soft-9: #477645;
  --green-soft-10: #385d36;
  --green-soft-11: #2d4b2c;
  --green-soft-12: #273f26;
  --green-soft-13: #1c2e1b;
  --green-soft-14: #0a1509;
  --green-muted-1: #f6f9f6;
  --green-muted-2: #edf4ed;
  --green-muted-3: #e4efe3;
  --green-muted-4: #dbead9;
  --green-muted-5: #cce2ca;
  --green-muted-6: #acc6aa;
  --green-muted-7: #8fa68d;
  --green-muted-8: #81967f;
  --green-muted-9: #5e6e5d;
  --green-muted-10: #4a5749;
  --green-muted-11: #3c463b;
  --green-muted-12: #323b32;
  --green-muted-13: #252b24;
  --green-muted-14: #0f130f;
  --emerald-1: #ecfef2;
  --emerald-2: #d7fde5;
  --emerald-3: #c0fcd7;
  --emerald-4: #a4fbc8;
  --emerald-5: #6afbb0;
  --emerald-6: #41dd92;
  --emerald-7: #30ba79;
  --emerald-8: #26a86c;
  --emerald-9: #197c4f;
  --emerald-10: #15623e;
  --emerald-11: #144e32;
  --emerald-12: #14422a;
  --emerald-13: #0e301f;
  --emerald-14: #04160c;
  --emerald-soft-1: #f1fbf5;
  --emerald-soft-2: #e3f8ea;
  --emerald-soft-3: #d4f5e0;
  --emerald-soft-4: #c3f2d5;
  --emerald-soft-5: #a6eec3;
  --emerald-soft-6: #88d1a6;
  --emerald-soft-7: #6faf8a;
  --emerald-soft-8: #639e7c;
  --emerald-soft-9: #48745a;
  --emerald-soft-10: #385c47;
  --emerald-soft-11: #2e4a39;
  --emerald-soft-12: #273e30;
  --emerald-soft-13: #1c2d23;
  --emerald-soft-14: #0a140e;
  --emerald-muted-1: #f6f9f7;
  --emerald-muted-2: #ecf4ef;
  --emerald-muted-3: #e3efe7;
  --emerald-muted-4: #d9e9df;
  --emerald-muted-5: #c9e2d2;
  --emerald-muted-6: #acc5b5;
  --emerald-muted-7: #8fa597;
  --emerald-muted-8: #819588;
  --emerald-muted-9: #5e6d64;
  --emerald-muted-10: #4a564e;
  --emerald-muted-11: #3c453f;
  --emerald-muted-12: #323a35;
  --emerald-muted-13: #252b27;
  --emerald-muted-14: #0f1310;
  --cyan-1: #e7fefd;
  --cyan-2: #cefdfb;
  --cyan-3: #affcf9;
  --cyan-4: #86fbf9;
  --cyan-5: #4ff6f4;
  --cyan-6: #3ed6d4;
  --cyan-7: #2db4b2;
  --cyan-8: #24a3a1;
  --cyan-9: #177876;
  --cyan-10: #145e5d;
  --cyan-11: #134c4b;
  --cyan-12: #13403f;
  --cyan-13: #0e2f2e;
  --cyan-14: #041515;
  --cyan-soft-1: #eefcfb;
  --cyan-soft-2: #ddf8f7;
  --cyan-soft-3: #caf5f3;
  --cyan-soft-4: #b4f2f0;
  --cyan-soft-5: #9bece9;
  --cyan-soft-6: #85cdcb;
  --cyan-soft-7: #6dabaa;
  --cyan-soft-8: #619b9a;
  --cyan-soft-9: #467271;
  --cyan-soft-10: #375a59;
  --cyan-soft-11: #2d4847;
  --cyan-soft-12: #263d3c;
  --cyan-soft-13: #1c2c2c;
  --cyan-soft-14: #0a1413;
  --cyan-muted-1: #f5f9f9;
  --cyan-muted-2: #eaf4f4;
  --cyan-muted-3: #e0efee;
  --cyan-muted-4: #d4eae9;
  --cyan-muted-5: #c6e1e0;
  --cyan-muted-6: #abc3c2;
  --cyan-muted-7: #8fa3a2;
  --cyan-muted-8: #809493;
  --cyan-muted-9: #5e6c6c;
  --cyan-muted-10: #4a5555;
  --cyan-muted-11: #3b4444;
  --cyan-muted-12: #323a39;
  --cyan-muted-13: #252a2a;
  --cyan-muted-14: #0f1212;
  --blue-1: #f5f9fe;
  --blue-2: #ecf2fd;
  --blue-3: #e2ecfc;
  --blue-4: #d8e5fc;
  --blue-5: #c9dcfc;
  --blue-6: #9cbefb;
  --blue-7: #699cfb;
  --blue-8: #4d8afc;
  --blue-9: #0659e9;
  --blue-10: #0746b8;
  --blue-11: #093a93;
  --blue-12: #0b317a;
  --blue-13: #08245b;
  --blue-14: #020f2f;
  --blue-soft-1: #f7f8fb;
  --blue-soft-2: #eff2f8;
  --blue-soft-3: #e6ebf4;
  --blue-soft-4: #dee5f1;
  --blue-soft-5: #d2dbec;
  --blue-soft-6: #acbfde;
  --blue-soft-7: #839fd0;
  --blue-soft-8: #6f8fc9;
  --blue-soft-9: #4167ad;
  --blue-soft-10: #335189;
  --blue-soft-11: #29416d;
  --blue-soft-12: #23375b;
  --blue-soft-13: #192844;
  --blue-soft-14: #091121;
  --blue-muted-1: #f8f8f9;
  --blue-muted-2: #f1f2f4;
  --blue-muted-3: #e9ebee;
  --blue-muted-4: #e2e5e9;
  --blue-muted-5: #d7dbe1;
  --blue-muted-6: #b7bec9;
  --blue-muted-7: #959fb1;
  --blue-muted-8: #8490a5;
  --blue-muted-9: #5b6982;
  --blue-muted-10: #485367;
  --blue-muted-11: #3a4352;
  --blue-muted-12: #313845;
  --blue-muted-13: #242933;
  --blue-muted-14: #0e1217;
  --neutral-1: #f8f8f8;
  --neutral-2: #f2f2f2;
  --neutral-3: #ebebeb;
  --neutral-4: #e4e4e4;
  --neutral-5: #dbdbdb;
  --neutral-6: #bebebe;
  --neutral-7: #9e9e9e;
  --neutral-8: #8f8f8f;
  --neutral-9: #696969;
  --neutral-10: #525252;
  --neutral-11: #424242;
  --neutral-12: #383838;
  --neutral-13: #292929;
  --neutral-14: #121212;
  --neutral-0: #ffffff;
  --neutral-15: #000000;
}

/* Componiq Colors — 12 ramps, 168 tones */
:root {
  --black-alpha-1: #00000007;
  --black-alpha-2: #0000000d;
  --black-alpha-3: #00000014;
  --black-alpha-4: #0000001b;
  --black-alpha-5: #00000024;
  --black-alpha-6: #00000041;
  --black-alpha-7: #00000061;
  --black-alpha-8: #00000070;
  --black-alpha-9: #00000096;
  --black-alpha-10: #000000ad;
  --black-alpha-11: #000000bd;
  --black-alpha-12: #000000c7;
  --black-alpha-13: #000000d6;
  --black-alpha-14: #000000ed;
  --white-alpha-1: #ffffff06;
  --white-alpha-2: #ffffff09;
  --white-alpha-3: #ffffff0d;
  --white-alpha-4: #ffffff12;
  --white-alpha-5: #ffffff18;
  --white-alpha-6: #ffffff2e;
  --white-alpha-7: #ffffff48;
  --white-alpha-8: #ffffff55;
  --white-alpha-9: #ffffff7a;
  --white-alpha-10: #ffffff92;
  --white-alpha-11: #ffffffa4;
  --white-alpha-12: #ffffffb1;
  --white-alpha-13: #ffffffc4;
  --white-alpha-14: #ffffffe4;
  --indigo-alpha-1: #0020df08;
  --indigo-alpha-2: #0020df10;
  --indigo-alpha-3: #0020df18;
  --indigo-alpha-4: #0027e821;
  --indigo-alpha-5: #0022ee2d;
  --indigo-alpha-6: #001ff251;
  --indigo-alpha-7: #0016f676;
  --indigo-alpha-8: #000df788;
  --indigo-alpha-9: #1f00fac4;
  --indigo-alpha-10: #2f00d6e8;
  --indigo-alpha-11: #1e00a5e6;
  --indigo-alpha-12: #130085e5;
  --indigo-alpha-13: #0c005feb;
  --indigo-alpha-14: #060034f9;
  --purple-alpha-1: #e500e50a;
  --purple-alpha-2: #e500e514;
  --purple-alpha-3: #ee00e61e;
  --purple-alpha-4: #ec00e629;
  --purple-alpha-5: #f600f23a;
  --purple-alpha-6: #f600f871;
  --purple-alpha-7: #f400fbd0;
  --purple-alpha-8: #e100e9ef;
  --purple-alpha-9: #a700acf8;
  --purple-alpha-10: #800084f4;
  --purple-alpha-11: #620065f0;
  --purple-alpha-12: #4e0050ee;
  --purple-alpha-13: #38003af2;
  --purple-alpha-14: #1d001efc;
  --red-alpha-1: #e3000009;
  --red-alpha-2: #e30e0012;
  --red-alpha-3: #e309001b;
  --red-alpha-4: #ea0e0025;
  --red-alpha-5: #f00f0034;
  --red-alpha-6: #f4080060;
  --red-alpha-7: #f8000598;
  --red-alpha-8: #fb001ac7;
  --red-alpha-9: #bf0021ef;
  --red-alpha-10: #930016ef;
  --red-alpha-11: #72000ded;
  --red-alpha-12: #5b0009ec;
  --red-alpha-13: #430005f1;
  --red-alpha-14: #240002fb;
  --ocher-alpha-1: #ed6d000e;
  --ocher-alpha-2: #ec68001b;
  --ocher-alpha-3: #ec6a0029;
  --ocher-alpha-4: #ed6d0038;
  --ocher-alpha-5: #f2700050;
  --ocher-alpha-6: #f577009f;
  --ocher-alpha-7: #d77100d7;
  --ocher-alpha-8: #c16600df;
  --ocher-alpha-9: #8c4a00eb;
  --ocher-alpha-10: #6c3800ee;
  --ocher-alpha-11: #532b00ef;
  --ocher-alpha-12: #432200ef;
  --ocher-alpha-13: #301800f3;
  --ocher-alpha-14: #190b00fc;
  --amber-alpha-1: #ff940013;
  --amber-alpha-2: #ff9d0027;
  --amber-alpha-3: #ff9c003b;
  --amber-alpha-4: #ff9e0067;
  --amber-alpha-5: #ffa600a3;
  --amber-alpha-6: #f9ae00;
  --amber-alpha-7: #d29000;
  --amber-alpha-8: #be8200;
  --amber-alpha-9: #8d5f00;
  --amber-alpha-10: #6f4b00;
  --amber-alpha-11: #593c00;
  --amber-alpha-12: #4a3100fd;
  --amber-alpha-13: #352200fc;
  --amber-alpha-14: #190e00fe;
  --yellow-alpha-1: #f6f6001d;
  --yellow-alpha-2: #f7f70042;
  --yellow-alpha-3: #f7f70061;
  --yellow-alpha-4: #f9f40086;
  --yellow-alpha-5: #d7d200a6;
  --yellow-alpha-6: #b1ac00b6;
  --yellow-alpha-7: #8d8a00c7;
  --yellow-alpha-8: #807c00d0;
  --yellow-alpha-9: #5a5800df;
  --yellow-alpha-10: #444300e5;
  --yellow-alpha-11: #353300e9;
  --yellow-alpha-12: #292800ea;
  --yellow-alpha-13: #1e1d00f0;
  --yellow-alpha-14: #0f0e00fb;
  --green-alpha-1: #1bf20013;
  --green-alpha-2: #14f20026;
  --green-alpha-3: #0df2003b;
  --green-alpha-4: #0ff30054;
  --green-alpha-5: #08f70082;
  --green-alpha-6: #00d803c0;
  --green-alpha-7: #00b004d1;
  --green-alpha-8: #009e04da;
  --green-alpha-9: #007203e7;
  --green-alpha-10: #005702eb;
  --green-alpha-11: #004201ec;
  --green-alpha-12: #003400ec;
  --green-alpha-13: #012700f2;
  --green-alpha-14: #011400fc;
  --emerald-alpha-1: #00f25113;
  --emerald-alpha-2: #00f25928;
  --emerald-alpha-3: #00f35d3f;
  --emerald-alpha-4: #00f4655b;
  --emerald-alpha-5: #00f87895;
  --emerald-alpha-6: #00d16dbe;
  --emerald-alpha-7: #00aa5acf;
  --emerald-alpha-8: #009952d9;
  --emerald-alpha-9: #006e3ce6;
  --emerald-alpha-10: #00542dea;
  --emerald-alpha-11: #003f21eb;
  --emerald-alpha-12: #003218eb;
  --emerald-alpha-13: #002412f1;
  --emerald-alpha-14: #001208fb;
  --cyan-alpha-1: #00f4ea18;
  --cyan-alpha-2: #00f5ea31;
  --cyan-alpha-3: #00f5ec50;
  --cyan-alpha-4: #00f7f279;
  --cyan-alpha-5: #00f2efb0;
  --cyan-alpha-6: #00c9c6c1;
  --cyan-alpha-7: #00a4a2d2;
  --cyan-alpha-8: #009492db;
  --cyan-alpha-9: #006b68e8;
  --cyan-alpha-10: #00504feb;
  --cyan-alpha-11: #003e3dec;
  --cyan-alpha-12: #003130ec;
  --cyan-alpha-13: #002322f1;
  --cyan-alpha-14: #001111fb;
  --blue-alpha-1: #0066e50a;
  --blue-alpha-2: #0051e413;
  --blue-alpha-3: #0058e51d;
  --blue-alpha-4: #0055eb27;
  --blue-alpha-5: #005af136;
  --blue-alpha-6: #0058f563;
  --blue-alpha-7: #0057f896;
  --blue-alpha-8: #0057fbb2;
  --blue-alpha-9: #0055e8f9;
  --blue-alpha-10: #0041b6f8;
  --blue-alpha-11: #00338ff6;
  --blue-alpha-12: #002874f4;
  --blue-alpha-13: #001d56f7;
  --blue-alpha-14: #000d2dfd;
}

/* Componiq Colors — 30 ramps, 420 tones */
:root {
  --indigo-1: #f7f8fe;
  --indigo-2: #b9c1f5;
  --indigo-3: #8f99ef;
  --indigo-4: #737aee;
  --indigo-5: #6061ef;
  --indigo-6: #554bf0;
  --indigo-7: #4f36f2;
  --indigo-8: #4b21f3;
  --indigo-9: #471ee8;
  --indigo-10: #411fd4;
  --indigo-11: #3821b7;
  --indigo-12: #2d1f93;
  --indigo-13: #1e1669;
  --indigo-14: #0c0737;
  --indigo-soft-1: #f8f8fb;
  --indigo-soft-2: #bec3df;
  --indigo-soft-3: #979ecc;
  --indigo-soft-4: #7b84c1;
  --indigo-soft-5: #6871ba;
  --indigo-soft-6: #5c63b5;
  --indigo-soft-7: #5358b2;
  --indigo-soft-8: #4c50b0;
  --indigo-soft-9: #484ca7;
  --indigo-soft-10: #424699;
  --indigo-soft-11: #3b3e85;
  --indigo-soft-12: #30336b;
  --indigo-soft-13: #21244c;
  --indigo-soft-14: #0d0f26;
  --indigo-muted-1: #f8f8f9;
  --indigo-muted-2: #c2c4ce;
  --indigo-muted-3: #9da1b1;
  --indigo-muted-4: #84889e;
  --indigo-muted-5: #727691;
  --indigo-muted-6: #656a87;
  --indigo-muted-7: #5d6281;
  --indigo-muted-8: #565c7d;
  --indigo-muted-9: #525676;
  --indigo-muted-10: #4b506c;
  --indigo-muted-11: #42465f;
  --indigo-muted-12: #36394d;
  --indigo-muted-13: #252836;
  --indigo-muted-14: #101119;
  --purple-1: #fef5fe;
  --purple-2: #fbe1fb;
  --purple-3: #f9ccf9;
  --purple-4: #f8b5f8;
  --purple-5: #f89cf8;
  --purple-6: #f681f8;
  --purple-7: #f560f8;
  --purple-8: #f32ef8;
  --purple-9: #e529ea;
  --purple-10: #cf2ad4;
  --purple-11: #b12cb5;
  --purple-12: #8b278d;
  --purple-13: #5a195c;
  --purple-14: #200421;
  --purple-soft-1: #fbf7fb;
  --purple-soft-2: #f4e6f3;
  --purple-soft-3: #edd4ec;
  --purple-soft-4: #e6c2e6;
  --purple-soft-5: #e1b0e0;
  --purple-soft-6: #da9dda;
  --purple-soft-7: #d489d4;
  --purple-soft-8: #ce75cf;
  --purple-soft-9: #c26dc3;
  --purple-soft-10: #b064b1;
  --purple-soft-11: #975898;
  --purple-soft-12: #764677;
  --purple-soft-13: #4d2d4d;
  --purple-soft-14: #1a0b1a;
  --purple-muted-1: #f9f8f9;
  --purple-muted-2: #eee9ee;
  --purple-muted-3: #e3dae2;
  --purple-muted-4: #d8cbd8;
  --purple-muted-5: #cebccd;
  --purple-muted-6: #c4adc3;
  --purple-muted-7: #b99fb9;
  --purple-muted-8: #b090af;
  --purple-muted-9: #a587a4;
  --purple-muted-10: #967b95;
  --purple-muted-11: #816a81;
  --purple-muted-12: #655465;
  --purple-muted-13: #413641;
  --purple-muted-14: #151015;
  --red-1: #fef6f6;
  --red-2: #fbe1df;
  --red-3: #f9cbc9;
  --red-4: #f7b4b1;
  --red-5: #f79a98;
  --red-6: #f77e7e;
  --red-7: #f85d62;
  --red-8: #f82844;
  --red-9: #ea233f;
  --red-10: #d5253a;
  --red-11: #b72635;
  --red-12: #90232b;
  --red-13: #60171c;
  --red-14: #260406;
  --red-soft-1: #fbf7f7;
  --red-soft-2: #f2e4e3;
  --red-soft-3: #ead1cf;
  --red-soft-4: #e2bdbb;
  --red-soft-5: #dca9a7;
  --red-soft-6: #d69492;
  --red-soft-7: #d07f7d;
  --red-soft-8: #cb6767;
  --red-soft-9: #c06160;
  --red-soft-10: #ae5958;
  --red-soft-11: #964e4d;
  --red-soft-12: #763f3e;
  --red-soft-13: #4e2928;
  --red-soft-14: #1e0c0b;
  --red-muted-1: #f9f8f8;
  --red-muted-2: #ece6e6;
  --red-muted-3: #ded5d5;
  --red-muted-4: #d2c4c3;
  --red-muted-5: #c5b3b2;
  --red-muted-6: #baa1a0;
  --red-muted-7: #af908f;
  --red-muted-8: #a47f7d;
  --red-muted-9: #9a7776;
  --red-muted-10: #8c6d6c;
  --red-muted-11: #795f5e;
  --red-muted-12: #604b4a;
  --red-muted-13: #3f3130;
  --red-muted-14: #16100f;
  --ocher-1: #fef7f1;
  --ocher-2: #fcebdc;
  --ocher-3: #fadec6;
  --ocher-4: #fad1ae;
  --ocher-5: #fac393;
  --ocher-6: #f9b577;
  --ocher-7: #faa655;
  --ocher-8: #f99729;
  --ocher-9: #ea8d25;
  --ocher-10: #d38126;
  --ocher-11: #b57028;
  --ocher-12: #8c5824;
  --ocher-13: #593716;
  --ocher-14: #1c0e03;
  --ocher-soft-1: #fbf8f5;
  --ocher-soft-2: #f6ece4;
  --ocher-soft-3: #f0e1d4;
  --ocher-soft-4: #ebd5c3;
  --ocher-soft-5: #e7c9b0;
  --ocher-soft-6: #e2be9e;
  --ocher-soft-7: #deb28a;
  --ocher-soft-8: #daa677;
  --ocher-soft-9: #cd9b6f;
  --ocher-soft-10: #b98d66;
  --ocher-soft-11: #9f7a59;
  --ocher-soft-12: #7b5f47;
  --ocher-soft-13: #4e3c2c;
  --ocher-soft-14: #171009;
  --ocher-muted-1: #f9f8f7;
  --ocher-muted-2: #f1edeb;
  --ocher-muted-3: #e8e3de;
  --ocher-muted-4: #e0d8d1;
  --ocher-muted-5: #d8cdc4;
  --ocher-muted-6: #d0c3b8;
  --ocher-muted-7: #c9b8aa;
  --ocher-muted-8: #c1ae9e;
  --ocher-muted-9: #b5a394;
  --ocher-muted-10: #a49486;
  --ocher-muted-11: #8d7f74;
  --ocher-muted-12: #6e645b;
  --ocher-muted-13: #453f39;
  --ocher-muted-14: #14110f;
  --amber-1: #fef8ee;
  --amber-2: #fcefda;
  --amber-3: #fbe6c5;
  --amber-4: #fbddae;
  --amber-5: #fbd495;
  --amber-6: #fbca79;
  --amber-7: #fbc058;
  --amber-8: #fab72f;
  --amber-9: #eaab2a;
  --amber-10: #d49b2b;
  --amber-11: #b5862d;
  --amber-12: #8c6828;
  --amber-13: #574119;
  --amber-14: #191003;
  --amber-soft-1: #fbf8f3;
  --amber-soft-2: #f7f0e4;
  --amber-soft-3: #f3e8d6;
  --amber-soft-4: #efe0c7;
  --amber-soft-5: #ecd7b6;
  --amber-soft-6: #e9cfa6;
  --amber-soft-7: #e5c795;
  --amber-soft-8: #e2be84;
  --amber-soft-9: #d4b27c;
  --amber-soft-10: #bfa271;
  --amber-soft-11: #a48b63;
  --amber-soft-12: #7f6c4e;
  --amber-soft-13: #4f4330;
  --amber-soft-14: #151109;
  --amber-muted-1: #f9f8f6;
  --amber-muted-2: #f3f0ec;
  --amber-muted-3: #ede9e2;
  --amber-muted-4: #e7e1d8;
  --amber-muted-5: #e1d9ce;
  --amber-muted-6: #dbd2c3;
  --amber-muted-7: #d5cab9;
  --amber-muted-8: #cfc2ae;
  --amber-muted-9: #c2b6a3;
  --amber-muted-10: #afa594;
  --amber-muted-11: #968e80;
  --amber-muted-12: #756e64;
  --amber-muted-13: #49453e;
  --amber-muted-14: #13110f;
  --yellow-1: #fefeb7;
  --yellow-2: #fcfa7d;
  --yellow-3: #f8f55e;
  --yellow-4: #f3ef55;
  --yellow-5: #edea4b;
  --yellow-6: #e8e443;
  --yellow-7: #e2de3b;
  --yellow-8: #ddd833;
  --yellow-9: #cecb2e;
  --yellow-10: #bbb72f;
  --yellow-11: #a09d31;
  --yellow-12: #7b7a2b;
  --yellow-13: #4c4b1b;
  --yellow-14: #131303;
  --yellow-soft-1: #fbfcd7;
  --yellow-soft-2: #f7f8ba;
  --yellow-soft-3: #f2f2ab;
  --yellow-soft-4: #ededa5;
  --yellow-soft-5: #e7e79e;
  --yellow-soft-6: #e2e199;
  --yellow-soft-7: #dcdc93;
  --yellow-soft-8: #d6d68e;
  --yellow-soft-9: #c9c884;
  --yellow-soft-10: #b6b579;
  --yellow-soft-11: #9b9b6a;
  --yellow-soft-12: #787853;
  --yellow-soft-13: #4a4a33;
  --yellow-soft-14: #12120a;
  --yellow-muted-1: #f9faec;
  --yellow-muted-2: #f4f5df;
  --yellow-muted-3: #efefd6;
  --yellow-muted-4: #e9ead1;
  --yellow-muted-5: #e3e4cb;
  --yellow-muted-6: #dedec5;
  --yellow-muted-7: #d8d9c0;
  --yellow-muted-8: #d3d3ba;
  --yellow-muted-9: #c5c6ae;
  --yellow-muted-10: #b2b39e;
  --yellow-muted-11: #999988;
  --yellow-muted-12: #76776a;
  --yellow-muted-13: #494941;
  --yellow-muted-14: #12120f;
  --green-1: #eefeec;
  --green-2: #defddc;
  --green-3: #cdfcca;
  --green-4: #bafcb5;
  --green-5: #a2fc9d;
  --green-6: #86fc82;
  --green-7: #60fc5e;
  --green-8: #39fa3e;
  --green-9: #34ea39;
  --green-10: #35d338;
  --green-11: #37b537;
  --green-12: #308b30;
  --green-13: #1e571d;
  --green-14: #041703;
  --green-soft-1: #f3fbf2;
  --green-soft-2: #e8f8e6;
  --green-soft-3: #dcf5da;
  --green-soft-4: #d0f3cd;
  --green-soft-5: #c2f1bf;
  --green-soft-6: #b4eeaf;
  --green-soft-7: #a3ed9e;
  --green-soft-8: #96e992;
  --green-soft-9: #8cda88;
  --green-soft-10: #80c57c;
  --green-soft-11: #6fa96c;
  --green-soft-12: #588255;
  --green-soft-13: #365134;
  --green-soft-14: #0b150a;
  --green-muted-1: #f6f9f6;
  --green-muted-2: #eff5ee;
  --green-muted-3: #e7f0e6;
  --green-muted-4: #dfecde;
  --green-muted-5: #d7e7d5;
  --green-muted-6: #cee3cd;
  --green-muted-7: #c5dfc3;
  --green-muted-8: #bedabc;
  --green-muted-9: #b2ccaf;
  --green-muted-10: #a1b99f;
  --green-muted-11: #8a9e89;
  --green-muted-12: #6c7a6a;
  --green-muted-13: #424c42;
  --green-muted-14: #0f130f;
  --emerald-1: #ecfef2;
  --emerald-2: #dafde7;
  --emerald-3: #c7fcdb;
  --emerald-4: #b0fcce;
  --emerald-5: #93fcc1;
  --emerald-6: #70fcb2;
  --emerald-7: #43fba5;
  --emerald-8: #3af59f;
  --emerald-9: #35e595;
  --emerald-10: #36cf87;
  --emerald-11: #37b175;
  --emerald-12: #31895c;
  --emerald-13: #1e5539;
  --emerald-14: #04160c;
  --emerald-soft-1: #f2fbf5;
  --emerald-soft-2: #e6f8ec;
  --emerald-soft-3: #d9f5e3;
  --emerald-soft-4: #ccf3da;
  --emerald-soft-5: #bcf0d0;
  --emerald-soft-6: #aceec6;
  --emerald-soft-7: #9cebbd;
  --emerald-soft-8: #97e6b7;
  --emerald-soft-9: #8dd7ab;
  --emerald-soft-10: #81c29c;
  --emerald-soft-11: #70a686;
  --emerald-soft-12: #588068;
  --emerald-soft-13: #365040;
  --emerald-soft-14: #0b140e;
  --emerald-muted-1: #f6f9f7;
  --emerald-muted-2: #eef5f0;
  --emerald-muted-3: #e6f0e9;
  --emerald-muted-4: #deebe3;
  --emerald-muted-5: #d5e7db;
  --emerald-muted-6: #cce3d4;
  --emerald-muted-7: #c4decd;
  --emerald-muted-8: #bed9c8;
  --emerald-muted-9: #b2cbbb;
  --emerald-muted-10: #a1b8a9;
  --emerald-muted-11: #8b9d91;
  --emerald-muted-12: #6c7a71;
  --emerald-muted-13: #434b46;
  --emerald-muted-14: #0f1210;
  --cyan-1: #e7fefd;
  --cyan-2: #d2fdfb;
  --cyan-3: #b8fcfa;
  --cyan-4: #98fcf9;
  --cyan-5: #6afcf9;
  --cyan-6: #4cf8f6;
  --cyan-7: #43f3f0;
  --cyan-8: #3aedea;
  --cyan-9: #34dedb;
  --cyan-10: #36c8c6;
  --cyan-11: #37aba9;
  --cyan-12: #318483;
  --cyan-13: #1e5251;
  --cyan-14: #041515;
  --cyan-soft-1: #effbfb;
  --cyan-soft-2: #e1f8f7;
  --cyan-soft-3: #d2f5f4;
  --cyan-soft-4: #c1f3f1;
  --cyan-soft-5: #adf1ee;
  --cyan-soft-6: #a2ecea;
  --cyan-soft-7: #9ce6e4;
  --cyan-soft-8: #97e1de;
  --cyan-soft-9: #8dd2d0;
  --cyan-soft-10: #80bebc;
  --cyan-soft-11: #70a3a1;
  --cyan-soft-12: #587e7d;
  --cyan-soft-13: #364e4d;
  --cyan-soft-14: #0b1313;
  --cyan-muted-1: #f5f9f9;
  --cyan-muted-2: #edf5f4;
  --cyan-muted-3: #e4f0ef;
  --cyan-muted-4: #daebeb;
  --cyan-muted-5: #d0e7e6;
  --cyan-muted-6: #c9e2e1;
  --cyan-muted-7: #c4dcdb;
  --cyan-muted-8: #bed7d6;
  --cyan-muted-9: #b2c9c8;
  --cyan-muted-10: #a1b6b5;
  --cyan-muted-11: #8b9c9b;
  --cyan-muted-12: #6c7978;
  --cyan-muted-13: #434b4a;
  --cyan-muted-14: #0f1212;
  --blue-1: #f6f9fe;
  --blue-2: #b5ccf6;
  --blue-3: #86acf1;
  --blue-4: #6294f0;
  --blue-5: #4782f1;
  --blue-6: #3174f2;
  --blue-7: #1e68f4;
  --blue-8: #1361f1;
  --blue-9: #105be4;
  --blue-10: #1254d0;
  --blue-11: #144bb3;
  --blue-12: #123d8e;
  --blue-13: #0c2962;
  --blue-14: #020f2e;
  --blue-soft-1: #f7f8fb;
  --blue-soft-2: #bfcce2;
  --blue-soft-3: #98add2;
  --blue-soft-4: #7c97c7;
  --blue-soft-5: #6787c1;
  --blue-soft-6: #587cbd;
  --blue-soft-7: #4d74ba;
  --blue-soft-8: #466eb7;
  --blue-soft-9: #4268ad;
  --blue-soft-10: #3d5f9e;
  --blue-soft-11: #365388;
  --blue-soft-12: #2c436d;
  --blue-soft-13: #1d2d4a;
  --blue-soft-14: #091121;
  --blue-muted-1: #f8f8f9;
  --blue-muted-2: #c7cbd4;
  --blue-muted-3: #a5acba;
  --blue-muted-4: #8d97a8;
  --blue-muted-5: #7c889d;
  --blue-muted-6: #707d94;
  --blue-muted-7: #67768f;
  --blue-muted-8: #62708a;
  --blue-muted-9: #5c6a82;
  --blue-muted-10: #546177;
  --blue-muted-11: #4a5568;
  --blue-muted-12: #3c4453;
  --blue-muted-13: #282e38;
  --blue-muted-14: #0f1217;
}

/* Componiq Colors — 10 ramps, 60 tones */
:root {
  --indigo-accent-peak: #4b21f3;
  --indigo-accent-hover: #401bd2;
  --indigo-accent-pressed: #3515b3;
  --indigo-accent-on: #ffffff;
  --indigo-accent-soft: #e8eaf5;
  --indigo-accent-on-soft: #3a3d88;
  --purple-accent-peak: #f336f8;
  --purple-accent-hover: #de28e4;
  --purple-accent-pressed: #c823cc;
  --purple-accent-on: #000000;
  --purple-accent-soft: #f5e5f5;
  --purple-accent-on-soft: #613462;
  --red-accent-peak: #e4233d;
  --red-accent-hover: #ca1e35;
  --red-accent-pressed: #b2192e;
  --red-accent-on: #ffffff;
  --red-accent-soft: #f5e7e7;
  --red-accent-on-soft: #6d3434;
  --ocher-accent-peak: #f99729;
  --ocher-accent-hover: #e48924;
  --ocher-accent-pressed: #cf7c20;
  --ocher-accent-on: #000000;
  --ocher-accent-soft: #f5e9de;
  --ocher-accent-on-soft: #5a422e;
  --amber-accent-peak: #fab72f;
  --amber-accent-hover: #e6a82a;
  --amber-accent-pressed: #d29925;
  --amber-accent-on: #000000;
  --amber-accent-soft: #f5ead7;
  --amber-accent-on-soft: #54452e;
  --yellow-accent-peak: #fdf83c;
  --yellow-accent-hover: #ece737;
  --yellow-accent-pressed: #dbd632;
  --yellow-accent-on: #000000;
  --yellow-accent-soft: #f1f1a0;
  --yellow-accent-on-soft: #4a4a2e;
  --green-accent-peak: #3afc3f;
  --green-accent-hover: #35e939;
  --green-accent-pressed: #30d634;
  --green-accent-on: #000000;
  --green-accent-soft: #d6f5d4;
  --green-accent-on-soft: #31512f;
  --emerald-accent-peak: #3cfca4;
  --emerald-accent-hover: #37ea98;
  --emerald-accent-pressed: #32d78b;
  --emerald-accent-on: #000000;
  --emerald-accent-soft: #d2f5df;
  --emerald-accent-on-soft: #31503e;
  --cyan-accent-peak: #3efdfa;
  --cyan-accent-hover: #39ebe8;
  --cyan-accent-pressed: #34d9d6;
  --cyan-accent-on: #000000;
  --cyan-accent-soft: #c9f5f4;
  --cyan-accent-on-soft: #314e4d;
  --blue-accent-peak: #1361f1;
  --blue-accent-hover: #0f54d4;
  --blue-accent-pressed: #0b48b8;
  --blue-accent-on: #ffffff;
  --blue-accent-soft: #e6ebf5;
  --blue-accent-on-soft: #2b4678;
}