:root {
  /* Primary color base */
  --bs-primary: #dc3545;
  --bs-primary-rgb: 220, 53, 69;
  
  /* Color variants */
  --bs-primary-bg-subtle: #f8d7da;
  --bs-primary-border-subtle: #f1aeb5;
  --bs-primary-text-emphasis: #6c252d;
  
  /* Interactive states */
  --bs-primary-hover: #bb2d3b;
  --bs-primary-active: #b02a37;
  --bs-primary-focus: rgba(220, 53, 69, 0.25);
}

/* ========== BASE PRIMARY STYLES ========== */
.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.border-primary {
  border-color: var(--bs-primary) !important;
}

.link-primary {
  color: var(--bs-primary) !important;
}
.link-primary:hover, .link-primary:focus {
  color: var(--bs-primary-hover) !important;
}

/* ========== BUTTONS ========== */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary-hover);
  --bs-btn-hover-border-color: var(--bs-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary-active);
  --bs-btn-active-border-color: var(--bs-primary-active);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* ========== FORMS ========== */
.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus);
}

.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus);
}

.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23dc3545'/%3e%3c/svg%3e");
}

/* Radio buttons */
.form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

/* Range inputs */
.form-range::-webkit-slider-thumb {
  background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb {
  background-color: var(--bs-primary);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem var(--bs-primary-focus);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem var(--bs-primary-focus);
}

/* Form validation */
.was-validated .form-control:valid:focus, 
.form-control.is-valid:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus);
}

.was-validated .form-select:valid:focus, 
.form-select.is-valid:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus);
}

/* ========== COMPONENTS ========== */
/* Dropdowns */
.dropdown-item.active, 
.dropdown-item:active {
  background-color: var(--bs-primary);
}

/* Pagination */
.page-link {
  color: var(--bs-primary);
}
.page-link:hover {
  color: var(--bs-primary-hover);
}
.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Progress bars */
.progress-bar {
  background-color: var(--bs-primary);
}

/* List group */
.list-group-item-primary {
  color: var(--bs-primary-text-emphasis);
  background-color: var(--bs-primary-bg-subtle);
}
.list-group-item-primary.list-group-item-action:hover, 
.list-group-item-primary.list-group-item-action:focus {
  color: var(--bs-primary-text-emphasis);
  background-color: var(--bs-primary-border-subtle);
}

/* Table */
.table-primary, 
.table-primary > th, 
.table-primary > td {
  background-color: var(--bs-primary-bg-subtle);
}
.table-hover .table-primary:hover {
  background-color: var(--bs-primary-border-subtle);
}
.table-hover .table-primary:hover > td, 
.table-hover .table-primary:hover > th {
  background-color: var(--bs-primary-border-subtle);
}

/* Accordion */
.accordion-button:not(.collapsed) {
  color: var(--bs-primary-text-emphasis);
  background-color: var(--bs-primary-bg-subtle);
}
.accordion-button:focus {
  border-color: var(--bs-primary-border-subtle);
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus);
}

/* Badges */
.badge.bg-primary {
  background-color: var(--bs-primary) !important;
}

/* Alerts */
.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

/* Breadcrumb */
.breadcrumb-item.active {
  color: var(--bs-primary);
}

/* ========== NAVS & TABS ========== */
.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
  background-color: var(--bs-primary);
}

.nav-link:focus, 
.nav-link:hover {
  color: var(--bs-primary-hover);
}

/* Tabs */
.nav-tabs .nav-link.active {
  border-bottom-color: var(--bs-primary);
  color: var(--bs-primary);
}

/* ========== TOOLTIPS & POPOVERS ========== */
.tooltip .tooltip-inner {
  background-color: var(--bs-primary);
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, 
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--bs-primary);
}

.popover-header {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

/* ========== SHADOWS ========== */
.shadow-primary {
  box-shadow: 0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.15) !important;
}

.shadow-primary-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(var(--bs-primary-rgb), 0.075) !important;
}

.shadow-primary-lg {
  box-shadow: 0 1rem 3rem rgba(var(--bs-primary-rgb), 0.175) !important;
}

/* ========== FOCUS STATES ========== */
.btn-primary:focus, 
.btn-outline-primary:focus,
.form-control:focus, 
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus,
.page-link:focus,
.nav-link:focus {
  box-shadow: 0 0 0 0.25rem var(--bs-primary-focus);
}

/* ========== HOVER STATES ========== */
.bg-primary-hover:hover {
  background-color: var(--bs-primary-hover) !important;
}

.text-primary-hover:hover {
  color: var(--bs-primary-hover) !important;
}

.border-primary-hover:hover {
  border-color: var(--bs-primary-hover) !important;
}
