/* =============================================================
   btn — button overrides for Bootstrap .btn classes.
   Maps Bootstrap button tokens to the PoC design language:
   teal primary, Rubik font, tactile active state.
   ============================================================= */

/* ── All buttons ─────────────────────────────────────────────── */
.btn {
  font-family: var(--token-font-family-ui);
  font-weight: var(--token-font-weight-medium);
  letter-spacing: .02em;
  border-radius: var(--token-radius-md);
  transition: background-color var(--token-transition-fast),
              border-color var(--token-transition-fast),
              transform 80ms;
}

.btn:active {
  transform: scale(0.98);
}

/* ── Primary (teal) ──────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg:                var(--token-color-primary);
  --bs-btn-border-color:      var(--token-color-primary);
  --bs-btn-hover-bg:          var(--token-color-primary-dark);
  --bs-btn-hover-border-color: var(--token-color-primary-dark);
  --bs-btn-active-bg:         var(--token-color-primary-dark);
  --bs-btn-active-border-color: var(--token-color-primary-dark);
  --bs-btn-disabled-bg:       var(--token-color-primary);
  --bs-btn-disabled-border-color: var(--token-color-primary);
  --bs-btn-color:             #ffffff;
  --bs-btn-hover-color:       #ffffff;
  padding: 0.8125rem var(--token-space-5);
}

/* ── Outline primary ─────────────────────────────────────────── */
.btn-outline-primary {
  --bs-btn-color:              var(--token-color-primary);
  --bs-btn-border-color:       var(--token-color-primary);
  --bs-btn-hover-color:        #ffffff;
  --bs-btn-hover-bg:           var(--token-color-primary);
  --bs-btn-hover-border-color: var(--token-color-primary);
  --bs-btn-active-color:       #ffffff;
  --bs-btn-active-bg:          var(--token-color-primary-dark);
}

/* ── Danger ──────────────────────────────────────────────────── */
.btn-danger {
  --bs-btn-bg:                var(--token-color-danger);
  --bs-btn-border-color:      var(--token-color-danger);
  --bs-btn-hover-bg:          #dc2626;
  --bs-btn-hover-border-color: #dc2626;
}

/* ── Link buttons ────────────────────────────────────────────── */
.btn-link {
  color: var(--token-color-primary);
}

.btn-link:hover {
  color: var(--token-color-primary-dark);
}

/* ── BEM button variants (used by JS-rendered UI) ────────────── */
.btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: var(--token-color-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--token-radius-md);
  font-family: var(--token-font-family-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--token-transition-fast), transform 80ms;
  white-space: nowrap;
}

.btn--primary:hover { background: var(--token-color-primary-dark); color: #ffffff; }
.btn--primary:active { transform: scale(.97); }
.btn--primary:disabled { opacity: .6; cursor: not-allowed; }

.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: none;
  border: 1.5px solid var(--token-color-border);
  border-radius: var(--token-radius-md);
  font-family: var(--token-font-family-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--token-color-text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--token-transition-fast),
              color var(--token-transition-fast);
  white-space: nowrap;
}

.btn--ghost:hover { border-color: #bbb; color: var(--token-color-text); }

.btn--danger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: var(--token-color-danger);
  color: #ffffff;
  border: none;
  border-radius: var(--token-radius-md);
  font-family: var(--token-font-family-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--token-transition-fast), transform 80ms;
  white-space: nowrap;
}

.btn--danger:hover  { background: #b91c1c; color: #fff; }
.btn--danger:active { background: #991b1b; color: #fff; transform: scale(0.97); }
.btn--danger:disabled { opacity: .6; cursor: not-allowed; }

.btn--sm {
  padding: 7px 14px;
  font-size: 12px;
}