/* Brand button theme: unify action buttons to brand yellow (loaded after Bootstrap). */
:root {
    --brand-yellow: #ffd60a;
    --brand-yellow-hover: #e9c308;
    --brand-yellow-active: #d4b107;
    --brand-on-yellow: #111111;
}

/* Solid action buttons -> yellow with dark text */
.btn-primary,
.btn-info,
.btn-success,
.btn-warning {
    --bs-btn-bg: var(--brand-yellow);
    --bs-btn-border-color: var(--brand-yellow);
    --bs-btn-color: var(--brand-on-yellow);
    --bs-btn-hover-bg: var(--brand-yellow-hover);
    --bs-btn-hover-border-color: var(--brand-yellow-hover);
    --bs-btn-hover-color: var(--brand-on-yellow);
    --bs-btn-active-bg: var(--brand-yellow-active);
    --bs-btn-active-border-color: var(--brand-yellow-active);
    --bs-btn-active-color: var(--brand-on-yellow);
    --bs-btn-disabled-bg: var(--brand-yellow);
    --bs-btn-disabled-border-color: var(--brand-yellow);
    --bs-btn-disabled-color: var(--brand-on-yellow);
    --bs-btn-focus-shadow-rgb: 255, 214, 10;
}

/* Outline action buttons -> yellow outline, fill yellow on hover */
.btn-outline-primary,
.btn-outline-info,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-light {
    --bs-btn-color: var(--brand-yellow);
    --bs-btn-border-color: var(--brand-yellow);
    --bs-btn-hover-bg: var(--brand-yellow);
    --bs-btn-hover-border-color: var(--brand-yellow);
    --bs-btn-hover-color: var(--brand-on-yellow);
    --bs-btn-active-bg: var(--brand-yellow-active);
    --bs-btn-active-border-color: var(--brand-yellow-active);
    --bs-btn-active-color: var(--brand-on-yellow);
    --bs-btn-focus-shadow-rgb: 255, 214, 10;
}

/* Rounded pill look like the brand Sign Up button */
.btn-primary, .btn-info, .btn-success, .btn-warning,
.btn-outline-primary, .btn-outline-info, .btn-outline-success,
.btn-outline-warning, .btn-outline-light {
    border-radius: 10px;
    font-weight: 600;
}