/**
 * BPB Studio brand palette and Bootstrap 5 semantic mapping.
 *
 * This file establishes shared color tokens and component variants. Page-specific
 * layout and visual styling remain in app.css until the application theme is
 * migrated to these tokens.
 */

:root {
    /* Brand palette */
    --bpb-white: #ffffff;
    --bpb-gray-100: #e8e8e8;
    --bpb-gray-600: #6b6b6b;
    --bpb-charcoal: #1f1f1f;

    --bpb-slate: #52647a;
    --bpb-brass: #946d36;
    --bpb-sage: #66755a;
    --bpb-clay: #a36247;
    --bpb-parchment: #d5ccba;

    --bpb-slate-rgb: 82, 100, 122;
    --bpb-brass-rgb: 148, 109, 54;
    --bpb-sage-rgb: 102, 117, 90;
    --bpb-clay-rgb: 163, 98, 71;
    --bpb-parchment-rgb: 213, 204, 186;

    /* Bootstrap foundation and utility colors */
    --bs-blue: var(--bpb-slate);
    --bs-indigo: var(--bpb-slate);
    --bs-green: var(--bpb-sage);
    --bs-yellow: var(--bpb-brass);
    --bs-red: var(--bpb-clay);

    --bs-primary: var(--bpb-slate);
    --bs-primary-rgb: var(--bpb-slate-rgb);
    --bs-secondary: var(--bpb-gray-600);
    --bs-secondary-rgb: 107, 107, 107;
    --bs-success: var(--bpb-sage);
    --bs-success-rgb: var(--bpb-sage-rgb);
    --bs-info: var(--bpb-slate);
    --bs-info-rgb: var(--bpb-slate-rgb);
    --bs-warning: var(--bpb-brass);
    --bs-warning-rgb: var(--bpb-brass-rgb);
    --bs-danger: var(--bpb-clay);
    --bs-danger-rgb: var(--bpb-clay-rgb);
    --bs-light: var(--bpb-gray-100);
    --bs-light-rgb: 232, 232, 232;
    --bs-dark: var(--bpb-charcoal);
    --bs-dark-rgb: 31, 31, 31;

    --bs-body-color: var(--bpb-charcoal);
    --bs-body-color-rgb: 31, 31, 31;
    --bs-body-bg: var(--bpb-white);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: var(--bpb-charcoal);
    --bs-secondary-color: var(--bpb-gray-600);
    --bs-secondary-bg: var(--bpb-gray-100);
    --bs-tertiary-color: var(--bpb-gray-600);
    --bs-tertiary-bg: var(--bpb-parchment);
    --bs-border-color: var(--bpb-gray-100);

    --bs-link-color: var(--bpb-slate);
    --bs-link-hover-color: #3e4b5c;
    --bs-focus-ring-color: rgba(var(--bpb-slate-rgb), 0.25);

    --bs-primary-text-emphasis: #344153;
    --bs-primary-bg-subtle: #e9ecf0;
    --bs-primary-border-subtle: #bbc4ce;
    --bs-success-text-emphasis: #3e4737;
    --bs-success-bg-subtle: #e8ece6;
    --bs-success-border-subtle: #b9c4b4;
    --bs-warning-text-emphasis: #5e441f;
    --bs-warning-bg-subtle: #f1ece2;
    --bs-warning-border-subtle: #cfbc9c;
    --bs-danger-text-emphasis: #633b2b;
    --bs-danger-bg-subtle: #f4e9e5;
    --bs-danger-border-subtle: #d6b1a4;
}

/* Buttons use their own Bootstrap custom properties, so map each semantic role. */
.btn-primary,
.btn-info {
    --bs-btn-color: var(--bpb-white);
    --bs-btn-bg: var(--bpb-slate);
    --bs-btn-border-color: var(--bpb-slate);
    --bs-btn-hover-color: var(--bpb-white);
    --bs-btn-hover-bg: #3e4b5c;
    --bs-btn-hover-border-color: #3a4656;
    --bs-btn-focus-shadow-rgb: 98, 116, 137;
    --bs-btn-active-color: var(--bpb-white);
    --bs-btn-active-bg: #374351;
    --bs-btn-active-border-color: #34404d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(31, 31, 31, 0.125);
    --bs-btn-disabled-color: var(--bpb-white);
    --bs-btn-disabled-bg: var(--bpb-slate);
    --bs-btn-disabled-border-color: var(--bpb-slate);
}

.btn-secondary {
    --bs-btn-color: var(--bpb-white);
    --bs-btn-bg: var(--bpb-gray-600);
    --bs-btn-border-color: var(--bpb-gray-600);
    --bs-btn-hover-color: var(--bpb-white);
    --bs-btn-hover-bg: #565656;
    --bs-btn-hover-border-color: #515151;
    --bs-btn-focus-shadow-rgb: 129, 129, 129;
    --bs-btn-active-color: var(--bpb-white);
    --bs-btn-active-bg: #4f4f4f;
    --bs-btn-active-border-color: #4a4a4a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(31, 31, 31, 0.125);
    --bs-btn-disabled-color: var(--bpb-white);
    --bs-btn-disabled-bg: var(--bpb-gray-600);
    --bs-btn-disabled-border-color: var(--bpb-gray-600);
}

.btn-success {
    --bs-btn-color: var(--bpb-white);
    --bs-btn-bg: var(--bpb-sage);
    --bs-btn-border-color: var(--bpb-sage);
    --bs-btn-hover-color: var(--bpb-white);
    --bs-btn-hover-bg: #515e48;
    --bs-btn-hover-border-color: #4d5944;
    --bs-btn-focus-shadow-rgb: 125, 137, 108;
    --bs-btn-active-color: var(--bpb-white);
    --bs-btn-active-bg: #4b573f;
    --bs-btn-active-border-color: #47523c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(31, 31, 31, 0.125);
    --bs-btn-disabled-color: var(--bpb-white);
    --bs-btn-disabled-bg: var(--bpb-sage);
    --bs-btn-disabled-border-color: var(--bpb-sage);
}

.btn-warning {
    --bs-btn-color: var(--bpb-white);
    --bs-btn-bg: var(--bpb-brass);
    --bs-btn-border-color: var(--bpb-brass);
    --bs-btn-hover-color: var(--bpb-white);
    --bs-btn-hover-bg: #78572b;
    --bs-btn-hover-border-color: #704f28;
    --bs-btn-focus-shadow-rgb: 169, 138, 91;
    --bs-btn-active-color: var(--bpb-white);
    --bs-btn-active-bg: #684a25;
    --bs-btn-active-border-color: #624523;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(31, 31, 31, 0.125);
    --bs-btn-disabled-color: var(--bpb-white);
    --bs-btn-disabled-bg: var(--bpb-brass);
    --bs-btn-disabled-border-color: var(--bpb-brass);
}

.btn-danger {
    --bs-btn-color: var(--bpb-white);
    --bs-btn-bg: var(--bpb-clay);
    --bs-btn-border-color: var(--bpb-clay);
    --bs-btn-hover-color: var(--bpb-white);
    --bs-btn-hover-bg: #824e39;
    --bs-btn-hover-border-color: #794936;
    --bs-btn-focus-shadow-rgb: 181, 126, 108;
    --bs-btn-active-color: var(--bpb-white);
    --bs-btn-active-bg: #724431;
    --bs-btn-active-border-color: #6b402e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(31, 31, 31, 0.125);
    --bs-btn-disabled-color: var(--bpb-white);
    --bs-btn-disabled-bg: var(--bpb-clay);
    --bs-btn-disabled-border-color: var(--bpb-clay);
}

.btn-outline-primary,
.btn-outline-info {
    --bs-btn-color: var(--bpb-slate);
    --bs-btn-border-color: var(--bpb-slate);
    --bs-btn-hover-color: var(--bpb-white);
    --bs-btn-hover-bg: var(--bpb-slate);
    --bs-btn-hover-border-color: var(--bpb-slate);
    --bs-btn-focus-shadow-rgb: var(--bpb-slate-rgb);
    --bs-btn-active-color: var(--bpb-white);
    --bs-btn-active-bg: #374351;
    --bs-btn-active-border-color: #374351;
    --bs-btn-disabled-color: var(--bpb-slate);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bpb-slate);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bpb-gray-600);
    --bs-btn-border-color: var(--bpb-gray-600);
    --bs-btn-hover-color: var(--bpb-white);
    --bs-btn-hover-bg: var(--bpb-gray-600);
    --bs-btn-hover-border-color: var(--bpb-gray-600);
    --bs-btn-focus-shadow-rgb: 107, 107, 107;
    --bs-btn-active-color: var(--bpb-white);
    --bs-btn-active-bg: #4f4f4f;
    --bs-btn-active-border-color: #4f4f4f;
    --bs-btn-disabled-color: var(--bpb-gray-600);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bpb-gray-600);
}

.btn-outline-success {
    --bs-btn-color: var(--bpb-sage);
    --bs-btn-border-color: var(--bpb-sage);
    --bs-btn-hover-color: var(--bpb-white);
    --bs-btn-hover-bg: var(--bpb-sage);
    --bs-btn-hover-border-color: var(--bpb-sage);
    --bs-btn-focus-shadow-rgb: var(--bpb-sage-rgb);
    --bs-btn-active-color: var(--bpb-white);
    --bs-btn-active-bg: #4b573f;
    --bs-btn-active-border-color: #4b573f;
    --bs-btn-disabled-color: var(--bpb-sage);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bpb-sage);
}

.btn-outline-warning {
    --bs-btn-color: var(--bpb-brass);
    --bs-btn-border-color: var(--bpb-brass);
    --bs-btn-hover-color: var(--bpb-white);
    --bs-btn-hover-bg: var(--bpb-brass);
    --bs-btn-hover-border-color: var(--bpb-brass);
    --bs-btn-focus-shadow-rgb: var(--bpb-brass-rgb);
    --bs-btn-active-color: var(--bpb-white);
    --bs-btn-active-bg: #684a25;
    --bs-btn-active-border-color: #684a25;
    --bs-btn-disabled-color: var(--bpb-brass);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bpb-brass);
}

.btn-outline-danger {
    --bs-btn-color: var(--bpb-clay);
    --bs-btn-border-color: var(--bpb-clay);
    --bs-btn-hover-color: var(--bpb-white);
    --bs-btn-hover-bg: var(--bpb-clay);
    --bs-btn-hover-border-color: var(--bpb-clay);
    --bs-btn-focus-shadow-rgb: var(--bpb-clay-rgb);
    --bs-btn-active-color: var(--bpb-white);
    --bs-btn-active-bg: #724431;
    --bs-btn-active-border-color: #724431;
    --bs-btn-disabled-color: var(--bpb-clay);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bpb-clay);
}

/* Text, backgrounds, badges, and border utilities read the root --bs-*-rgb values. */

.list-group-item-primary,
.list-group-item-info {
    --bs-list-group-color: #344153;
    --bs-list-group-bg: #e9ecf0;
    --bs-list-group-border-color: #bbc4ce;
    --bs-list-group-action-hover-color: #344153;
    --bs-list-group-action-hover-bg: #dce1e6;
    --bs-list-group-action-active-color: #344153;
    --bs-list-group-action-active-bg: #cfd6de;
    --bs-list-group-active-color: var(--bpb-white);
    --bs-list-group-active-bg: var(--bpb-slate);
    --bs-list-group-active-border-color: var(--bpb-slate);
}

.list-group-item-success {
    --bs-list-group-color: #3e4737;
    --bs-list-group-bg: #e8ece6;
    --bs-list-group-border-color: #b9c4b4;
    --bs-list-group-action-hover-color: #3e4737;
    --bs-list-group-action-hover-bg: #dce2d9;
    --bs-list-group-action-active-color: #3e4737;
    --bs-list-group-action-active-bg: #d1dacd;
    --bs-list-group-active-color: var(--bpb-white);
    --bs-list-group-active-bg: var(--bpb-sage);
    --bs-list-group-active-border-color: var(--bpb-sage);
}

.list-group-item-warning {
    --bs-list-group-color: #5e441f;
    --bs-list-group-bg: #f1ece2;
    --bs-list-group-border-color: #cfbc9c;
    --bs-list-group-action-hover-color: #5e441f;
    --bs-list-group-action-hover-bg: #e7dfd2;
    --bs-list-group-action-active-color: #5e441f;
    --bs-list-group-action-active-bg: #ddd2c1;
    --bs-list-group-active-color: var(--bpb-white);
    --bs-list-group-active-bg: var(--bpb-brass);
    --bs-list-group-active-border-color: var(--bpb-brass);
}

.list-group-item-danger {
    --bs-list-group-color: #633b2b;
    --bs-list-group-bg: #f4e9e5;
    --bs-list-group-border-color: #d6b1a4;
    --bs-list-group-action-hover-color: #633b2b;
    --bs-list-group-action-hover-bg: #eadcd6;
    --bs-list-group-action-active-color: #633b2b;
    --bs-list-group-action-active-bg: #e0cfc7;
    --bs-list-group-active-color: var(--bpb-white);
    --bs-list-group-active-bg: var(--bpb-clay);
    --bs-list-group-active-border-color: var(--bpb-clay);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bpb-slate);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bpb-slate);
}

.pagination {
    --bs-pagination-color: var(--bpb-slate);
    --bs-pagination-hover-color: #3e4b5c;
    --bs-pagination-focus-color: #3e4b5c;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bpb-slate-rgb), 0.25);
    --bs-pagination-active-bg: var(--bpb-slate);
    --bs-pagination-active-border-color: var(--bpb-slate);
}

.progress {
    --bs-progress-bar-bg: var(--bpb-slate);
}

.form-control,
.form-select {
    --bs-form-control-focus-border-color: #8e9baa;
    --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bpb-slate-rgb), 0.25);
}

.form-check-input {
    --bs-form-check-input-checked-bg-color: var(--bpb-slate);
    --bs-form-check-input-checked-border-color: var(--bpb-slate);
    --bs-form-check-input-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bpb-slate-rgb), 0.25);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #8e9baa;
    box-shadow: 0 0 0 0.25rem rgba(var(--bpb-slate-rgb), 0.25);
}

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