/*
 * HostGrowth Design System: 01 Bootstrap map
 */

:root {
  --bs-body-font-family: var(--hg-font-family-sans);
  --bs-body-bg: var(--hg-color-background-page);
  --bs-body-color: var(--hg-color-text-primary);
  --bs-border-color: var(--hg-color-border-default);
  --bs-border-width: var(--hg-border-width-default);
  --bs-border-radius: var(--hg-radius-input);
  --bs-border-radius-sm: var(--hg-radius-2);
  --bs-border-radius-lg: var(--hg-radius-card);
  --bs-border-radius-xl: var(--hg-radius-modal);
  --bs-primary: var(--hg-color-action-primary-bg);
  --bs-primary-rgb: 23, 23, 23;
  --bs-secondary: var(--hg-color-surface-active);
  --bs-success: var(--hg-color-green-600);
  --bs-warning: var(--hg-color-amber-600);
  --bs-danger: var(--hg-color-red-600);
  --bs-info: var(--hg-color-blue-600);
  --bs-link-color: var(--hg-color-link-default);
  --bs-link-hover-color: var(--hg-color-link-hover);
  --bs-focus-ring-color: rgba(59, 130, 246, 0.28);
}

.btn {
  min-height: 44px;
  padding: 0 var(--hg-space-5);
  border-radius: var(--hg-radius-button);
  font-size: var(--hg-font-size-14);
  line-height: var(--hg-line-height-20);
  font-weight: var(--hg-font-weight-semibold);
  letter-spacing: var(--hg-letter-spacing);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hg-space-2);
  transition:
    background-color var(--hg-duration-base) var(--hg-ease-standard),
    border-color var(--hg-duration-base) var(--hg-ease-standard),
    color var(--hg-duration-base) var(--hg-ease-standard),
    box-shadow var(--hg-duration-base) var(--hg-ease-standard);
}

.btn:focus,
.btn.focus {
  box-shadow: var(--hg-focus-ring);
}

.btn-sm {
  min-height: 36px;
  padding: 0 var(--hg-space-4);
  font-size: var(--hg-font-size-13);
  line-height: var(--hg-line-height-18);
}

.btn-lg {
  min-height: 52px;
  padding: 0 var(--hg-space-6);
  font-size: var(--hg-font-size-16);
  line-height: var(--hg-line-height-24);
}

.btn-primary,
.btn-success,
.hg-btn-primary {
  background-color: var(--hg-color-action-primary-bg);
  border-color: var(--hg-color-action-primary-bg);
  color: var(--hg-color-action-primary-text);
}

.btn-primary:hover,
.btn-success:hover,
.hg-btn-primary:hover {
  background-color: var(--hg-color-action-primary-bg-hover);
  border-color: var(--hg-color-action-primary-bg-hover);
  color: var(--hg-color-action-primary-text);
}

.btn-primary:active,
.btn-primary.active,
.btn-success:active,
.btn-success.active,
.hg-btn-primary:active {
  background-color: var(--hg-color-action-primary-bg-active);
  border-color: var(--hg-color-action-primary-bg-active);
}

.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-secondary,
.hg-btn-secondary {
  background-color: var(--hg-color-action-secondary-bg);
  border-color: var(--hg-color-action-secondary-border);
  color: var(--hg-color-action-secondary-text);
}

.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover,
.hg-btn-secondary:hover {
  background-color: var(--hg-color-action-secondary-bg-hover);
  border-color: var(--hg-color-border-strong);
  color: var(--hg-color-text-primary);
}

.btn-danger,
.hg-btn-danger {
  background-color: var(--hg-color-action-danger-bg);
  border-color: var(--hg-color-action-danger-bg);
  color: var(--hg-color-action-danger-text);
}

.btn-danger:hover,
.hg-btn-danger:hover {
  background-color: var(--hg-color-action-danger-bg-hover);
  border-color: var(--hg-color-action-danger-bg-hover);
  color: var(--hg-color-action-danger-text);
}

.form-control,
.form-select,
select.form-control,
textarea.form-control {
  min-height: 44px;
  border: 1px solid var(--hg-color-border-default);
  border-radius: var(--hg-radius-input);
  background-color: var(--hg-color-surface-primary);
  color: var(--hg-color-text-primary);
  font-family: var(--hg-font-family-sans);
  font-size: var(--hg-font-size-14);
  line-height: var(--hg-line-height-20);
  letter-spacing: var(--hg-letter-spacing);
  box-shadow: none;
}

.form-control::placeholder {
  color: var(--hg-color-text-placeholder);
}

.form-control:focus,
.form-select:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--hg-color-border-brand);
  box-shadow: var(--hg-focus-ring);
  outline: 0;
}

.card,
.panel,
.list-group,
.modal-content,
.dropdown-menu,
.table-container {
  border-color: var(--hg-color-border-default);
}

.card,
.panel {
  border-radius: var(--hg-radius-card);
  background-color: var(--hg-color-surface-primary);
  box-shadow: none;
}

.card-header,
.panel-heading {
  border-bottom: 1px solid var(--hg-color-border-subtle);
  background-color: var(--hg-color-surface-primary);
  color: var(--hg-color-text-primary);
}

.dropdown-menu {
  padding: var(--hg-space-2);
  border: 1px solid var(--hg-color-border-default);
  border-radius: var(--hg-radius-card);
  background-color: var(--hg-color-surface-primary);
  box-shadow: var(--hg-shadow-dropdown);
}

.dropdown-item,
.dropdown-menu > li > a {
  min-height: 36px;
  border-radius: var(--hg-radius-2);
  color: var(--hg-color-text-primary);
}

.dropdown-item:hover,
.dropdown-menu > li > a:hover {
  background-color: var(--hg-color-surface-hover);
  color: var(--hg-color-text-primary);
}

.modal-content {
  border-radius: var(--hg-radius-modal);
  box-shadow: var(--hg-shadow-modal);
}

.badge,
.label {
  border-radius: var(--hg-radius-pill);
  font-weight: var(--hg-font-weight-semibold);
  letter-spacing: var(--hg-letter-spacing);
}

.alert {
  border-radius: var(--hg-radius-card);
  border-width: 1px;
  box-shadow: none;
}