:root{

    --bg1:#ffffff;
    --bg2:#F5F6F8;

    --backdrop: rgba(15, 23, 42, 0.45);

    --white1: #fefefe;

    --black1: #121212;

    --border1:#D0D4D6;

    --gray1:#878F91;

    --gr1: linear-gradient(0deg, #121212 0%, #4D4D4D 100%);
    --gt2: linear-gradient(0deg, #ffffff 0%, #F5F5F5 100%);

    --red1:#F64444;
}

.black1{
    color: var(--black1);
}

.gray1{
    color: var(--gray1);
}

.white-bg{
    background-color: var(--white1) !important;
}

.muted{
    color: var(--gray1);
}

.bb{
    border-bottom: 0.5px solid var(--border1);
}

.red1{ color: var(--red1);}

:root[data-theme="dark"] {
    --bg1:#111317;
    --bg2:#0b0d10;
    --backdrop: rgba(0, 0, 0, 0.6);
    --white1: #111317;
    --black1: #f3f4f6;
    --border1:#2a2f36;
    --gray1:#9ca3af;
    --gr1: linear-gradient(0deg, #0f172a 0%, #1f2937 100%);
    --gt2: linear-gradient(0deg, #111317 0%, #0b0d10 100%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg1:#111317;
        --bg2:#0b0d10;
        --backdrop: rgba(0, 0, 0, 0.6);
        --white1: #111317;
        --black1: #f3f4f6;
        --border1:#2a2f36;
        --gray1:#9ca3af;
        --gr1: linear-gradient(0deg, #0f172a 0%, #1f2937 100%);
        --gt2: linear-gradient(0deg, #111317 0%, #0b0d10 100%);
    }
}