:root {
    /* Blue button variables */
    --btn-blue-bg: #0d6efd;
    --btn-blue-border: #0d6efd;
    --btn-blue-color: #fff;
    --btn-blue-hover-bg: #0b5ed7;
    --btn-blue-hover-border: #0a58ca;
    --btn-blue-active-bg: #0a58ca;
    --btn-blue-active-border: #0a53be;
    --btn-blue-disabled-bg: #0d6efd;
    --btn-blue-disabled-border: #0d6efd;

    /* Yellow button variables */
    --btn-yellow-bg: #ffc107;
    --btn-yellow-border: #ffc107;
    --btn-yellow-color: #000;
    --btn-yellow-hover-bg: #ffca2c;
    --btn-yellow-hover-border: #ffc720;
    --btn-yellow-active-bg: #ffcd39;
    --btn-yellow-active-border: #c99700;
    --btn-yellow-disabled-bg: #ffc107;
    --btn-yellow-disabled-border: #ffc107;
}

.btn-blue {
    color: var(--btn-blue-color);
    background-color: var(--btn-blue-bg);
    border-color: var(--btn-blue-border);
}

.btn-blue:hover {
    color: var(--btn-blue-color);
    background-color: var(--btn-blue-hover-bg);
    border-color: var(--btn-blue-hover-border);
}

.btn-blue:active {
    color: var(--btn-blue-color);
    background-color: var(--btn-blue-active-bg);
    border-color: var(--btn-blue-active-border);
}

.btn-blue:disabled {
    color: var(--btn-blue-color);
    background-color: var(--btn-blue-disabled-bg);
    border-color: var(--btn-blue-disabled-border);
    opacity: 0.65;
}

.btn-yellow {
    color: var(--btn-yellow-color);
    background-color: var(--btn-yellow-bg);
    border-color: var(--btn-yellow-border);
}

.btn-yellow:hover {
    color: var(--btn-yellow-color);
    background-color: var(--btn-yellow-hover-bg);
    border-color: var(--btn-yellow-hover-border);
}

.btn-yellow:active {
    color: var(--btn-yellow-color);
    background-color: var(--btn-yellow-active-bg);
    border-color: var(--btn-yellow-active-border);
}

.btn-yellow:disabled {
    color: var(--btn-yellow-color);
    background-color: var(--btn-yellow-disabled-bg);
    border-color: var(--btn-yellow-disabled-border);
    opacity: 0.65;
}