.ui-modal {
  background: var(--ui-surface-modal);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-modal);
  box-shadow: var(--ui-shadow-panel);
  color: var(--ui-text-primary);
}

.modal-backdrop {
  --bs-backdrop-bg: var(--ui-modal-backdrop-bg);
  --bs-backdrop-opacity: 1;
}

.modal-content {
  background: var(--ui-surface-modal);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-modal);
  box-shadow: var(--ui-shadow-panel);
  color: var(--ui-text-primary);
}

.modal-header {
  border-bottom-color: var(--ui-border-subtle);
}

.modal-footer {
  border-top-color: var(--ui-border-subtle);
}

.modal-title {
  color: var(--ui-text-primary);
}

.btn-close {
  filter: var(--ui-btn-close-filter);
  opacity: var(--ui-btn-close-opacity);
}

.btn-close-white,
.btn-close:hover {
  filter: var(--ui-btn-close-filter);
  opacity: var(--ui-btn-close-hover-opacity);
}

.btn-close:focus-visible {
  box-shadow: var(--ui-focus-ring);
  outline: 0;
}

.ui-modal--lg {
  --bs-modal-width: var(--ui-modal-width-lg);
}

.ui-modal--xl {
  --bs-modal-width: var(--ui-modal-width-xl);
}

.ui-modal__header,
.ui-modal__body,
.ui-modal__footer {
  padding: var(--ui-space-5);
}

.ui-modal__header {
  align-items: center;
  border-bottom: 1px solid var(--ui-border-subtle);
  display: flex;
  gap: var(--ui-space-3);
  justify-content: space-between;
}

.ui-modal__footer {
  border-top: 1px solid var(--ui-border-subtle);
  display: flex;
  gap: var(--ui-space-3);
  justify-content: flex-end;
}

.ui-modal__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}