/* Responsibility: Shared buttons, arrow affordances and primary action states. */

.btn {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  line-height: 1;
  transition:
    transform 0.24s var(--ease-apple),
    box-shadow 0.24s var(--ease-apple),
    background 0.24s var(--ease-apple),
    border-color 0.24s var(--ease-apple),
    opacity 0.24s var(--ease-apple);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(25, 23, 18, 0.12);
}

.btn:active {
  transform: translateY(0) scale(0.985);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.64;
  transform: none;
  box-shadow: none;
}

.btn.is-loading::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

.btn:focus-visible,
.nav-link:focus-visible,
.job-card:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(18, 204, 116, 0.34);
  outline-offset: 3px;
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #05361f;
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}