:root,
[data-bs-theme=light] {
    --bs-primary: #a855f7;
    --bs-primary-rgb: 168, 85, 247;
    --bs-primary-text-emphasis: #8a3fd0;
    --bs-primary-bg-subtle: #f3e8ff;
    --bs-primary-border-subtle: #d8b4fe;
    
    --my-gradient-from-position: ;
    --my-gradient-via-position: ;
    --my-gradient-to-position: ;
    --my-gradient-from: #2563eb var(--my-gradient-from-position);
    --my-gradient-stops: var(--my-gradient-from), var(--my-gradient-to);
    --my-gradient-to: #9333ea var(--my-gradient-to-position);
}

[data-bs-theme=dark] {

    --bs-body-bg: #09090b;
    --bs-body-color: #fff;


    --bs-primary: #a855f7;
    --bs-primary-rgb: 168, 85, 247;
    --bs-primary-text-emphasis: #8a3fd0;
    --bs-primary-bg-subtle: #f3e8ff;
    --bs-primary-border-subtle: #d8b4fe;
}


.heading-gradient {
    background-image: linear-gradient(to bottom right, var(--my-gradient-stops));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--my-gradient-stops));
}

.bg-gradient-to-bl {
    background-image: linear-gradient(to bottom left, var(--my-gradient-stops));
}

.bg-gradient-to-tr {
    background-image: linear-gradient(to top right, var(--my-gradient-stops));
}

.bg-gradient-to-tl {
    background-image: linear-gradient(to top left, var(--my-gradient-stops));
}