:root{
    --vs-primary: 255, 196, 87;
    --vs-success: 95 , 185, 178;
    --vs-text: 67,67,67;
    --vs-warning: 252, 232, 209;
    --vs-dark: 244, 243, 242;
    --text: rgb(4, 3, 22);
    --text-disable: rgba(4, 3, 22,0.5);
    --background: rgb(var(--vs-dark));
    --dark : rgb(231,231,230);
    --primary: rgb(var(--vs-primary));
    --danger: rgb(var(--vs-danger));
}
@media (prefers-color-scheme: dark) {
     :root {
         --vs-primary: 252, 209, 149;
         --vs-danger: 228,121,121;
         --vs-dark: 44,44,40;
         --vs-success: 95,185,178;
         --vs-warning: 61, 60, 53;
        --text: rgb(243, 243, 242);
        --text-disable : rgb(190, 190, 188);
        --background: rgb(var(--vs-dark));
        --primary: rgb(var(--vs-primary));
        --dark: rgb(23,21,17);
        --danger: rgb(var(--vs-danger));
        --success: rgb(var(--vs-success));
    }
 }

body {
    color: var(--text);
    background: var(--background);
}


/* for svg icons */
svg {
    fill: var(--primary) !important;
}


.vs-button-filled .vs-button-text {
    color: rgb(var(--vs-text));
}
.vs-button--icon {
    color: rgb(var(--vs-text));
}

@media (prefers-color-scheme: dark) {
    .vs-button-filled .vs-button-text {
        color: var(--background) !important;
    }
    .vs-button--icon {
        color: var(--background) !important;
    }
}

/* skeleton loading color change */
.skeleton-loading {
    background-color: rgba(var(--vs-dark,0.1)) !important;
}

/* selection color */