/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  min-height: var(--button-min-height);
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-radius);
  border: none;
  text-decoration: none;
  font-family: var(--font-family-base);
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  line-height: var(--line-height-flat);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.btn--primary {
  background: var(--color-blue-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-blue-600);
}

.btn--secondary {
  background: var(--color-white);
  color: var(--color-navy-900);
  border: 2px solid var(--color-navy-900);
}

.btn--secondary:hover {
  background: var(--color-gray-50);
}

.btn--yellow {
  background: var(--color-yellow-primary);
  color: var(--color-navy-900);
}

.btn--yellow:hover {
  background: var(--color-yellow-dark);
}

.btn--yellow-outline {
  background: transparent;
  color: var(--color-yellow-primary);
  border: 2px solid var(--color-yellow-primary);
}

.btn--yellow-outline:hover {
  background: var(--color-yellow-primary);
  color: var(--color-navy-900);
}

.btn--warning {
  background: var(--color-yellow-primary);
  color: var(--color-navy-900);
}

.btn--warning:hover {
  background: var(--color-yellow-dark);
}

.btn--success {
  background: var(--color-green-900);
  color: var(--color-white);
}

.btn--success:hover {
  background: var(--color-green-800);
}

.btn--small {
  padding: 0.6rem 1.2rem;
  font-size: var(--font-size-small);
}

.btn--full-width {
  width: 100%;
}