/* Base custom colors (RGB only, no alpha here) */
:root {
    --alert-rgb: 255, 0, 0;
    --hint-rgb: 255, 255, 0;
    --note-rgb: 80, 192, 80;
    --tip-rgb: 127, 0, 255;
    --title-rgb: 0, 0, 255;
    --gray-rgb: 127, 127, 127;
}

/* ---------- ALERT (Red) ---------- */

.text-alert {
    color: rgb(var(--alert-rgb)) !important;
}

.bg-alert {
    background-color: rgba(var(--alert-rgb), 0.12) !important; /* softer than 0.5 */
}

.border-alert {
    border-color: rgb(var(--alert-rgb)) !important;
}

.badge-alert {
    background-color: rgb(var(--alert-rgb)) !important;
    color: #fff !important;
}


.badge-gray {
    background-color: rgb(var(--gray-rgb)) !important;
    color: #fff !important;
}

/* Filled button */
.btn-alert {
    color: #fff !important;
    background-color: rgb(var(--alert-rgb)) !important;
    border-color: rgb(var(--alert-rgb)) !important;
    font-weight: 600;
}

/* Outline button */
.btn-outline-alert {
    color: rgb(var(--alert-rgb)) !important;
    border-color: rgb(var(--alert-rgb)) !important;
    background-color: transparent !important;
    font-weight: 600;
}

.btn-outline-alert:hover,
.btn-outline-alert:focus {
    color: #fff !important;
    background-color: rgb(var(--alert-rgb)) !important;
    border-color: rgb(var(--alert-rgb)) !important;
}


/* ---------- HINT (Yellow) ---------- */

.text-hint {
    color: rgb(var(--hint-rgb)) !important;
}

.bg-hint {
    background-color: rgba(var(--hint-rgb), 0.12) !important;
}

.border-hint {
    border-color: rgb(var(--hint-rgb)) !important;
}

.badge-hint {
    background-color: rgb(var(--hint-rgb)) !important;
    color: #000 !important;
}

.btn-hint {
    color: #000 !important;
    background-color: rgb(var(--hint-rgb)) !important;
    border-color: rgb(var(--hint-rgb)) !important;
    font-weight: 600;
}

.btn-outline-hint {
    color: rgb(var(--hint-rgb)) !important;
    border-color: rgb(var(--hint-rgb)) !important;
    background-color: transparent !important;
    font-weight: 600;
}

.btn-outline-hint:hover,
.btn-outline-hint:focus {
    color: #000 !important;
    background-color: rgb(var(--hint-rgb)) !important;
    border-color: rgb(var(--hint-rgb)) !important;
}


/* ---------- NOTE (Green) ---------- */

.text-note {
    color: rgb(var(--note-rgb)) !important;
}

.bg-note {
    background-color: rgba(var(--note-rgb), 0.12) !important;
}

.border-note {
    border-color: rgb(var(--note-rgb)) !important;
}

.badge-note {
    background-color: rgb(var(--note-rgb)) !important;
    color: #000 !important;
}

.btn-note {
    color: #000 !important;
    background-color: rgb(var(--note-rgb)) !important;
    border-color: rgb(var(--note-rgb)) !important;
    font-weight: 600;
}

.btn-outline-note {
    color: rgb(var(--note-rgb)) !important;
    border-color: rgb(var(--note-rgb)) !important;
    background-color: transparent !important;
    font-weight: 600;
}

.btn-outline-note:hover,
.btn-outline-note:focus {
    color: #000 !important;
    background-color: rgb(var(--note-rgb)) !important;
    border-color: rgb(var(--note-rgb)) !important;
}


/* ---------- TIP (Purple) ---------- */

.text-tip {
    color: rgb(var(--tip-rgb)) !important;
}

.bg-tip {
    background-color: rgba(var(--tip-rgb), 0.12) !important;
}

.border-tip {
    border-color: rgb(var(--tip-rgb)) !important;
}

.badge-tip {
    background-color: rgb(var(--tip-rgb)) !important;
    color: #fff !important;
}

.btn-tip {
    color: #fff !important;
    background-color: rgb(var(--tip-rgb)) !important;
    border-color: rgb(var(--tip-rgb)) !important;
    font-weight: 600;
}

.btn-outline-tip {
    color: rgb(var(--tip-rgb)) !important;
    border-color: rgb(var(--tip-rgb)) !important;
    background-color: transparent !important;
    font-weight: 600;
}

.btn-outline-tip:hover,
.btn-outline-tip:focus {
    color: #fff !important;
    background-color: rgb(var(--tip-rgb)) !important;
    border-color: rgb(var(--tip-rgb)) !important;
}

/* ---------- TITLE ---------- */

.text-title {
    color: rgb(var(--title-rgb)) !important;
}

.bg-title {
    background-color: rgba(var(--title-rgb), 0.12) !important;
}

.border-title {
    border-color: rgb(var(--title-rgb)) !important;
}

.badge-title {
    background-color: rgb(var(--title-rgb)) !important;
    color: #fff !important;
}


.btn-title {
    color: #fff !important;
    background-color: rgb(var(--title-rgb)) !important;
    border-color: rgb(var(--title-rgb)) !important;
    font-weight: 600;
}

.btn-outline-title {
    color: rgb(var(--title-rgb)) !important;
    border-color: rgb(var(--title-rgb)) !important;
    background-color: transparent !important;
    font-weight: 600;
}

    .btn-outline-title:hover,
    .btn-outline-title:focus {
        color: #fff !important;
        background-color: rgb(var(--title-rgb)) !important;
        border-color: rgb(var(--title-rgb)) !important;
    }

/* ---------- GRAY ---------- */

.text-gray {
    color: rgb(var(--gray-rgb)) !important;
}

.bg-gray {
    background-color: rgba(var(--gray-rgb), 0.12) !important;
}

.border-gray {
    border-color: rgb(var(--gray-rgb)) !important;
}

.badge-gray {
    background-color: rgb(var(--gray-rgb)) !important;
    color: #fff !important;
}


.btn-gray {
    color: #fff !important;
    background-color: rgb(var(--gray-rgb)) !important;
    border-color: rgb(var(--gray-rgb)) !important;
    font-weight: 600;
}

.btn-outline-gray {
    color: rgb(var(--gray-rgb)) !important;
    border-color: rgb(var(--gray-rgb)) !important;
    background-color: transparent !important;
    font-weight: 600;
}

    .btn-outline-gray:hover,
    .btn-outline-gray:focus {
        color: #fff !important;
        background-color: rgb(var(--gray-rgb)) !important;
        border-color: rgb(var(--gray-rgb)) !important;
    }

/* ALERTS */

.alert-alert {
    border-left: 4px solid rgb(var(--alert-rgb));
    background-color: rgba(var(--alert-rgb), 0.06);
    color: rgb(var(--alert-rgb));
}

.alert-hint {
    border-left: 4px solid rgb(var(--hint-rgb));
    background-color: rgba(var(--hint-rgb), 0.06);
    color: #856404; /* darker text for readability */
}

.alert-note {
    border-left: 4px solid rgb(var(--note-rgb));
    background-color: rgba(var(--note-rgb), 0.06);
    color: #155724;
}

.alert-tip {
    border-left: 4px solid rgb(var(--tip-rgb));
    background-color: rgba(var(--tip-rgb), 0.06);
    color: #3b0a76;
}

.alert-title {
    border-left: 4px solid rgb(var(--title-rgb));
    background-color: rgba(var(--title-rgb), 0.06);
    color: #3b0a76;
}

.alert-gray {
    border-left: 4px solid rgb(var(--gray-rgb));
    background-color: rgba(var(--gray-rgb), 0.06);
    color: #3b0a76;
}