:where(html) {
  --gray-1: light-dark(#fcfcfc, #111111);
  --gray-2: light-dark(#f9f9f9, #191919);
  --gray-3: light-dark(#efefef, #222222);
  --gray-4: light-dark(#e8e8e8, #2a2a2a);
  --gray-5: light-dark(#e0e0e0, #313131);
  --gray-6: light-dark(#d8d8d8, #3a3a3a);
  --gray-7: light-dark(#cecece, #484848);
  --gray-8: light-dark(#bbbbbb, #606060);
  --gray-9: light-dark(#8d8d8d, #6e6e6e);
  --gray-10: light-dark(#838383, #7b7b7b);
  --gray-11: light-dark(#646464, #b4b4b4);
  --gray-12: light-dark(#202020, #eeeeee);
  --gray-contrast: #fff;

  --mauve-1: light-dark(#fdfcfd, #121113);
  --mauve-2: light-dark(#faf9fb, #1a191b);
  --mauve-3: light-dark(#f2eff3, #232225);
  --mauve-4: light-dark(#eae7ec, #2b292d);
  --mauve-5: light-dark(#e2dfe6, #323035);
  --mauve-6: light-dark(#dbd8e0, #3c393f);
  --mauve-7: light-dark(#d0cdd7, #49474e);
  --mauve-8: light-dark(#bcbac7, #625f69);
  --mauve-9: light-dark(#8e8c99, #6f6d78);
  --mauve-10: light-dark(#83818e, #7d7a85);
  --mauve-11: light-dark(#65636d, #b5b2bc);
  --mauve-12: light-dark(#211f26, #eeeef0);
  --mauve-contrast: #fff;

  --slate-1: light-dark(#fcfcfd, #111113);
  --slate-2: light-dark(#f9f9fb, #18191b);
  --slate-3: light-dark(#f0f0f3, #212225);
  --slate-4: light-dark(#e7e8ec, #272a2d);
  --slate-5: light-dark(#e0e1e6, #2e3135);
  --slate-6: light-dark(#d9d9e0, #363a3f);
  --slate-7: light-dark(#cdced6, #43484e);
  --slate-8: light-dark(#b9bbc6, #5a6169);
  --slate-9: light-dark(#8b8d98, #696e77);
  --slate-10: light-dark(#80838d, #777b84);
  --slate-11: light-dark(#60646c, #b0b4ba);
  --slate-12: light-dark(#1c2024, #edeef0);
  --slate-contrast: #fff;

  --sage-1: light-dark(#fbfdfc, #101211);
  --sage-2: light-dark(#f7f9f8, #171918);
  --sage-3: light-dark(#eef1f0, #202221);
  --sage-4: light-dark(#e6e9e8, #272a28);
  --sage-5: light-dark(#dfe2e0, #2e3130);
  --sage-6: light-dark(#d7dad8, #373b39);
  --sage-7: light-dark(#cbcfcd, #444947);
  --sage-8: light-dark(#b8bcbb, #5b625f);
  --sage-9: light-dark(#868e8b, #63706b);
  --sage-10: light-dark(#7c8481, #717d79);
  --sage-11: light-dark(#5f6563, #adb5b2);
  --sage-12: light-dark(#1a211e, #eceeed);
  --sage-contrast: #fff;

  --olive-1: light-dark(#fcfdfc, #111210);
  --olive-2: light-dark(#f8faf8, #181917);
  --olive-3: light-dark(#eff1ef, #212220);
  --olive-4: light-dark(#e7e9e7, #282a27);
  --olive-5: light-dark(#dfe2df, #2f312e);
  --olive-6: light-dark(#d7dad7, #383a37);
  --olive-7: light-dark(#cccfcc, #454943);
  --olive-8: light-dark(#b9bcb8, #5c625b);
  --olive-9: light-dark(#898e87, #687066);
  --olive-10: light-dark(#7f837d, #767d74);
  --olive-11: light-dark(#60655f, #afb5ad);
  --olive-12: light-dark(#1d211c, #eceeec);
  --olive-contrast: #fff;

  --sand-1: light-dark(#fdfdfc, #111110);
  --sand-2: light-dark(#f9f9f8, #191918);
  --sand-3: light-dark(#f1f0ef, #222221);
  --sand-4: light-dark(#e9e9e6, #2a2a28);
  --sand-5: light-dark(#e2e1de, #31312e);
  --sand-6: light-dark(#dad9d6, #3b3a37);
  --sand-7: light-dark(#cfcfca, #494844);
  --sand-8: light-dark(#bcbbb5, #62605a);
  --sand-9: light-dark(#8d8d86, #6f6d66);
  --sand-10: light-dark(#82827c, #7d7b74);
  --sand-11: light-dark(#63635e, #b5b3ad);
  --sand-12: light-dark(#21201c, #eeeeec);
  --sand-contrast: #fff;

  --tomato-1: light-dark(#fffcfc, #181111);
  --tomato-2: light-dark(#fff8f7, #1f1513);
  --tomato-3: light-dark(#ffebe7, #391714);
  --tomato-4: light-dark(#ffdcd3, #4e1511);
  --tomato-5: light-dark(#ffcdc2, #5e1c16);
  --tomato-6: light-dark(#fdbdaf, #6e2920);
  --tomato-7: light-dark(#f5a898, #863a2d);
  --tomato-8: light-dark(#ec8e7b, #ac4d39);
  --tomato-9: light-dark(#e54d2e, #e54d2e);
  --tomato-10: light-dark(#dd4425, #ec6142);
  --tomato-11: light-dark(#d13415, #ff8e6c);
  --tomato-12: light-dark(#5c271f, #fbd3cb);
  --tomato-contrast: #fff;

  --red-1: light-dark(#fffcfc, #191111);
  --red-2: light-dark(#fff7f7, #201314);
  --red-3: light-dark(#feebec, #3b1219);
  --red-4: light-dark(#ffdbdc, #500e1c);
  --red-5: light-dark(#ffcdce, #611623);
  --red-6: light-dark(#fdbdbe, #73232d);
  --red-7: light-dark(#f4a9aa, #8c333a);
  --red-8: light-dark(#eb8e90, #b54548);
  --red-9: light-dark(#e5484d, #e5484d);
  --red-10: light-dark(#dd3e42, #ec5e5e);
  --red-11: light-dark(#ce2c31, #ff8a88);
  --red-12: light-dark(#641723, #ffd1d9);
  --red-contrast: #fff;

  --ruby-1: light-dark(#fffcfd, #191113);
  --ruby-2: light-dark(#fff7f8, #1e1517);
  --ruby-3: light-dark(#feeaed, #3a141e);
  --ruby-4: light-dark(#ffdce1, #4e1325);
  --ruby-5: light-dark(#fecfd6, #5e1a2e);
  --ruby-6: light-dark(#f8bfc8, #6f2539);
  --ruby-7: light-dark(#efacb8, #883447);
  --ruby-8: light-dark(#e592a3, #b3445a);
  --ruby-9: light-dark(#e54666, #e54666);
  --ruby-10: light-dark(#dc3b5d, #ec5a72);
  --ruby-11: light-dark(#ca244d, #ff8a94);
  --ruby-12: light-dark(#64172b, #fed2e1);
  --ruby-contrast: #fff;

  --crimson-1: light-dark(#fffcfd, #191114);
  --crimson-2: light-dark(#fef7f9, #201318);
  --crimson-3: light-dark(#ffe9f0, #381525);
  --crimson-4: light-dark(#fedce7, #4d122f);
  --crimson-5: light-dark(#facedd, #5c1839);
  --crimson-6: light-dark(#f3bed1, #6d2445);
  --crimson-7: light-dark(#eaacc3, #873357);
  --crimson-8: light-dark(#e094b2, #b0436e);
  --crimson-9: light-dark(#e93d82, #e93d82);
  --crimson-10: light-dark(#df3478, #ee528a);
  --crimson-11: light-dark(#cb1d63, #ff87a8);
  --crimson-12: light-dark(#621639, #fdd3e8);
  --crimson-contrast: #fff;

  --pink-1: light-dark(#fffcfe, #191117);
  --pink-2: light-dark(#fef7fb, #21121d);
  --pink-3: light-dark(#fee9f6, #37172f);
  --pink-4: light-dark(#fbdcef, #4b143d);
  --pink-5: light-dark(#f6cee7, #591c47);
  --pink-6: light-dark(#efbfdd, #692955);
  --pink-7: light-dark(#e7acd1, #833869);
  --pink-8: light-dark(#dd93c2, #a84885);
  --pink-9: light-dark(#d6409f, #d6409f);
  --pink-10: light-dark(#cf3897, #de51a8);
  --pink-11: light-dark(#c2298a, #ff80ca);
  --pink-12: light-dark(#651249, #fdd1ea);
  --pink-contrast: #fff;

  --plum-1: light-dark(#fefcff, #181118);
  --plum-2: light-dark(#fdf7fd, #201320);
  --plum-3: light-dark(#fbebfb, #351935);
  --plum-4: light-dark(#f7def8, #451d47);
  --plum-5: light-dark(#f1d1f3, #502454);
  --plum-6: light-dark(#e9c2ec, #5e3062);
  --plum-7: light-dark(#deade3, #734079);
  --plum-8: light-dark(#cf91d8, #92549c);
  --plum-9: light-dark(#ab4aba, #ab4aba);
  --plum-10: light-dark(#a144af, #b658c4);
  --plum-11: light-dark(#953ea3, #e796f3);
  --plum-12: light-dark(#53195d, #f4d4f4);
  --plum-contrast: #fff;

  --purple-1: light-dark(#fefcfe, #18111b);
  --purple-2: light-dark(#fbf7fe, #1e1523);
  --purple-3: light-dark(#f7edfd, #2f1c3b);
  --purple-4: light-dark(#f2e2fc, #3d224e);
  --purple-5: light-dark(#ead5f9, #48295c);
  --purple-6: light-dark(#e0c4f4, #54346b);
  --purple-7: light-dark(#d1afec, #664282);
  --purple-8: light-dark(#be93e4, #8357aa);
  --purple-9: light-dark(#8e4ec6, #8e4ec6);
  --purple-10: light-dark(#8347b9, #9a5cd0);
  --purple-11: light-dark(#8145b5, #d59cff);
  --purple-12: light-dark(#402060, #ecd9fa);
  --purple-contrast: #fff;

  --violet-1: light-dark(#fdfcfe, #14121f);
  --violet-2: light-dark(#faf8ff, #1b1525);
  --violet-3: light-dark(#f4f0fe, #291f44);
  --violet-4: light-dark(#ebe5ff, #33255b);
  --violet-5: light-dark(#e1d9ff, #3c2e69);
  --violet-6: light-dark(#d4cafe, #473876);
  --violet-7: light-dark(#c2b5f5, #56468b);
  --violet-8: light-dark(#aa99ec, #6858ad);
  --violet-9: light-dark(#6e56cf, #6e56cf);
  --violet-10: light-dark(#654dc4, #7d66d9);
  --violet-11: light-dark(#6550b9, #bba5ff);
  --violet-12: light-dark(#2f265f, #e2ddfe);
  --violet-contrast: #fff;

  --iris-1: light-dark(#fdfdff, #13131e);
  --iris-2: light-dark(#f8f8ff, #171625);
  --iris-3: light-dark(#f0f1fe, #202248);
  --iris-4: light-dark(#e6e7ff, #262a65);
  --iris-5: light-dark(#dadcff, #303374);
  --iris-6: light-dark(#cbcdff, #3d3d82);
  --iris-7: light-dark(#b8b9f8, #4a4a95);
  --iris-8: light-dark(#9b9ef0, #5a58b1);
  --iris-9: light-dark(#5b5bd6, #5b5bd6);
  --iris-10: light-dark(#5151cd, #6e6ade);
  --iris-11: light-dark(#5753c6, #b0a9ff);
  --iris-12: light-dark(#272962, #e0dffe);
  --iris-contrast: #fff;

  --indigo-1: light-dark(#fdfdfe, #11131f);
  --indigo-2: light-dark(#f7f9ff, #141726);
  --indigo-3: light-dark(#edf2fe, #182449);
  --indigo-4: light-dark(#e0e9ff, #1d2e61);
  --indigo-5: light-dark(#d2deff, #253974);
  --indigo-6: light-dark(#c1d0ff, #304384);
  --indigo-7: light-dark(#abbdf9, #3a4f97);
  --indigo-8: light-dark(#8da4ef, #435db2);
  --indigo-9: light-dark(#3e63dd, #3e63dd);
  --indigo-10: light-dark(#3358d4, #5472e4);
  --indigo-11: light-dark(#3a5bc7, #9db1ff);
  --indigo-12: light-dark(#1f2d5c, #d6e1ff);
  --indigo-contrast: #fff;

  --blue-1: light-dark(#fbfdff, #0d1520);
  --blue-2: light-dark(#f4faff, #111927);
  --blue-3: light-dark(#e6f4fe, #0d2847);
  --blue-4: light-dark(#d5eeff, #003362);
  --blue-5: light-dark(#c2e5ff, #004074);
  --blue-6: light-dark(#acd8fc, #104d87);
  --blue-7: light-dark(#8ec8f6, #205d9e);
  --blue-8: light-dark(#5eb1ef, #2870bd);
  --blue-9: light-dark(#0190ff, #0190ff);
  --blue-10: light-dark(#0687f0, #3b9eff);
  --blue-11: light-dark(#0072de, #6abaff);
  --blue-12: light-dark(#113264, #c2e6ff);
  --blue-contrast: #fff;

  --cyan-1: light-dark(#fafdfe, #0b1619);
  --cyan-2: light-dark(#f2fafb, #101b20);
  --cyan-3: light-dark(#def7f9, #082c36);
  --cyan-4: light-dark(#caf1f6, #003848);
  --cyan-5: light-dark(#b5e9f0, #004558);
  --cyan-6: light-dark(#9ddee7, #045468);
  --cyan-7: light-dark(#7dcedc, #12677e);
  --cyan-8: light-dark(#3db9ce, #11809c);
  --cyan-9: light-dark(#01a2c7, #01a2c7);
  --cyan-10: light-dark(#0797b9, #23afd0);
  --cyan-11: light-dark(#007da5, #4ccce5);
  --cyan-12: light-dark(#0d3c48, #b6ecf7);
  --cyan-contrast: #fff;

  --teal-1: light-dark(#fafefd, #0d1514);
  --teal-2: light-dark(#f3fbf9, #111c1b);
  --teal-3: light-dark(#e0f8f3, #0d2d2a);
  --teal-4: light-dark(#ccf3ea, #023b37);
  --teal-5: light-dark(#b8ebe0, #084843);
  --teal-6: light-dark(#a1ded2, #145750);
  --teal-7: light-dark(#83cdc1, #1c6961);
  --teal-8: light-dark(#53b9ab, #1f7f74);
  --teal-9: light-dark(#12a594, #12a594);
  --teal-10: light-dark(#0d9b8a, #0db39e);
  --teal-11: light-dark(#00826d, #0ad8b6);
  --teal-12: light-dark(#0d3d38, #adf0dd);
  --teal-contrast: #fff;

  --jade-1: light-dark(#fbfefd, #0d1512);
  --jade-2: light-dark(#f4fbf7, #121c18);
  --jade-3: light-dark(#e5f7ed, #0f2e23);
  --jade-4: light-dark(#d6f1e3, #0a3b2c);
  --jade-5: light-dark(#c3e9d7, #104837);
  --jade-6: light-dark(#acdec9, #1b5645);
  --jade-7: light-dark(#8bceb6, #246854);
  --jade-8: light-dark(#55ba9f, #2a7e68);
  --jade-9: light-dark(#29a383, #29a383);
  --jade-10: light-dark(#26997b, #27b08b);
  --jade-11: light-dark(#00825c, #1ed8a4);
  --jade-12: light-dark(#1d3b31, #adf0d4);
  --jade-contrast: #fff;

  --green-1: light-dark(#fbfefc, #0e1512);
  --green-2: light-dark(#f4fbf6, #121b17);
  --green-3: light-dark(#e6f6eb, #132d21);
  --green-4: light-dark(#d6f1df, #113b29);
  --green-5: light-dark(#c4e8d1, #174933);
  --green-6: light-dark(#adddc0, #1f573e);
  --green-7: light-dark(#8eceaa, #28684a);
  --green-8: light-dark(#5bb88b, #2f7c57);
  --green-9: light-dark(#30a46c, #30a46c);
  --green-10: light-dark(#2b9a66, #33b074);
  --green-11: light-dark(#00824d, #3dd68c);
  --green-12: light-dark(#193b2d, #b1f1cb);
  --green-contrast: #fff;

  --grass-1: light-dark(#fbfefb, #0e1511);
  --grass-2: light-dark(#f5fbf5, #141a15);
  --grass-3: light-dark(#e9f7e9, #1b2a1e);
  --grass-4: light-dark(#daf0db, #1d3a24);
  --grass-5: light-dark(#c9e9ca, #25482d);
  --grass-6: light-dark(#b2deb5, #2d5736);
  --grass-7: light-dark(#94ce9a, #366740);
  --grass-8: light-dark(#65ba74, #3e7949);
  --grass-9: light-dark(#46a758, #46a758);
  --grass-10: light-dark(#3e9a4f, #53b365);
  --grass-11: light-dark(#2a7e3b, #71d083);
  --grass-12: light-dark(#203c25, #c2f0c2);
  --grass-contrast: #fff;

  --brown-1: light-dark(#fefdfc, #12110f);
  --brown-2: light-dark(#fcf9f5, #1c1816);
  --brown-3: light-dark(#f6eee7, #28211d);
  --brown-4: light-dark(#f0e4d9, #322922);
  --brown-5: light-dark(#ebdaca, #3e3128);
  --brown-6: light-dark(#e4cdb8, #4d3c2f);
  --brown-7: light-dark(#dcbc9f, #614a39);
  --brown-8: light-dark(#cea37e, #7c5f46);
  --brown-9: light-dark(#ad7f58, #ad7f58);
  --brown-10: light-dark(#a07553, #b98c67);
  --brown-11: light-dark(#815e46, #dbb594);
  --brown-12: light-dark(#3e332e, #f2e1ca);
  --brown-contrast: #fff;

  --bronze-1: light-dark(#fdfcfc, #141110);
  --bronze-2: light-dark(#fdf7f5, #1c1918);
  --bronze-3: light-dark(#f6edea, #262120);
  --bronze-4: light-dark(#efe4df, #302a27);
  --bronze-5: light-dark(#e7d9d3, #3b3330);
  --bronze-6: light-dark(#dfcdc5, #493e3a);
  --bronze-7: light-dark(#d3bcb3, #5a4d47);
  --bronze-8: light-dark(#c2a499, #6f5f57);
  --bronze-9: light-dark(#a18072, #a18072);
  --bronze-10: light-dark(#957468, #ae8d7e);
  --bronze-11: light-dark(#7d5e54, #d4b3a5);
  --bronze-12: light-dark(#43302b, #ede0d9);
  --bronze-contrast: #fff;

  --gold-1: light-dark(#fdfdfc, #121211);
  --gold-2: light-dark(#faf9f2, #1b1a17);
  --gold-3: light-dark(#f2f0e7, #24231f);
  --gold-4: light-dark(#eae6dc, #2e2b26);
  --gold-5: light-dark(#e1dccf, #38352f);
  --gold-6: light-dark(#d7d0bf, #444039);
  --gold-7: light-dark(#cbc0aa, #544f46);
  --gold-8: light-dark(#b9a88d, #696256);
  --gold-9: light-dark(#978365, #978365);
  --gold-10: light-dark(#8c795e, #a39073);
  --gold-11: light-dark(#71624b, #cbb99f);
  --gold-12: light-dark(#3b352b, #e8e2d9);
  --gold-contrast: #fff;

  --sky-1: light-dark(#f9feff, #0d141e);
  --sky-2: light-dark(#f1fafd, #111a27);
  --sky-3: light-dark(#e1f6fd, #112840);
  --sky-4: light-dark(#d1f0fb, #113655);
  --sky-5: light-dark(#bee7f5, #154467);
  --sky-6: light-dark(#a9daed, #1b537b);
  --sky-7: light-dark(#8dcae3, #1f6692);
  --sky-8: light-dark(#60b3d7, #197cae);
  --sky-9: light-dark(#7ce2fe, #7ce2fe);
  --sky-10: light-dark(#74daf8, #a8eeff);
  --sky-11: light-dark(#00749e, #75c7f0);
  --sky-12: light-dark(#1d3e56, #c2f3ff);
  --sky-contrast: #1c2024;

  --mint-1: light-dark(#f9fefd, #0d1515);
  --mint-2: light-dark(#f2fbf9, #0f1b1b);
  --mint-3: light-dark(#ddf9f2, #092c2b);
  --mint-4: light-dark(#c8f4e9, #003a39);
  --mint-5: light-dark(#b3ecde, #004744);
  --mint-6: light-dark(#9ce0d0, #0f5650);
  --mint-7: light-dark(#7ecfbd, #1e685f);
  --mint-8: light-dark(#4cbba5, #277f70);
  --mint-9: light-dark(#86ead4, #86ead4);
  --mint-10: light-dark(#7de1cb, #a8f5e5);
  --mint-11: light-dark(#037864, #58d5ba);
  --mint-12: light-dark(#16433c, #c4f5e1);
  --mint-contrast: #1a211e;

  --lime-1: light-dark(#fcfdfa, #11130c);
  --lime-2: light-dark(#f8faf3, #151a10);
  --lime-3: light-dark(#eef6d6, #1f2917);
  --lime-4: light-dark(#e2f0bd, #29371d);
  --lime-5: light-dark(#d3e7a6, #334423);
  --lime-6: light-dark(#c2da91, #3d522a);
  --lime-7: light-dark(#abc978, #496231);
  --lime-8: light-dark(#8db554, #577538);
  --lime-9: light-dark(#bdee63, #bdee63);
  --lime-10: light-dark(#b0e64c, #d4ff70);
  --lime-11: light-dark(#5c7c2f, #bde56b);
  --lime-12: light-dark(#37401c, #e3f7ba);
  --lime-contrast: #1d211c;

  --yellow-1: light-dark(#fdfdf9, #14110b);
  --yellow-2: light-dark(#fefce9, #1b180f);
  --yellow-3: light-dark(#fffab8, #2c2305);
  --yellow-4: light-dark(#fff394, #372b00);
  --yellow-5: light-dark(#ffe770, #433500);
  --yellow-6: light-dark(#f3d768, #524202);
  --yellow-7: light-dark(#e4c767, #665417);
  --yellow-8: light-dark(#d5ae39, #836a20);
  --yellow-9: light-dark(#ffea00, #ffea00);
  --yellow-10: light-dark(#ffdc00, #ffff57);
  --yellow-11: light-dark(#a06e00, #f5e147);
  --yellow-12: light-dark(#473b1f, #f6eeb4);
  --yellow-contrast: #21201c;

  --amber-1: light-dark(#fefdfb, #16120c);
  --amber-2: light-dark(#fefbe9, #1d180f);
  --amber-3: light-dark(#fff7c2, #302008);
  --amber-4: light-dark(#ffee9c, #412700);
  --amber-5: light-dark(#fbe577, #4e3000);
  --amber-6: light-dark(#f4d673, #5c3d05);
  --amber-7: light-dark(#e9c163, #714f1a);
  --amber-8: light-dark(#e2a336, #8f6424);
  --amber-9: light-dark(#ffc100, #ffc100);
  --amber-10: light-dark(#ffba18, #ffdc00);
  --amber-11: light-dark(#ad6200, #ffc916);
  --amber-12: light-dark(#4f3422, #ffe7b3);
  --amber-contrast: #21201c;

  --orange-1: light-dark(#fefcfb, #17120e);
  --orange-2: light-dark(#fff7ed, #1e160f);
  --orange-3: light-dark(#ffefd6, #331e0b);
  --orange-4: light-dark(#ffdda9, #481f00);
  --orange-5: light-dark(#ffcf8b, #562800);
  --orange-6: light-dark(#ffc182, #66350c);
  --orange-7: light-dark(#f5ae73, #7e451d);
  --orange-8: light-dark(#ec9455, #a35829);
  --orange-9: light-dark(#f76a15, #f76a15);
  --orange-10: light-dark(#ef5f00, #ff791b);
  --orange-11: light-dark(#d14e00, #ff9b52);
  --orange-12: light-dark(#582d1d, #ffe0c2);
  --orange-contrast: #fff;
}

:where(html) {
  --font-system-ui: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  --font-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
  --font-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
  --font-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
  --font-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
  --font-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
  --font-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
  --font-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
  --font-monospace-code:
    Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro,
    Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
  --font-industrial:
    Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
  --font-rounded-sans:
    ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold,
    Calibri, source-sans-pro, sans-serif;
  --font-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
  --font-antique: Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
  --font-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
  --font-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
  --font-sans: var(--font-system-ui);
  --font-serif: ui-serif, serif;
  --font-mono: var(--font-monospace-code);

  --font-lineheight-00: 0.95;
  --font-lineheight-0: 1.1;
  --font-lineheight-1: 1.25;
  --font-lineheight-2: 1.375;
  --font-lineheight-3: 1.5;
  --font-lineheight-4: 1.75;
  --font-lineheight-5: 2;

  --font-letterspacing-0: -0.05em;
  --font-letterspacing-1: 0.025em;
  --font-letterspacing-2: 0.05em;
  --font-letterspacing-3: 0.075em;
  --font-letterspacing-4: 0.15em;
  --font-letterspacing-5: 0.5em;
  --font-letterspacing-6: 0.75em;
  --font-letterspacing-7: 1em;

  --font-size-00: 0.5rem;
  --font-size-0: 0.75rem;
  --font-size-1: 1rem;
  --font-size-2: 1.1rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.5rem;
  --font-size-5: 2rem;
  --font-size-6: 2.5rem;
  --font-size-7: 3rem;
  --font-size-8: 3.5rem;

  --font-size-fluid-0: max(0.75rem, min(2vw, 1rem));
  --font-size-fluid-1: max(1rem, min(4vw, 1.5rem));
  --font-size-fluid-2: max(1.5rem, min(6vw, 2.5rem));
  --font-size-fluid-3: max(2rem, min(9vw, 3.5rem));
}

:where(html) {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
}

:where(html) {
  --ease: cubic-bezier(0.25, 0, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.3, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
  --ease-bounce-out: cubic-bezier(0.5, 1.25, 0.75, 1.25);
  --ease-bounce-in: cubic-bezier(0.5, -0.75, 0.75, 1);
  --ease-bounce-in-out: cubic-bezier(0.5, -0.5, 0.1, 1.5);

  --animation-fade-in: fade-in 0.5s var(--ease);
  --animation-fade-out: fade-out 0.5s var(--ease);

  --animation-scale-up: scale-up 0.5s var(--ease);
  --animation-scale-down: scale-down 0.5s var(--ease);

  --animation-spin: spin 2s linear infinite;
  --animation-blink: blink 1s var(--ease-out) infinite;
  --animation-bounce: bounce 2s var(--ease-bounce-in-out) infinite;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes scale-up {
  to {
    transform: scale(1.25);
  }
}

@keyframes scale-down {
  to {
    transform: scale(0.75);
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes blink {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {
  25% {
    transform: translateY(-20%);
  }
  40% {
    transform: translateY(-3%);
  }
  0%,
  60%,
  to {
    transform: translateY(0);
  }
}

:where(html) {
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;

  --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff, inset 0 0.5px 0 0 rgba(0, 0, 0, 0.067);

  --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-2:
    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
  --shadow-3:
    0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-4:
    0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));

  --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --inner-shadow-1:
    inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
  --inner-shadow-2:
    inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
  --inner-shadow-3:
    inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
  --inner-shadow-4:
    inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);

  --border-size-1: 1px;
  --border-size-2: 2px;
  --border-size-3: 5px;
  --border-size-4: 10px;
  --border-size-5: 25px;

  --radius-1: 2px;
  --radius-2: 3px;
  --radius-3: 4px;
  --radius-4: 6px;
  --radius-5: 8px;
  --radius-6: 12px;

  --radius-round: 1e5px;

  :where(html.dark-theme) {
    --shadow-color: 220 40% 2%;
    --shadow-strength: 25%;
    --inner-shadow-highlight: inset 0 -0.5px 0 0 hsla(0, 0%, 100%, 0.067), inset 0 0.5px 0 0 rgba(0, 0, 0, 0.467);
  }
}