:root {
  --bs-body-bg: var(--bf-surface-0);
  --bs-body-color: var(--bf-ink-1);
  --bs-body-font-size: var(--bf-font-size-base);
  --bs-body-line-height: var(--bf-line-height-base);
  --bs-border-color: var(--bf-border);
  --bs-border-radius: var(--bf-radius);
  --bs-border-radius-sm: var(--bf-radius-sm);
  --bs-border-radius-lg: var(--bf-radius-lg);
  --bs-primary: var(--bf-accent);
  --bs-success: var(--bf-success);
  --bs-warning: var(--bf-warning);
  --bs-danger: var(--bf-danger);
  --bs-link-color: var(--bf-accent);
  --bs-link-hover-color: var(--bf-accent-hover);
  --bs-font-sans-serif: var(--bf-font-sans);
  --bs-body-font-family: var(--bf-font-sans);
}

body {
  background: var(--bf-surface-0);
  color: var(--bf-ink-1);
  font-family: var(--bf-font-sans);
  font-size: var(--bf-font-size-base);
  line-height: var(--bf-line-height-base);
  font-variant-numeric: tabular-nums;
}

.btn-primary,
.btn-dark {
  background: var(--bf-accent);
  border-color: var(--bf-accent);
  color: var(--bf-accent-ink);
}
.btn-primary:hover,
.btn-dark:hover {
  background: var(--bf-accent-hover);
  border-color: var(--bf-accent-hover);
  color: var(--bf-accent-ink);
}
.btn-primary:active,
.btn-dark:active {
  background: var(--bf-accent-active);
  border-color: var(--bf-accent-active);
  color: var(--bf-accent-ink);
}
.btn-outline-primary {
  color: var(--bf-accent);
  border-color: var(--bf-accent);
}
.btn-outline-primary:hover {
  background: var(--bf-accent);
  border-color: var(--bf-accent);
  color: var(--bf-accent-ink);
}
.btn-outline-danger {
  color: var(--bf-danger);
  border-color: var(--bf-danger);
  background: transparent;
}
.btn-outline-danger:hover {
  background: var(--bf-danger);
  border-color: var(--bf-danger);
  color: var(--bf-danger-ink);
}
.btn-danger {
  background: var(--bf-danger);
  border-color: var(--bf-danger);
  color: var(--bf-danger-ink);
}
.btn-danger:hover {
  background: var(--bf-danger-hover);
  border-color: var(--bf-danger-hover);
  color: var(--bf-danger-ink);
}
.btn-outline-secondary {
  border-color: var(--bf-border);
  color: var(--bf-ink-2);
}
.btn-outline-secondary:hover {
  background: var(--bf-surface-2);
  color: var(--bf-ink-0);
}

.bf-btn-ghost{
  background: transparent;
  border: 1px solid var(--bf-border);
  color: var(--bf-ink-1);
}

.bf-btn-ghost:hover{
  background: var(--bf-surface-2);
  color: var(--bf-ink-0);
}

.bf-btn-ghost:disabled,
.bf-btn-ghost[disabled]{
  opacity: 0.6;
  cursor: not-allowed;
}

.form-control, .form-select {
  border-color: var(--bf-border);
  border-radius: var(--bf-radius-sm);
  color: var(--bf-ink-1);
  background: var(--bf-surface-1);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--bf-accent);
  box-shadow: var(--bf-focus-ring);
}
.form-control::placeholder {
  color: var(--bf-ink-3);
  opacity: 0.8;
}

.progress {
  background: var(--bf-surface-2);
  border-radius: var(--bf-radius-sm);
}
.progress-bar {
  background: var(--bf-accent);
}

.badge {
  border-radius: 999px;
  font-weight: 600;
}

.table > :not(caption) > * > * {
  padding: var(--bf-cell-pad-y) var(--bf-cell-pad-x) !important;
}

.table thead th,
.table thead td {
  padding: var(--bf-cell-pad-y) var(--bf-cell-pad-x) !important;
}

.table tbody td,
.table tbody th {
  padding: var(--bf-cell-pad-y) var(--bf-cell-pad-x) !important;
}

.table tfoot td,
.table tfoot th {
  padding: var(--bf-cell-pad-y) var(--bf-cell-pad-x) !important;
}

/* === ULTRA-DENSE BOOTSTRAP OVERRIDES === */

/* Typography */
h1, .h1 { font-size: 20px; font-weight: 700; line-height: 1.3; }
h2, .h2 { font-size: 18px; font-weight: 700; line-height: 1.3; }
h3, .h3 { font-size: 15px; font-weight: 600; line-height: 1.3; }
h4, .h4 { font-size: 13px; font-weight: 600; line-height: 1.3; }
h5, .h5 { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
h6, .h6 { font-size: 12px; font-weight: 600; line-height: 1.3; }

.lead { font-size: 13px; }
small, .small { font-size: var(--bf-font-size-sm); }

/* Buttons ultra-dense */
.btn {
  font-size: 12px;
  padding: 4px 10px;
  line-height: 1.3;
  font-weight: 500;
}

.btn-sm {
  font-size: var(--bf-font-size-sm);
  padding: 3px 8px;
}

.btn-lg {
  font-size: var(--bf-font-size-lg);
  padding: 6px 14px;
}

/* Form controls ultra-dense */
.form-label {
  font-size: var(--bf-label-font-size);
  margin-bottom: var(--bf-label-margin-bottom);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.form-control,
.form-select {
  font-size: var(--bf-font-size-base);
  padding: var(--bf-input-padding-y) var(--bf-input-padding-x);
  min-height: var(--bf-input-height);
  line-height: var(--bf-line-height-base);
}

.form-control-sm,
.form-select-sm {
  font-size: var(--bf-font-size-sm);
  padding: 3px 6px;
  min-height: var(--bf-input-height-sm);
}

.form-text {
  font-size: var(--bf-font-size-xs);
  margin-top: 2px;
}

.input-group-text {
  font-size: var(--bf-font-size-base);
  padding: var(--bf-input-padding-y) var(--bf-input-padding-x);
}

/* Tables ultra-dense */
.table {
  font-size: 12px;
}

.table thead th {
  font-size: var(--bf-font-size-xs);
  padding: var(--bf-cell-pad-y) var(--bf-cell-pad-x);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: var(--bf-line-height-tight);
}

.table tbody td,
.table tbody th {
  padding: var(--bf-cell-pad-y) var(--bf-cell-pad-x);
  font-size: 12px;
  line-height: var(--bf-line-height-tight);
}

/* NO height on tr - let td padding control row height */

.table-sm thead th,
.table-sm tbody td,
.table-sm tbody th {
  padding: var(--bf-cell-pad-y) var(--bf-cell-pad-x);
  font-size: 12px;
}

/* Navigation */
.nav-link {
  font-size: 12px;
  padding: 4px 10px;
}

.nav-tabs .nav-link {
  padding: 4px 10px;
  font-size: 12px;
}

.nav-pills .nav-link {
  padding: 4px 10px;
  font-size: 12px;
}

/* Badges */
.badge {
  font-size: 10.5px;
  padding: 2px 6px;
}

/* Cards */
.card-header {
  padding: 8px 12px;
  font-size: var(--bf-font-size-base);
}

.card-body {
  padding: 10px 12px;
  font-size: var(--bf-font-size-base);
}

.card-footer {
  padding: 8px 12px;
  font-size: var(--bf-font-size-sm);
}

/* Modals */
.modal-header {
  padding: 8px 12px;
}

.modal-title {
  font-size: var(--bf-font-size-lg);
}

.modal-body {
  padding: 10px 12px;
  font-size: var(--bf-font-size-base);
}

.modal-footer {
  padding: 8px 12px;
}

/* Dropdowns */
.dropdown-menu {
  font-size: var(--bf-font-size-base);
  padding: 4px;
}

.dropdown-item {
  padding: 4px 8px;
  font-size: var(--bf-font-size-base);
}

.dropdown-header {
  padding: 4px 8px;
  font-size: var(--bf-font-size-xs);
  text-transform: none;
  letter-spacing: 0;
}

/* Alerts */
.alert {
  padding: 8px 12px;
  font-size: var(--bf-font-size-base);
}

.alert-heading {
  font-size: var(--bf-font-size-base);
}

/* Breadcrumb */
.breadcrumb {
  font-size: var(--bf-font-size-sm);
  padding: 4px 0;
  margin-bottom: 6px;
}

.breadcrumb-item {
  font-size: var(--bf-font-size-sm);
}

/* List groups */
.list-group {
  background: var(--bf-surface-1);
}
.list-group-item {
  padding: 6px 10px;
  font-size: var(--bf-font-size-base);
  background: var(--bf-surface-1);
  color: var(--bf-ink-1);
  border-color: var(--bf-border);
}
.list-group-item-action:hover {
  background: var(--bf-surface-2);
  color: var(--bf-ink-1);
}

/* Pagination */
.page-link {
  padding: 4px 8px;
  font-size: var(--bf-font-size-base);
}

/* Progress */
.progress {
  height: 16px;
  font-size: 10px;
}

/* Popovers & Tooltips */
.popover {
  font-size: var(--bf-font-size-sm);
}

.popover-header {
  font-size: var(--bf-font-size-base);
  padding: 6px 10px;
}

.popover-body {
  font-size: var(--bf-font-size-sm);
  padding: 6px 10px;
}

.tooltip {
  font-size: var(--bf-font-size-xs);
}

.tooltip-inner {
  padding: 3px 6px;
  font-size: var(--bf-font-size-xs);
}

/* Accordion */
.accordion-button {
  font-size: var(--bf-font-size-base);
  padding: 8px 12px;
}

.accordion-body {
  font-size: var(--bf-font-size-base);
  padding: 10px 12px;
}

/* Offcanvas */
.offcanvas-header {
  padding: 8px 12px;
}

.offcanvas-title {
  font-size: var(--bf-font-size-lg);
}

.offcanvas-body {
  padding: 10px 12px;
  font-size: var(--bf-font-size-base);
}