/* Define your purple shades */
:root {
    --purple-base: #8a2be2; /* Blue Violet - a good general purple */
    --purple-darker: #6a1aae; /* A darker shade for hover/active */
    --purple-darkest: #4a0c7a; /* Even darker for active/focus */
    --purple-focus-rgb: 138, 43, 226; /* RGB for the focus shadow */
}
.btn,
{
    background-color: var(--purple-base);
    border-color: var(--purple-base);
    color: #ffffff; /* White text for contrast */
!important
}

.btn-primary {
    background-color: var(--purple-base);
    border-color: var(--purple-base);
    color: #ffffff; /* White text for contrast */
    !important
}
.btn:hover,
.btn-primary:hover {
    background-color: var(--purple-darker);
    border-color: var(--purple-darker);
    color:white;
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--purple-darkest);
    border-color: var(--purple-darkest);
}

.btn-primary:focus {
    background-color: var(--purple-darker); /* Use hover color for consistency */
    border-color: var(--purple-darker);
    box-shadow: 0 0 0 0.25rem rgba(var(--purple-focus-rgb), 0.5); /* Custom focus outline */
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--purple-base); /* Keep base color for disabled */
    border-color: var(--purple-base);
    opacity: 0.65; /* Standard disabled opacity */
}