/* ========================================
   COMPONENT: BUTTON
   ======================================== */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);

  padding: 12px 20px;
  border-radius: 10px;

  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;

  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;

  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

.c-btn:hover {
  transform: translateY(-1px);
}

.c-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Variants */
.c-btn--cta {
  background: var(--color-cta);
  color: #fff;
}
.c-btn--cta:hover {
  background: var(--color-cta-hover);
}

.c-btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.c-btn--primary:hover {
  background: var(--color-primary-hover);
}

.c-btn--outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.c-btn--outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.c-btn--olive {
  background: var(--color-olive);
  color: #fff;
}
.c-btn--olive:hover {
  background: var(--color-olive-hover);
}

.c-btn--sand {
  background: var(--color-sand);
  color: #fff;
}
.c-btn--sand:hover {
  background: var(--color-primary);
}