/* ============================================
   Bootstrap 5.3 ↔ Hotones token bridge
   Loaded AFTER bootstrap.min.css to override its CSS variables with the
   Hotones palette. Every Bootstrap component (btn, card, badge, form,
   modal, alert, nav, pagination, dropdown, toast, offcanvas, …) picks up
   its colors from CSS variables, so remapping them here is enough to
   reskin the whole lot without rebuilding Bootstrap.
   ============================================ */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    /* Core brand → Bootstrap theme colors */
    --bs-primary:            var(--ho-ember);
    --bs-primary-rgb:        255, 77, 18;
    --bs-primary-text-emphasis: var(--ho-flare);
    --bs-primary-bg-subtle:  rgba(255, 77, 18, 0.12);
    --bs-primary-border-subtle: rgba(255, 77, 18, 0.35);

    --bs-secondary:          var(--ho-muted);
    --bs-secondary-rgb:      168, 150, 140;
    --bs-secondary-text-emphasis: var(--ho-body-2);
    --bs-secondary-bg-subtle: rgba(168, 150, 140, 0.12);
    --bs-secondary-border-subtle: var(--ho-line);

    --bs-success:            #52C77A;
    --bs-success-rgb:        82, 199, 122;
    --bs-info:               var(--ho-flare);
    --bs-info-rgb:           255, 176, 32;
    --bs-warning:            var(--ho-flare);
    --bs-warning-rgb:        255, 176, 32;
    --bs-danger:             var(--ho-chili);
    --bs-danger-rgb:         224, 30, 30;

    --bs-light:              var(--ho-ash);
    --bs-light-rgb:          247, 237, 228;
    --bs-dark:               var(--ho-coal);
    --bs-dark-rgb:           18, 11, 9;

    /* Body */
    --bs-body-bg:            var(--ho-coal);
    --bs-body-bg-rgb:        18, 11, 9;
    --bs-body-color:         var(--ho-ash);
    --bs-body-color-rgb:     247, 237, 228;
    --bs-emphasis-color:     var(--ho-ash);
    --bs-emphasis-color-rgb: 247, 237, 228;

    /* Secondary / tertiary text */
    --bs-secondary-color:    var(--ho-body-2);
    --bs-secondary-color-rgb: 201, 184, 173;
    --bs-tertiary-color:     var(--ho-muted);
    --bs-tertiary-color-rgb: 168, 150, 140;

    /* Surfaces */
    --bs-secondary-bg:       var(--ho-coal-2);
    --bs-secondary-bg-rgb:   28, 18, 15;
    --bs-tertiary-bg:        var(--ho-coal-3);
    --bs-tertiary-bg-rgb:    36, 23, 19;

    /* Borders */
    --bs-border-color:                 var(--ho-line);
    --bs-border-color-translucent:     rgba(58, 39, 32, 0.6);
    --bs-border-radius:                var(--ho-radius-thumb);
    --bs-border-radius-sm:             var(--ho-radius-badge);
    --bs-border-radius-lg:             var(--ho-radius-modal);
    --bs-border-radius-xl:             12px;
    --bs-border-radius-pill:           var(--ho-radius-pill);

    /* Links */
    --bs-link-color:        var(--ho-ember);
    --bs-link-color-rgb:    255, 77, 18;
    --bs-link-hover-color:  var(--ho-flare);
    --bs-link-hover-color-rgb: 255, 176, 32;

    /* Focus ring */
    --bs-focus-ring-color:  rgba(255, 77, 18, 0.35);

    /* Typography */
    --bs-font-sans-serif:   var(--ho-font-ui);
    --bs-font-monospace:    var(--ho-font-mono);
    --bs-heading-color:     var(--ho-ash);

    /* Code */
    --bs-code-color:        var(--ho-flare);

    /* Highlight / selection */
    --bs-highlight-bg:      rgba(255, 176, 32, 0.25);
    --bs-highlight-color:   var(--ho-ash);
}

/* ─── Buttons ─────────────────────────────────── */
.btn-primary {
    --bs-btn-bg:              var(--ho-ember);
    --bs-btn-border-color:    var(--ho-ember);
    --bs-btn-color:           var(--ho-coal);
    --bs-btn-hover-bg:        var(--ho-flare);
    --bs-btn-hover-border-color: var(--ho-flare);
    --bs-btn-hover-color:     var(--ho-coal);
    --bs-btn-active-bg:       var(--ho-flare);
    --bs-btn-active-border-color: var(--ho-flare);
    --bs-btn-active-color:    var(--ho-coal);
    --bs-btn-disabled-bg:     rgba(255, 77, 18, 0.4);
    --bs-btn-disabled-border-color: rgba(255, 77, 18, 0.4);
    --bs-btn-disabled-color:  var(--ho-coal);
}
.btn-outline-primary {
    --bs-btn-color:           var(--ho-ember);
    --bs-btn-border-color:    var(--ho-ember);
    --bs-btn-hover-bg:        var(--ho-ember);
    --bs-btn-hover-border-color: var(--ho-ember);
    --bs-btn-hover-color:     var(--ho-coal);
    --bs-btn-active-bg:       var(--ho-ember);
    --bs-btn-active-border-color: var(--ho-ember);
    --bs-btn-active-color:    var(--ho-coal);
}
.btn-secondary {
    --bs-btn-bg:              var(--ho-coal-2);
    --bs-btn-border-color:    var(--ho-line);
    --bs-btn-color:           var(--ho-ash);
    --bs-btn-hover-bg:        var(--ho-coal-3);
    --bs-btn-hover-border-color: var(--ho-ember);
    --bs-btn-hover-color:     var(--ho-ash);
    --bs-btn-active-bg:       var(--ho-coal-3);
    --bs-btn-active-border-color: var(--ho-ember);
    --bs-btn-active-color:    var(--ho-ash);
}
.btn-outline-secondary {
    --bs-btn-color:           var(--ho-body-2);
    --bs-btn-border-color:    var(--ho-line);
    --bs-btn-hover-bg:        var(--ho-coal-2);
    --bs-btn-hover-border-color: var(--ho-ember);
    --bs-btn-hover-color:     var(--ho-ash);
}
.btn-danger {
    --bs-btn-bg:              var(--ho-chili);
    --bs-btn-border-color:    var(--ho-chili);
    --bs-btn-color:           var(--ho-ash);
    --bs-btn-hover-bg:        #c71a1a;
    --bs-btn-hover-border-color: #c71a1a;
}
.btn-warning,
.btn-info {
    --bs-btn-bg:              var(--ho-flare);
    --bs-btn-border-color:    var(--ho-flare);
    --bs-btn-color:           var(--ho-coal);
    --bs-btn-hover-bg:        #e59a1a;
    --bs-btn-hover-border-color: #e59a1a;
    --bs-btn-hover-color:     var(--ho-coal);
}

/* ─── Forms ───────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--ho-coal-2);
    border-color:     var(--ho-line);
    color:            var(--ho-ash);
}
.form-control::placeholder { color: var(--ho-muted); }
.form-control:focus,
.form-select:focus {
    background-color: var(--ho-coal-2);
    border-color:     var(--ho-ember);
    color:            var(--ho-ash);
    box-shadow:       0 0 0 .2rem rgba(255, 77, 18, 0.15);
}
.form-control:disabled,
.form-select:disabled {
    background-color: var(--ho-coal-3);
    color:            var(--ho-muted);
}
.form-check-input {
    background-color: var(--ho-coal-2);
    border-color:     var(--ho-line);
}
.form-check-input:checked {
    background-color: var(--ho-ember);
    border-color:     var(--ho-ember);
}
.form-check-input:focus {
    border-color: var(--ho-ember);
    box-shadow:   0 0 0 .2rem rgba(255, 77, 18, 0.15);
}
.form-label  { color: var(--ho-body-2); font-weight: 600; }
.form-text   { color: var(--ho-muted); }

/* ─── Cards ───────────────────────────────────── */
.card {
    --bs-card-bg:            var(--ho-coal-2);
    --bs-card-color:         var(--ho-ash);
    --bs-card-border-color:  var(--ho-line);
    --bs-card-cap-bg:        var(--ho-coal-3);
    --bs-card-cap-color:     var(--ho-ash);
}

/* ─── Alerts ──────────────────────────────────── */
.alert-primary   { --bs-alert-bg: rgba(255, 77, 18, 0.12);  --bs-alert-color: var(--ho-flare); --bs-alert-border-color: rgba(255, 77, 18, 0.35);  --bs-alert-link-color: var(--ho-flare); }
.alert-secondary { --bs-alert-bg: rgba(168, 150, 140, 0.12);--bs-alert-color: var(--ho-body-2); --bs-alert-border-color: var(--ho-line); }
.alert-success   { --bs-alert-bg: rgba(82, 199, 122, 0.12); --bs-alert-color: #8fe0a8; --bs-alert-border-color: rgba(82, 199, 122, 0.35); }
.alert-danger    { --bs-alert-bg: rgba(224, 30, 30, 0.12);  --bs-alert-color: #ff7a7a; --bs-alert-border-color: rgba(224, 30, 30, 0.35); }
.alert-warning,
.alert-info      { --bs-alert-bg: rgba(255, 176, 32, 0.12); --bs-alert-color: var(--ho-flare); --bs-alert-border-color: rgba(255, 176, 32, 0.35); }

/* ─── Badges ──────────────────────────────────── */
.badge.bg-primary   { background-color: var(--ho-ember) !important; color: var(--ho-coal); }
.badge.bg-secondary { background-color: var(--ho-line) !important;  color: var(--ho-ash); }
.badge.bg-success   { background-color: #52C77A !important;         color: var(--ho-coal); }
.badge.bg-danger    { background-color: var(--ho-chili) !important; color: var(--ho-ash); }
.badge.bg-warning,
.badge.bg-info      { background-color: var(--ho-flare) !important; color: var(--ho-coal); }

/* ─── Navs / Pagination / Dropdowns ───────────── */
.nav-link           { color: var(--ho-body-2); }
.nav-link:hover,
.nav-link.active    { color: var(--ho-ember); }
.nav-tabs {
    --bs-nav-tabs-border-color:        var(--ho-line);
    --bs-nav-tabs-link-active-color:   var(--ho-ash);
    --bs-nav-tabs-link-active-bg:      var(--ho-coal-2);
    --bs-nav-tabs-link-active-border-color: var(--ho-line) var(--ho-line) var(--ho-coal-2);
    --bs-nav-tabs-link-hover-border-color:  var(--ho-coal-3) var(--ho-coal-3) var(--ho-line);
}
.pagination {
    --bs-pagination-color:            var(--ho-body-2);
    --bs-pagination-bg:               var(--ho-coal-2);
    --bs-pagination-border-color:     var(--ho-line);
    --bs-pagination-hover-color:      var(--ho-ash);
    --bs-pagination-hover-bg:         var(--ho-coal-3);
    --bs-pagination-hover-border-color: var(--ho-ember);
    --bs-pagination-active-bg:        var(--ho-ember);
    --bs-pagination-active-border-color: var(--ho-ember);
    --bs-pagination-active-color:     var(--ho-coal);
    --bs-pagination-disabled-color:   var(--ho-muted);
    --bs-pagination-disabled-bg:      var(--ho-coal-2);
    --bs-pagination-disabled-border-color: var(--ho-divider);
}
.dropdown-menu {
    --bs-dropdown-bg:               var(--ho-coal-2);
    --bs-dropdown-color:            var(--ho-ash);
    --bs-dropdown-border-color:     var(--ho-line);
    --bs-dropdown-link-color:       var(--ho-body-2);
    --bs-dropdown-link-hover-color: var(--ho-ash);
    --bs-dropdown-link-hover-bg:    var(--ho-coal-3);
    --bs-dropdown-link-active-color: var(--ho-coal);
    --bs-dropdown-link-active-bg:   var(--ho-ember);
    --bs-dropdown-divider-bg:       var(--ho-divider);
}

/* ─── Modals / Offcanvas / Toasts ─────────────── */
.modal-content,
.offcanvas,
.toast {
    background-color: var(--ho-coal-2);
    color:            var(--ho-ash);
    border-color:     var(--ho-line);
}
.modal-header,
.offcanvas-header { border-bottom-color: var(--ho-divider); }
.modal-footer     { border-top-color:    var(--ho-divider); }
.modal-backdrop   { --bs-backdrop-bg: var(--ho-coal); --bs-backdrop-opacity: 0.75; }

/* ─── Tables ──────────────────────────────────── */
.table {
    --bs-table-bg:            transparent;
    --bs-table-color:         var(--ho-ash);
    --bs-table-border-color:  var(--ho-line);
    --bs-table-striped-bg:    var(--ho-coal-2);
    --bs-table-striped-color: var(--ho-ash);
    --bs-table-hover-bg:      var(--ho-coal-3);
    --bs-table-hover-color:   var(--ho-ash);
}

/* ─── Progress / Spinner / Close btn ──────────── */
.progress     { background-color: var(--ho-coal-2); }
.progress-bar { background-color: var(--ho-ember); }
.spinner-border, .spinner-grow { color: var(--ho-ember); }
.btn-close    { filter: invert(1) grayscale(100%) brightness(1.5); }

/* ─── Code / <kbd> / <mark> ───────────────────── */
code { color: var(--ho-flare); background: rgba(255, 176, 32, 0.08); padding: 2px 6px; border-radius: 3px; }
kbd  { background: var(--ho-coal-3); color: var(--ho-ash); border: 1px solid var(--ho-line); }
mark { background: rgba(255, 176, 32, 0.25); color: var(--ho-ash); }

/* ─── Links in content ────────────────────────── */
a { color: var(--ho-ember); }
a:hover { color: var(--ho-flare); }

/* ─── List group ──────────────────────────────── */
.list-group {
    --bs-list-group-bg:               var(--ho-coal-2);
    --bs-list-group-color:            var(--ho-ash);
    --bs-list-group-border-color:     var(--ho-line);
    --bs-list-group-action-color:     var(--ho-body-2);
    --bs-list-group-action-hover-color: var(--ho-ash);
    --bs-list-group-action-hover-bg:  var(--ho-coal-3);
    --bs-list-group-active-color:     var(--ho-coal);
    --bs-list-group-active-bg:        var(--ho-ember);
    --bs-list-group-active-border-color: var(--ho-ember);
}

/* ─── Breadcrumb ──────────────────────────────── */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--ho-muted);
    --bs-breadcrumb-item-active-color: var(--ho-body-2);
}
.breadcrumb-item a { color: var(--ho-ember); }