html[data-skin="classic"][data-mode="light"] {
    --page-color: #e8e8e8;
    --panel-background: lightgrey;
    --font-color: #323232;
    --font-color-sub: #666;
    --field-background: #fff;
    --control-background: #fff;
    --control-hover: #f4f4f4;
    --main-color: #323232;
    --input-focus: #2d8cf0;
    --danger-color: #b42318;
    --panel-radius: 5px;
    --panel-shadow: 4px 4px #323232;
    --field-radius: 5px;
    --field-shadow: 4px 4px #323232;
    --control-radius: 5px;
    --control-shadow: 4px 4px #323232;
    --primary-background: #fff;
    --primary-hover: #f4f4f4;
    --primary-color: #323232;
    --image-blend-mode: multiply;
}

html[data-skin="classic"][data-mode="dark"] {
    --page-color: #18191b;
    --panel-background: #292b2f;
    --font-color: #f4f4f5;
    --font-color-sub: #b2b4b8;
    --field-background: #202226;
    --control-background: #34363b;
    --control-hover: #3d4045;
    --main-color: #090a0b;
    --input-focus: #60a5fa;
    --danger-color: #ff8a80;
    --panel-radius: 5px;
    --panel-shadow: 4px 4px #090a0b;
    --field-radius: 5px;
    --field-shadow: 4px 4px #090a0b;
    --control-radius: 5px;
    --control-shadow: 4px 4px #090a0b;
    --primary-background: #f4f4f5;
    --primary-hover: #fff;
    --primary-color: #18191b;
    --image-blend-mode: normal;
}

html[data-skin="midnight"][data-mode="light"] {
    --page-color: #e9e9e9;
    --panel-background: #f5f5f5;
    --font-color: #171717;
    --font-color-sub: #666;
    --field-background: #ededed;
    --control-background: #dedede;
    --control-hover: #cfcfcf;
    --main-color: #b9b9b9;
    --input-focus: #252525;
    --danger-color: #b42318;
    --panel-radius: 25px;
    --panel-shadow: 0 22px 45px rgb(0 0 0 / 14%);
    --field-radius: 25px;
    --field-shadow: inset 2px 5px 10px #c5c5c5;
    --control-radius: 8px;
    --control-shadow: 0 8px 18px rgb(0 0 0 / 12%);
    --primary-background: #252525;
    --primary-hover: #000;
    --primary-color: #fff;
    --image-blend-mode: multiply;
}

html[data-skin="midnight"][data-mode="dark"] {
    --page-color: #101010;
    --panel-background: #171717;
    --font-color: #f7f7f7;
    --font-color-sub: #b8b8b8;
    --field-background: #171717;
    --control-background: #252525;
    --control-hover: #050505;
    --main-color: #303030;
    --input-focus: #f4f4f5;
    --danger-color: #ff8a80;
    --panel-radius: 25px;
    --panel-shadow: 0 24px 60px rgb(0 0 0 / 45%);
    --field-radius: 25px;
    --field-shadow: inset 2px 5px 10px #050505;
    --control-radius: 8px;
    --control-shadow: 0 10px 24px rgb(0 0 0 / 35%);
    --primary-background: #f4f4f5;
    --primary-hover: #fff;
    --primary-color: #171717;
    --image-blend-mode: normal;
}

html[data-skin="sky"][data-mode="light"] {
    --page-color: #edf7fb;
    --panel-background: linear-gradient(0deg, #fff 0%, #f4f7fb 100%);
    --font-color: #11344a;
    --font-color-sub: #6b8290;
    --field-background: #fff;
    --control-background: #fff;
    --control-hover: #f2fbff;
    --main-color: #fff;
    --input-focus: #12b1d1;
    --danger-color: #c2413a;
    --panel-radius: 40px;
    --panel-shadow: 0 30px 30px -20px rgb(133 189 215 / 88%);
    --field-radius: 20px;
    --field-shadow: 0 10px 10px -5px #cff0ff;
    --control-radius: 20px;
    --control-shadow: 0 18px 18px -14px rgb(133 189 215 / 88%);
    --primary-background: linear-gradient(45deg, #1089d3 0%, #12b1d1 100%);
    --primary-hover: linear-gradient(45deg, #0e7ec3 0%, #10a2bf 100%);
    --primary-color: #fff;
    --image-blend-mode: multiply;
}

html[data-skin="sky"][data-mode="dark"] {
    --page-color: #071722;
    --panel-background: linear-gradient(0deg, #0a1d29 0%, #0d2634 100%);
    --font-color: #e7f7ff;
    --font-color-sub: #9fbcca;
    --field-background: #102d3d;
    --control-background: #123448;
    --control-hover: #173f55;
    --main-color: #21495c;
    --input-focus: #38c6e2;
    --danger-color: #ff8f87;
    --panel-radius: 40px;
    --panel-shadow: 0 30px 35px -20px rgb(0 0 0 / 70%);
    --field-radius: 20px;
    --field-shadow: inset 0 3px 9px rgb(0 0 0 / 28%);
    --control-radius: 20px;
    --control-shadow: 0 16px 22px -16px rgb(0 0 0 / 75%);
    --primary-background: linear-gradient(45deg, #1089d3 0%, #12b1d1 100%);
    --primary-hover: linear-gradient(45deg, #159be8 0%, #25c2df 100%);
    --primary-color: #fff;
    --image-blend-mode: normal;
}

html[data-skin="mono"][data-mode="light"] {
    --page-color: #f1f2f4;
    --panel-background: #fff;
    --font-color: #151717;
    --font-color-sub: #64686a;
    --field-background: #fff;
    --control-background: #fff;
    --control-hover: #f7f8f8;
    --main-color: #ecedec;
    --input-focus: #2d79f3;
    --danger-color: #b42318;
    --panel-radius: 20px;
    --panel-shadow: 0 18px 45px rgb(21 23 23 / 10%);
    --field-radius: 10px;
    --field-shadow: none;
    --control-radius: 10px;
    --control-shadow: none;
    --primary-background: #151717;
    --primary-hover: #292c2c;
    --primary-color: #fff;
    --image-blend-mode: multiply;
}

html[data-skin="mono"][data-mode="dark"] {
    --page-color: #0f1113;
    --panel-background: #181a1d;
    --font-color: #f7f7f7;
    --font-color-sub: #a6a8aa;
    --field-background: #111315;
    --control-background: #202327;
    --control-hover: #2a2e33;
    --main-color: #34373b;
    --input-focus: #5b93f7;
    --danger-color: #ff8a80;
    --panel-radius: 20px;
    --panel-shadow: 0 20px 50px rgb(0 0 0 / 35%);
    --field-radius: 10px;
    --field-shadow: none;
    --control-radius: 10px;
    --control-shadow: none;
    --primary-background: #f4f4f5;
    --primary-hover: #fff;
    --primary-color: #151717;
    --image-blend-mode: normal;
}

html[data-skin="violet"][data-mode="light"] {
    --page-color: #f3f0ff;
    --panel-background: #fff;
    --font-color: #111827;
    --font-color-sub: #6b7280;
    --field-background: #faf9ff;
    --control-background: #f5f3ff;
    --control-hover: #ede9fe;
    --main-color: #ddd6fe;
    --input-focus: #8b5cf6;
    --danger-color: #b42318;
    --panel-radius: 12px;
    --panel-shadow: 0 22px 50px rgb(76 29 149 / 12%);
    --field-radius: 6px;
    --field-shadow: none;
    --control-radius: 6px;
    --control-shadow: 0 8px 18px rgb(76 29 149 / 10%);
    --primary-background: #8b5cf6;
    --primary-hover: #7c3aed;
    --primary-color: #fff;
    --image-blend-mode: multiply;
}

html[data-skin="violet"][data-mode="dark"] {
    --page-color: #090e1a;
    --panel-background: #111827;
    --font-color: #f3f4f6;
    --font-color-sub: #9ca3af;
    --field-background: #111827;
    --control-background: #1f2937;
    --control-hover: #283548;
    --main-color: #374151;
    --input-focus: #a78bfa;
    --danger-color: #ff8a80;
    --panel-radius: 12px;
    --panel-shadow: 0 24px 60px rgb(0 0 0 / 38%);
    --field-radius: 6px;
    --field-shadow: none;
    --control-radius: 6px;
    --control-shadow: 0 10px 24px rgb(0 0 0 / 25%);
    --primary-background: #a78bfa;
    --primary-hover: #b9a2fb;
    --primary-color: #111827;
    --image-blend-mode: normal;
}