:root {
    /* Define your custom color variable */
    --tblr-brand: #1E406E;
    --tblr-brand-rgb: 30, 64, 110; 
}

/* 1. Custom Background Utility */
.bg-brand {
    background-color: var(--tblr-brand) !important;
    color: #ffffff;
}

/* 2. Custom Text Utility */
.text-brand {
    color: var(--tblr-brand) !important;
}

/* 3. Custom Button Class (.btn-brand) */
.btn-brand {
    background-color: var(--tblr-brand);
    border-color: var(--tblr-brand);
    color: #ffffff;
}

.btn-brand:hover {
    background-color: #163052; /* Slightly darker shade for hover */
    border-color: #142a48;
    color: #ffffff;
}

.btn-brand:focus, 
.btn-brand.focus {
    box-shadow: 0 0 0 0.25rem rgba(30, 64, 110, 0.5); /* Focus ring using RGB values */
}

.btn-brand:active, 
.btn-brand.active {
    background-color: #142a48;
    border-color: #122540;
}

.btn-brand:disabled, 
.btn-brand.disabled {
    background-color: var(--tblr-brand);
    border-color: var(--tblr-brand);
    opacity: 0.65;
}

/* 4. Outline Variant (.btn-outline-brand) */
.btn-outline-brand {
    color: var(--tblr-brand);
    border-color: var(--tblr-brand);
    background-color: transparent;
}

.btn-outline-brand:hover {
    color: #fff;
    background-color: var(--tblr-brand);
    border-color: var(--tblr-brand);
}