/*  LIGHT (DEFAULT) MODE */
:root:not([data-mode="dark"]) {
    --sf-1-base: #F3F3F2;
    --sf-1-l-10: #E1E1E0;
    --sf-1-l-15: #D6D5D3;
    --sf-1-l-30: #BCB9B5;
    --sf-1-l-45: #A09D98;
    --sf-1-l-60: #837F78;
    --sf-1-l-75: #605D58;
    --sf-1-l-90: #393734;
    --sf-1-ghost-base: #E8E8E8;
    --sf-1-ghost-hover: #DFDEDD;
    --sf-1-ghost-l-10: #D7D6D3;
    --sf-1-ghost-l-15: #CBCAC7;
    --sf-1-ghost-l-30: #B0AEAC;
    --sf-1-ghost-l-45: #93918F;
    --sf-1-ghost-l-60: #73726F;
    --sf-1-ghost-l-75: #504E4C;
    --sf-1-ghost-l-90: #1F1E1C;
    --sf-2-base: #FAFAFA;
    --sf-2-l-10: #E8E8E8;
    --sf-2-l-15: #DCDCDC;
    --sf-2-l-30: #C2C2C2;
    --sf-2-l-45: #A6A6A6;
    --sf-2-l-60: #888888;
    --sf-2-l-75: #686868;
    --sf-2-l-90: #434343;
    --sf-2-ghost-base: #EDEDED;
    --sf-2-ghost-hover: #DEDEDE;
    --sf-2-ghost-l-10: #DCDCDC;
    --sf-2-ghost-l-15: #CFCFCF;
    --sf-2-ghost-l-30: #B4B4B4;
    --sf-2-ghost-l-45: #979797;
    --sf-2-ghost-l-60: #787878;
    --sf-2-ghost-l-75: #565656;
    --sf-2-ghost-l-90: #2D2D2D;
    --primary-base: #FFC627;
    --primary-hover: #FFAE00;
    --primary-l-10: #E6B000;
    --primary-l-15: #D1A000;
    --primary-l-30: #B78B00;
    --primary-l-45: #916D00;
    --primary-l-60: #654C00;
    --primary-l-75: #2D2000;
    --primary-l-90: #1D1300;
    --primary-ghost-l-1-base: #FFF3C2;
    --primary-ghost-l-1-hover: #FFE28A;
    --primary-ghost-l-1-l-10: #FFDB41;
    --primary-ghost-l-1-l-15: #EBC500;
    --primary-ghost-l-1-l-30: #CCAB00;
    --primary-ghost-l-1-l-45: #A38900;
    --primary-ghost-l-1-l-60: #7F6A00;
    --primary-ghost-l-1-l-75: #6E5B00;
    --primary-ghost-l-1-l-90: #413500;
    --primary-ghost-l-2-base: #FFF3C2;
    --primary-ghost-l-2-hover: #FFE28A;
    --primary-ghost-l-2-l-10: #FFDB41;
    --primary-ghost-l-2-l-15: #EBC500;
    --primary-ghost-l-2-l-30: #CCAB00;
    --primary-ghost-l-2-l-45: #A38900;
    --primary-ghost-l-2-l-60: #7F6A00;
    --primary-ghost-l-2-l-75: #6E5B00;
    --primary-ghost-l-2-l-90: #413500;
    --secondary-base: #FFC627;
    --secondary-hover: #FFAE00;
    --secondary-l-10: #E6B000;
    --secondary-l-15: #D1A000;
    --secondary-l-30: #B78B00;
    --secondary-l-45: #916D00;
    --secondary-l-60: #654C00;
    --secondary-l-75: #2D2000;
    --secondary-l-90: #1D1300;
    --secondary-ghost-l-1-base: #FFF3C2;
    --secondary-ghost-l-1-hover: #FFE28A;
    --secondary-ghost-l-1-l-10: #FFDB41;
    --secondary-ghost-l-1-l-15: #EBC500;
    --secondary-ghost-l-1-l-30: #CCAB00;
    --secondary-ghost-l-1-l-45: #A38900;
    --secondary-ghost-l-1-l-60: #7F6A00;
    --secondary-ghost-l-1-l-75: #6E5B00;
    --secondary-ghost-l-1-l-90: #413500;
    --secondary-ghost-l-2-base: #FFF3C2;
    --secondary-ghost-l-2-hover: #FFE28A;
    --secondary-ghost-l-2-l-10: #FFDB41;
    --secondary-ghost-l-2-l-15: #EBC500;
    --secondary-ghost-l-2-l-30: #CCAB00;
    --secondary-ghost-l-2-l-45: #A38900;
    --secondary-ghost-l-2-l-60: #7F6A00;
    --secondary-ghost-l-2-l-75: #6E5B00;
    --secondary-ghost-l-2-l-90: #413500;
    --ai-base: #743ABF;
    --ai-hover: #8648D5;
    --ai-l-10: #8758CF;
    --ai-l-15: #926ED0;
    --ai-l-30: #A994D6;
    --ai-l-45: #BFB5D7;
    --ai-l-60: #D6D2DF;
    --ai-l-75: #ECEBEF;
    --ai-l-90: #FFFFFF;
    --ai-ghost-l-1-base: #E3D2FA;
    --ai-ghost-l-1-hover: #D2B6F7;
    --ai-ghost-l-1-l-10: #D2BFEF;
    --ai-ghost-l-1-l-15: #C5B1E5;
    --ai-ghost-l-1-l-30: #A994CC;
    --ai-ghost-l-1-l-45: #8A76A9;
    --ai-ghost-l-1-l-60: #66577E;
    --ai-ghost-l-1-l-75: #3C324C;
    --ai-ghost-l-1-l-90: #0D0A13;
    --ai-ghost-l-2-base: #F1E5FF;
    --ai-ghost-l-2-hover: #E1C7FF;
    --ai-ghost-l-2-l-10: #E0D2F8;
    --ai-ghost-l-2-l-15: #D5C4F1;
    --ai-ghost-l-2-l-30: #BBA8DA;
    --ai-ghost-l-2-l-45: #9D8CB7;
    --ai-ghost-l-2-l-60: #806E9B;
    --ai-ghost-l-2-l-75: #594D71;
    --ai-ghost-l-2-l-90: #241E2F;
    --yellow-base: #F7D83E;
    --yellow-hover: #F9E272;
    --yellow-l-10: #E2C639;
    --yellow-l-15: #D0BA4E;
    --yellow-l-30: #AB9E5D;
    --yellow-l-45: #87805E;
    --yellow-l-60: #645E44;
    --yellow-l-75: #3B3727;
    --yellow-l-90: #000000;
    --yellow-ghost-l-1-base: #FFEE99;
    --yellow-ghost-l-1-hover: #FFE97C;
    --yellow-ghost-l-1-l-10: #F4DB5D;
    --yellow-ghost-l-1-l-15: #E4D06C;
    --yellow-ghost-l-1-l-30: #C3B46B;
    --yellow-ghost-l-1-l-45: #9F9770;
    --yellow-ghost-l-1-l-60: #7F7858;
    --yellow-ghost-l-1-l-75: #5B553E;
    --yellow-ghost-l-1-l-90: #2E2B1E;
    --yellow-ghost-l-2-base: #FFF2B2;
    --yellow-ghost-l-2-hover: #FFEC90;
    --yellow-ghost-l-2-l-10: #F8E060;
    --yellow-ghost-l-2-l-15: #E9D46E;
    --yellow-ghost-l-2-l-30: #C8B96E;
    --yellow-ghost-l-2-l-45: #A49C73;
    --yellow-ghost-l-2-l-60: #847E5C;
    --yellow-ghost-l-2-l-75: #615B42;
    --yellow-ghost-l-2-l-90: #373323;
    --red-base: #E02D3E;
    --red-hover: #E44958;
    --red-l-10: #F44E55;
    --red-l-15: #F56E6D;
    --red-l-30: #EBA4A0;
    --red-l-45: #EEC6C4;
    --red-l-60: #F6E4E2;
    --red-l-75: #FFFFFF;
    --red-l-90: #FFFFFF;
    --red-ghost-l-1-base: #FFCCD1;
    --red-ghost-l-1-hover: #FFADB5;
    --red-ghost-l-1-l-10: #F5B6BA;
    --red-ghost-l-1-l-15: #EDA8AC;
    --red-ghost-l-1-l-30: #D9868D;
    --red-ghost-l-1-l-45: #B56971;
    --red-ghost-l-1-l-60: #874D53;
    --red-ghost-l-1-l-75: #512C2F;
    --red-ghost-l-1-l-90: #000000;
    --red-ghost-l-2-base: #FFDEE1;
    --red-ghost-l-2-hover: #FFC7CC;
    --red-ghost-l-2-l-10: #F7C9C9;
    --red-ghost-l-2-l-15: #F0B9BB;
    --red-ghost-l-2-l-30: #DE9A9C;
    --red-ghost-l-2-l-45: #C47A7D;
    --red-ghost-l-2-l-60: #9E5B5F;
    --red-ghost-l-2-l-75: #6F3E40;
    --red-ghost-l-2-l-90: #220F12;
    --green-base: #1B998B;
    --green-hover: #20AD91;
    --green-l-10: #44AA9D;
    --green-l-15: #64B6AA;
    --green-l-30: #92CEC4;
    --green-l-45: #B8E5DC;
    --green-l-60: #EAF6F3;
    --green-l-75: #FFFFFF;
    --green-l-90: #FFFFFF;
    --green-ghost-l-1-base: #D1EDEA;
    --green-ghost-l-1-hover: #B8E3DE;
    --green-ghost-l-1-l-10: #B8DCD5;
    --green-ghost-l-1-l-15: #ADCFC9;
    --green-ghost-l-1-l-30: #94B3AD;
    --green-ghost-l-1-l-45: #7A948F;
    --green-ghost-l-1-l-60: #5F7370;
    --green-ghost-l-1-l-75: #3F4D4A;
    --green-ghost-l-1-l-90: #141B1A;
    --green-ghost-l-2-base: #D2F7F4;
    --green-ghost-l-2-hover: #B7EDE9;
    --green-ghost-l-2-l-10: #ACEADF;
    --green-ghost-l-2-l-15: #AADCD3;
    --green-ghost-l-2-l-30: #98BEB7;
    --green-ghost-l-2-l-45: #839E99;
    --green-ghost-l-2-l-60: #687F7B;
    --green-ghost-l-2-l-75: #4B5B58;
    --green-ghost-l-2-l-90: #141B1A;
    --illustration-accent--1: #FF8F00;
    --illustration-accent--2: #FFDF99;
    --illustration-decor--1: #ECEBEA;
    --illustration-decor--2: #76726A;
    --illustration-student-icon-color--1: #3C404E;
    --illustration-student-icon-color--2: #343846;
    --illustration-student-icon-color--3: #FFD785;
    --illustration-student-icon-color--4: #EBC747;
    --illustration-creator-icon-color--1: #F26328;
    --illustration-creator-icon-color--2: #E14525;
    --illustration-creator-icon-color--3: #154A73;
    --illustration-creator-icon-color--4: #FFFFFF;
    --illustration-creator-icon-color--5: #16B6C6;
    --overlay: rgba(0,0,0,0.55);
}

/*  DARK MODE */
/*@media (prefers-color-scheme: dark),*/
:root[data-mode="dark"] {
    --sf-1-base: #0B0B0A;
    --sf-1-l-10: #3E3E3B;
    --sf-1-l-15: #53534F;
    --sf-1-l-30: #777771;
    --sf-1-l-45: #96968F;
    --sf-1-l-60: #B2B2A9;
    --sf-1-l-75: #CCCCC3;
    --sf-1-l-90: #E5E5DA;
    --sf-1-ghost-base: #262421;
    --sf-1-ghost-hover: #2C2B28;
    --sf-1-ghost-l-10: #3E3930;
    --sf-1-ghost-l-15: #5E594F;
    --sf-1-ghost-l-30: #817B71;
    --sf-1-ghost-l-45: #A0998F;
    --sf-1-ghost-l-60: #BCB5AA;
    --sf-1-ghost-l-75: #D6CFC4;
    --sf-1-ghost-l-90: #EAE8E4;
    --sf-2-base: #171717;
    --sf-2-l-10: #282828;
    --sf-2-l-15: #555555;
    --sf-2-l-30: #787878;
    --sf-2-l-45: #979797;
    --sf-2-l-60: #B3B3B3;
    --sf-2-l-75: #CDCDCD;
    --sf-2-l-90: #E5E5E5;
    --sf-2-ghost-base: #33302C;
    --sf-2-ghost-hover: #3D3C38;
    --sf-2-ghost-l-10: #524D47;
    --sf-2-ghost-l-15: #645F57;
    --sf-2-ghost-l-30: #878076;
    --sf-2-ghost-l-45: #A69E91;
    --sf-2-ghost-l-60: #C3BAAB;
    --sf-2-ghost-l-75: #DAD3C7;
    --sf-2-ghost-l-90: #EEEBE8;
    --primary-base: #FFC627;
    --primary-hover: #FFAE00;
    --primary-l-10: #E6B000;
    --primary-l-15: #D1A000;
    --primary-l-30: #B78B00;
    --primary-l-45: #916D00;
    --primary-l-60: #654C00;
    --primary-l-75: #2D2000;
    --primary-l-90: #1D1300;
    --primary-ghost-l-1-base: #2E2200;
    --primary-ghost-l-1-hover: #4D3200;
    --primary-ghost-l-1-l-10: #4C3900;
    --primary-ghost-l-1-l-15: #705400;
    --primary-ghost-l-1-l-30: #8A6800;
    --primary-ghost-l-1-l-45: #B28800;
    --primary-ghost-l-1-l-60: #E3AD00;
    --primary-ghost-l-1-l-75: #FFC627;
    --primary-ghost-l-1-l-90: #FFE5AA;
    --primary-ghost-l-2-base: #423100;
    --primary-ghost-l-2-hover: #664400;
    --primary-ghost-l-2-l-10: #6B5100;
    --primary-ghost-l-2-l-15: #7B5C00;
    --primary-ghost-l-2-l-30: #A47C00;
    --primary-ghost-l-2-l-45: #C89900;
    --primary-ghost-l-2-l-60: #EAB300;
    --primary-ghost-l-2-l-75: #FFC627;
    --primary-ghost-l-2-l-90: #FFECBF;
    --secondary-base: #FFC627;
    --secondary-hover: #FFAE00;
    --secondary-l-10: #E6B000;
    --secondary-l-15: #D1A000;
    --secondary-l-30: #B78B00;
    --secondary-l-45: #916D00;
    --secondary-l-60: #654C00;
    --secondary-l-75: #2D2000;
    --secondary-l-90: #1D1300;
    --secondary-ghost-l-1-base: #2E2200;
    --secondary-ghost-l-1-hover: #4D3200;
    --secondary-ghost-l-1-l-10: #4C3900;
    --secondary-ghost-l-1-l-15: #705400;
    --secondary-ghost-l-1-l-30: #8A6800;
    --secondary-ghost-l-1-l-45: #B28800;
    --secondary-ghost-l-1-l-60: #E3AD00;
    --secondary-ghost-l-1-l-75: #FFC627;
    --secondary-ghost-l-1-l-90: #FFE5AA;
    --secondary-ghost-l-2-base: #423100;
    --secondary-ghost-l-2-hover: #664400;
    --secondary-ghost-l-2-l-10: #6B5100;
    --secondary-ghost-l-2-l-15: #7B5C00;
    --secondary-ghost-l-2-l-30: #A47C00;
    --secondary-ghost-l-2-l-45: #C89900;
    --secondary-ghost-l-2-l-60: #EAB300;
    --secondary-ghost-l-2-l-75: #FFC627;
    --secondary-ghost-l-2-l-90: #FFECBF;
    --ai-base: #743ABF;
    --ai-hover: #8648D5;
    --ai-l-10: #8758CF;
    --ai-l-15: #926ED0;
    --ai-l-30: #A994D6;
    --ai-l-45: #BFB5D7;
    --ai-l-60: #D6D2DF;
    --ai-l-75: #ECEBEF;
    --ai-l-90: #FFFFFF;
    --ai-ghost-l-1-base: #331557;
    --ai-ghost-l-1-hover: #3F1A6B;
    --ai-ghost-l-1-l-10: #58328C;
    --ai-ghost-l-1-l-15: #6B46A0;
    --ai-ghost-l-1-l-30: #8A72B5;
    --ai-ghost-l-1-l-45: #A497C2;
    --ai-ghost-l-1-l-60: #BDB5CF;
    --ai-ghost-l-1-l-75: #D3D0DA;
    --ai-ghost-l-1-l-90: #EAE9EC;
    --ai-ghost-l-2-base: #3A1863;
    --ai-ghost-l-2-hover: #461D77;
    --ai-ghost-l-2-l-10: #5C3491;
    --ai-ghost-l-2-l-15: #6E49A6;
    --ai-ghost-l-2-l-30: #8C74B6;
    --ai-ghost-l-2-l-45: #A698C3;
    --ai-ghost-l-2-l-60: #BEB6D0;
    --ai-ghost-l-2-l-75: #D5D2DC;
    --ai-ghost-l-2-l-90: #ECECEE;
    --yellow-base: #F7D83E;
    --yellow-hover: #F9E272;
    --yellow-l-10: #E2C639;
    --yellow-l-15: #D0BA4E;
    --yellow-l-30: #AB9E5D;
    --yellow-l-45: #87805E;
    --yellow-l-60: #645E44;
    --yellow-l-75: #3B3727;
    --yellow-l-90: #000000;
    --yellow-ghost-l-1-base: #332C0A;
    --yellow-ghost-l-1-hover: #4D420F;
    --yellow-ghost-l-1-l-10: #534B23;
    --yellow-ghost-l-1-l-15: #665D35;
    --yellow-ghost-l-1-l-30: #898054;
    --yellow-ghost-l-1-l-45: #A69E75;
    --yellow-ghost-l-1-l-60: #C0B996;
    --yellow-ghost-l-1-l-75: #D8D3B8;
    --yellow-ghost-l-1-l-90: #ECEAE2;
    --yellow-ghost-l-2-base: #40370D;
    --yellow-ghost-l-2-hover: #554911;
    --yellow-ghost-l-2-l-10: #5C5327;
    --yellow-ghost-l-2-l-15: #6E6439;
    --yellow-ghost-l-2-l-30: #908659;
    --yellow-ghost-l-2-l-45: #ACA378;
    --yellow-ghost-l-2-l-60: #C6BE9A;
    --yellow-ghost-l-2-l-75: #DDD7BC;
    --yellow-ghost-l-2-l-90: #F5EFD3;
    --red-base: #E02D3E;
    --red-hover: #E44958;
    --red-l-10: #F44E55;
    --red-l-15: #F56E6D;
    --red-l-30: #EBA4A0;
    --red-l-45: #EEC6C4;
    --red-l-60: #F6E4E2;
    --red-l-75: #FFFFFF;
    --red-l-90: #FFFFFF;
    --red-ghost-l-1-base: #402023;
    --red-ghost-l-1-hover: #552B2F;
    --red-ghost-l-1-l-10: #6A3C3F;
    --red-ghost-l-1-l-15: #834A50;
    --red-ghost-l-1-l-30: #AC6B71;
    --red-ghost-l-1-l-45: #C09194;
    --red-ghost-l-1-l-60: #D0B1B1;
    --red-ghost-l-1-l-75: #DDCFD0;
    --red-ghost-l-1-l-90: #ECEAEA;
    --red-ghost-l-2-base: #4D2226 ;
    --red-ghost-l-2-hover: #602A2F;
    --red-ghost-l-2-l-10: #703F42;
    --red-ghost-l-2-l-15: #894E52;
    --red-ghost-l-2-l-30: #B06E73;
    --red-ghost-l-2-l-45: #C19394;
    --red-ghost-l-2-l-60: #D2B4B5;
    --red-ghost-l-2-l-75: #DED3D3;
    --red-ghost-l-2-l-90: #EEECEC;
    --green-base: #1B998B;
    --green-hover: #20AD91;
    --green-l-10: #44AA9D;
    --green-l-15: #64B6AA;
    --green-l-30: #92CEC4;
    --green-l-45: #B8E5DC;
    --green-l-60: #EAF6F3;
    --green-l-75: #FFFFFF;
    --green-l-90: #FFFFFF;
    --green-ghost-l-1-base: #1C2B2A;
    --green-ghost-l-1-hover: #1E3332;
    --green-ghost-l-1-l-10: #364D4B;
    --green-ghost-l-1-l-15: #45615D;
    --green-ghost-l-1-l-30: #658481;
    --green-ghost-l-1-l-45: #81A29E;
    --green-ghost-l-1-l-60: #9ABFBC;
    --green-ghost-l-1-l-75: #BBD7D4;
    --green-ghost-l-1-l-90: #E2EBEB;
    --green-ghost-l-2-base: #243837;
    --green-ghost-l-2-hover: #284543;
    --green-ghost-l-2-l-10: #3D5452;
    --green-ghost-l-2-l-15: #4B6764;
    --green-ghost-l-2-l-30: #698A86;
    --green-ghost-l-2-l-45: #86A8A5;
    --green-ghost-l-2-l-60: #9EC4C0;
    --green-ghost-l-2-l-75: #C0DCD9;
    --green-ghost-l-2-l-90: #E8EFEF;
    --illustration-accent--1: #FF8F00;
    --illustration-accent--2: #FFDF99;
    --illustration-decor--1: #ECEBEA;
    --illustration-decor--2: #76726A;
    --illustration-student-icon-color--1: #3C404E;
    --illustration-student-icon-color--2: #343846;
    --illustration-student-icon-color--3: #FFD785;
    --illustration-student-icon-color--4: #EBC747;
    --illustration-creator-icon-color--1: #F26328;
    --illustration-creator-icon-color--2: #E14525;
    --illustration-creator-icon-color--3: #154A73;
    --illustration-creator-icon-color--4: #FFFFFF;
    --illustration-creator-icon-color--5: #16B6C6;
    --overlay: rgba(0,0,0,0.55);
}