:root.dark {
    --rt-color-white: #e6e7eb !important;
    --rt-color-dark: #2a2c32 !important;
}

[data-theme-dark=cinder] {
    /* --color-dark-50: #e6e7eb; // cinder dark color theme
    --color-dark-100: #d0d2db;
    --color-dark-200: #b7bac4;
    --color-dark-300: #838794;
    --color-dark-400: #4c4f57;
    --color-dark-450: #383a41;
    --color-dark-500: #2a2c32;
    --color-dark-600: #232429;
    --color-dark-700: #1c1d21;
    --color-dark-750: #1a1b1f;
    --color-dark-800: #15161a;
    --color-dark-900: #0e0f11; */

    /* --color-dark-50: #e1e5ea; // mint dark color theme
    --color-dark-100: #c5ccd3;
    --color-dark-200: #a0abb6;
    --color-dark-300: #70838f;
    --color-dark-400: #506877;
    --color-dark-450: #384954;
    --color-dark-500: #2a3942;
    --color-dark-600: #242f38;
    --color-dark-700: #152129;
    --color-dark-750: #111b22;
    --color-dark-800: #0d161c;
    --color-dark-900: #0a1014; */

    /* mirage dark color theme */
    --color-dark-50: #dde5f5; 
    --color-dark-100: #b4bfd9;
    --color-dark-200: #9eaac4;
    --color-dark-300: #6c7c9e;
    --color-dark-400: #3d4e70;
    --color-dark-450: #293859;
    --color-dark-500: #1e2b47;
    --color-dark-600: #1a2640;
    --color-dark-700: #101a2e;
    --color-dark-750: #0f1729;
    --color-dark-800: #0c1221;
    --color-dark-900: #050a16;

    --color-surface-1: #1e2b47;
    --color-surface-2: #1a2640;
    --color-surface-3: #101a2e;

    /* --color-dark-50: #ebebed;  // Black dark color theme
    --color-dark-100: #d9d9de;
    --color-dark-200: #c5c5cc;
    --color-dark-300: #93939c;
    --color-dark-400: #4a4a4f;
    --color-dark-450: #333338;
    --color-dark-500: #242428;
    --color-dark-600: #1f1f21;
    --color-dark-700: #131314;
    --color-dark-750: #0c0c0d;
    --color-dark-800: #080809;
    --color-dark-900: #000; */

    /* --color-surface-1: #2a2c32;
    --color-surface-2: #232429;
    --color-surface-3: #1c1d21; */
}

body:is(.dark *) {
    background-color: var(--color-dark-900);
    color: var(--color-dark-200);
    color-scheme: dark;
}

/* [data-card-skin=bordered] body:is(.dark *), .dark[data-card-skin=bordered] body {
    background-color: #0e0f11;
} */

.dark\:border-dark-50:is(.dark *) {
    border-color: var(--color-dark-50);
}

.dark\:border-dark-100:is(.dark *) {
    border-color: var(--color-dark-100);
}

.dark\:border-dark-200:is(.dark *) {
    border-color: var(--color-dark-200);
}

.dark\:border-dark-300:is(.dark *) {
    border-color: var(--color-dark-300);
}

.dark\:border-dark-400:is(.dark *) {
    border-color: var(--color-dark-400);
}

.dark\:border-dark-500:is(.dark *) {
    border-color: var(--color-dark-500);
}

.dark\:border-dark-600:is(.dark *) {
    border-color: var(--color-dark-600);
}

.dark\:border-dark-600\/80:is(.dark *) {
    border-color: #232429cc;
}

.dark\:border-dark-700:is(.dark *) {
    border-color: var(--color-dark-700);
}

.dark\:border-dark-800:is(.dark *) {
    border-color: var(--color-dark-800);
}

.dark\:border-dark-900:is(.dark *) {
    border-color: var(--color-dark-900);
}

.dark\:text-dark-50:is(.dark *) {
    color: var(--color-dark-50) !important;
}

.dark\:text-dark-100:is(.dark *) {
    color: var(--color-dark-100) !important;
}

.dark\:text-dark-200:is(.dark *) {
    color: var(--color-dark-200) !important;
}

.dark\:text-dark-300:is(.dark *) {
    color: var(--color-dark-300) !important;
}

.dark\:text-dark-400:is(.dark *) {
    color: var(--color-dark-400) !important;
}

.dark\:text-dark-500:is(.dark *) {
    color: var(--color-dark-500) !important;
}

.dark\:text-dark-600:is(.dark *) {
    color: var(--color-dark-600) !important;
}

.dark\:text-dark-700:is(.dark *) {
    color: var(--color-dark-700) !important;
}

.dark\:text-dark-800:is(.dark *) {
    color: var(--color-dark-800) !important;
}

.dark\:text-dark-900:is(.dark *) {
    color: var(--color-dark-900) !important;
}

.dark\:text-dark-950:is(.dark *) {
    color: var(--color-dark-950) !important;
}

.dark\:bg-dark-50:is(.dark *) {
    background-color: var(--color-dark-50);
}

.dark\:bg-dark-100:is(.dark *) {
    background-color: var(--color-dark-100);
}

.dark\:bg-dark-200:is(.dark *) {
    background-color: var(--color-dark-200);
}

.dark\:bg-dark-300:is(.dark *) {
    background-color: var(--color-dark-300);
}

.dark\:bg-dark-400:is(.dark *) {
    background-color: var(--color-dark-400);
}

.dark\:bg-dark-500:is(.dark *) {
    background-color: var(--color-dark-500);
}

.dark\:bg-dark-600:is(.dark *) {
    background-color: var(--color-dark-600);
}

.dark\:bg-dark-700:is(.dark *) {
    background-color: var(--color-dark-700);
}

.dark\:bg-dark-800:is(.dark *) {
    background-color: var(--color-dark-800);
}

.dark\:bg-dark-900:is(.dark *) {
    background-color: var(--color-dark-900);
}

.dark\:bg-dark-900\/80:is(.dark *) {
    background-color: #0e0f11cc;
}

.dark\:hover\:text-dark-50:is(.dark *):hover {
    color: var(--color-dark-50);
}

.dark\:hover\:text-dark-100:is(.dark *):hover {
    color: var(--color-dark-100);
}

.dark\:hover\:text-dark-200:is(.dark *):hover {
    color: var(--color-dark-200);
}

.dark\:hover\:text-dark-300:is(.dark *):hover {
    color: var(--color-dark-300);
}

.dark\:hover\:text-dark-400:is(.dark *):hover {
    color: var(--color-dark-400);
}

.dark\:hover\:text-dark-500:is(.dark *):hover {
    color: var(--color-dark-500);
}

.dark\:hover\:text-dark-600:is(.dark *):hover {
    color: var(--color-dark-600);
}

.dark\:hover\:text-dark-700:is(.dark *):hover {
    color: var(--color-dark-700);
}

.dark\:hover\:text-dark-800:is(.dark *):hover {
    color: var(--color-dark-800);
}

.dark\:hover\:text-dark-900:is(.dark *):hover {
    color: var(--color-dark-900);
}

.dark\:focus\:text-dark-50:is(.dark *):focus {
    color: var(--color-dark-50);
}

.dark\:focus\:text-dark-100:is(.dark *):focus {
    color: var(--color-dark-100);
}

.dark\:focus\:text-dark-200:is(.dark *):focus {
    color: var(--color-dark-200);
}

.dark\:focus\:text-dark-300:is(.dark *):focus {
    color: var(--color-dark-300);
}

.dark\:focus\:text-dark-400:is(.dark *):focus {
    color: var(--color-dark-400);
}

.dark\:focus\:text-dark-500:is(.dark *):focus {
    color: var(--color-dark-500);
}

.dark\:focus\:text-dark-600:is(.dark *):focus {
    color: var(--color-dark-600);
}

.dark\:focus\:text-dark-700:is(.dark *):focus {
    color: var(--color-dark-700);
}

.dark\:focus\:text-dark-800:is(.dark *):focus {
    color: var(--color-dark-800);
}

.dark\:focus\:text-dark-900:is(.dark *):focus {
    color: var(--color-dark-900);
}

.dark\:focus\:bg-gray-50:focus:is(.dark *) {
    background-color: var(--color-dark-50);
}

.dark\:focus\:bg-gray-100:focus:is(.dark *) {
    background-color: var(--color-dark-100);
}

.dark\:focus\:bg-gray-200:focus:is(.dark *) {
    background-color: var(--color-dark-200);
}

.dark\:focus\:bg-gray-300:focus:is(.dark *) {
    background-color: var(--color-dark-300);
}

.dark\:focus\:bg-gray-400:focus:is(.dark *) {
    background-color: var(--color-dark-400);
}

.dark\:focus\:bg-gray-500:focus:is(.dark *) {
    background-color: var(--color-dark-500);
}

.dark\:focus\:bg-gray-600:focus:is(.dark *) {
    background-color: var(--color-dark-600);
}

.dark\:focus\:bg-gray-700:focus:is(.dark *) {
    background-color: var(--color-dark-700);
}

.dark\:focus\:bg-gray-800:focus:is(.dark *) {
    background-color: var(--color-dark-800);
}

.dark\:focus\:bg-gray-900:focus:is(.dark *) {
    background-color: var(--color-dark-900);
}

.dark\:hover\:bg-dark-100:is(.dark *):hover {
    background-color: var(--color-dark-100);
}

.dark\:hover\:bg-dark-200:is(.dark *):hover {
    background-color: var(--color-dark-200);
}

.dark\:hover\:bg-dark-300:is(.dark *):hover {
    background-color: var(--color-dark-300);
}

.dark\:hover\:bg-dark-400:is(.dark *):hover {
    background-color: var(--color-dark-400);
}

.dark\:hover\:bg-dark-500:is(.dark *):hover {
    background-color: var(--color-dark-500);
}

.dark\:hover\:bg-dark-600:is(.dark *):hover {
    background-color: var(--color-dark-600);
}

.dark\:hover\:bg-dark-700:is(.dark *):hover {
    background-color: var(--color-dark-700);
}

.dark\:hover\:bg-dark-800:is(.dark *):hover {
    background-color: var(--color-dark-800);
}

.dark\:hover\:bg-dark-900:is(.dark *):hover {
    background-color: var(--color-dark-900);
}

.dark\:bg-surface-2:is(.dark *), .dark\:bg-surface-2\/30:is(.dark *) {
    background-color: var(--color-surface-2);
}

.dark\:peer-focus\:text-primary-500:is(.dark *):is(:where(.peer):focus~*) {
    color: var(--color-primary-500);
}

:is(.form-input,.form-textarea):is(.dark *) {
    color: var(--color-dark-100);
}

.dark\:border-b-dark-50:is(.dark *) {
    border-bottom-color: var(--color-dark-50);
}

.dark\:border-b-dark-100:is(.dark *) {
    border-bottom-color: var(--color-dark-100);
}

.dark\:border-b-dark-200:is(.dark *) {
    border-bottom-color: var(--color-dark-200);
}

.dark\:border-b-dark-300:is(.dark *) {
    border-bottom-color: var(--color-dark-300);
}

.dark\:border-b-dark-400:is(.dark *) {
    border-bottom-color: var(--color-dark-400);
}

.dark\:border-b-dark-500:is(.dark *) {
    border-bottom-color: var(--color-dark-500);
}

.dark\:border-b-dark-600:is(.dark *) {
    border-bottom-color: var(--color-dark-600);
}

.dark\:border-b-dark-700:is(.dark *) {
    border-bottom-color: var(--color-dark-700);
}

.dark\:border-b-dark-800:is(.dark *) {
    border-bottom-color: var(--color-dark-800);
}

.dark\:border-b-dark-900:is(.dark *) {
    border-bottom-color: var(--color-dark-900);
}

.dark\:border-b-dark-950:is(.dark *) {
    border-bottom-color: var(--color-dark-950);
}

.dark\:hover\:border-dark-50:is(.dark *):hover {
    border-color: var(--color-dark-50);
}

.dark\:hover\:border-dark-100:is(.dark *):hover {
    border-color: var(--color-dark-100);
}

.dark\:hover\:border-dark-200:is(.dark *):hover {
    border-color: var(--color-dark-200);
}

.dark\:hover\:border-dark-300:is(.dark *):hover {
    border-color: var(--color-dark-300);
}

.dark\:hover\:border-dark-400:is(.dark *):hover {
    border-color: var(--color-dark-400);
}

.dark\:hover\:border-dark-500:is(.dark *):hover {
    border-color: var(--color-dark-500);
}

.dark\:hover\:border-dark-600:is(.dark *):hover {
    border-color: var(--color-dark-600);
}

.dark\:hover\:border-dark-700:is(.dark *):hover {
    border-color: var(--color-dark-700);
}

.dark\:hover\:border-dark-800:is(.dark *):hover {
    border-color: var(--color-dark-800);
}

.dark\:hover\:border-dark-900:is(.dark *):hover {
    border-color: var(--color-dark-900);
}


@media (hover: hover) {
    @supports (color:color-mix(in lab,red,red)) {
        .dark\:hover\:bg-dark-300\/10:is(.dark *):hover {
            background-color: color-mix(in oklab, var(--color-dark-300) 10%, transparent);
        }
        .dark\:hover\:bg-dark-400\/10:is(.dark *):hover {
            background-color: color-mix(in oklab, var(--color-dark-400) 10%, transparent);
        }
        .dark\:hover\:bg-dark-500\/10:is(.dark *):hover {
            background-color: color-mix(in oklab, var(--color-dark-500) 10%, transparent);
        } 
        .dark\:focus\:bg-dark-300\/10:is(.dark *):focus {
            background-color: color-mix(in oklab, var(--color-dark-300) 10%, transparent);
        }
        .dark\:focus\:bg-dark-400\/10:is(.dark *):focus {
            background-color: color-mix(in oklab, var(--color-dark-400) 10%, transparent);
        }
        .dark\:focus\:bg-dark-500\/10:is(.dark *):focus {
            background-color: color-mix(in oklab, var(--color-dark-500) 10%, transparent);
        } 
    }
}

.dark .input-root .ts-wrapper .ts-control:is(.dark *) {
    background-color: var(--color-dark-900);
}

.dark .input-root .ts-wrapper .ts-control:is(.dark *) {
    border-color: var(--color-dark-500) !important;
}

.dark .input-root .ts-wrapper .ts-control:hover:is(.dark *) {
    border-color: var(--color-dark-400) !important;
}

.dark .input-root .ts-wrapper .ts-dropdown:is(.dark *) {
    background-color: var(--color-dark-900);
    border-color: var(--color-dark-500) !important;
    color: var(--color-dark-100);
}

.dark .input-root .ts-wrapper .ts-dropdown .active:is(.dark *) {
    background-color: var(--color-dark-700);
    color: var(--color-dark-100);
}

.dark .ts-wrapper.multi .ts-control > div:is(.dark *) {
    background-color: var(--color-dark-700);
    color: var(--color-dark-100);
}

.dark input::placeholder { 
    color: var(--color-dark-100); 
} 

.dark\:bg-dark-300\/10:is(.dark *) {
    background-color: color-mix(in oklab, var(--color-dark-300) 10%, transparent);
} 

.dark\:hidden:is(.dark *) {
    display: none;
}

.dark\:inline-block:is(.dark *) {
    display: inline-block;
}