/**
 * IndexLobby + Bootstrap 5.3 theme overrides.
 * Scheme bridge (--bs-*) lives in tokens.css; this file only overrides
 * component tokens Bootstrap derives from the scheme.
 */

.btn-primary {
    --bs-btn-color: var(--on-primary);
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-deep);
    --bs-btn-active-border-color: var(--primary-deep);
    --bs-btn-disabled-color: var(--on-primary);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--link-color);
    --bs-btn-border-color: var(--orange-border);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-deep);
    --bs-btn-active-border-color: var(--primary-deep);
}

.btn-secondary {
    --bs-btn-color: var(--on-surface);
    --bs-btn-bg: var(--surface-high);
    --bs-btn-border-color: var(--outline);
    --bs-btn-hover-color: var(--on-surface);
    --bs-btn-hover-bg: var(--surface-highest);
    --bs-btn-hover-border-color: var(--outline);
    --bs-btn-active-color: var(--on-surface);
    --bs-btn-active-bg: var(--surface-highest);
    --bs-btn-active-border-color: var(--outline);
    --bs-btn-disabled-color: var(--on-surface-variant);
    --bs-btn-disabled-bg: var(--surface-low);
    --bs-btn-disabled-border-color: var(--outline-variant);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 22%, transparent);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-control,
.form-select {
    background-color: var(--input-bg);
    border-color: var(--outline-variant);
    color: var(--on-surface);
}

.form-control::placeholder {
    color: var(--on-surface-variant);
}

.modal-content {
    background-color: var(--panel);
    border: 1px solid var(--panel-border);
    color: var(--on-surface);
}

.modal-header,
.modal-footer {
    border-color: var(--panel-border);
}

.modal-backdrop {
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.65;
}