/* === Base Button Style === */
.btn {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: var(--text-xs);
  line-height: var(--line-text-sm);
  color: var(--text-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

/* === Primary Variant === */
.btn--primary {
  background: linear-gradient(90deg, var(--brand-800), #3e30bb);
  border-top: 1px solid var(--brand-400);
  border-radius: var(--radius-md);
  color: var(--text-button);
}

/* === Hover State === */
.btn--primary:hover {
  background: var(--flash-pink-950);
	border-top: 1px solid var(--flash-pink-900);

}

/* === Medium Size Variant === */
.btn--md {
  padding: var(--spacing-xl) var(--spacing-6xl) var(--spacing-xl) var(--spacing-6xl);
}

/* === Small Size Variant === */
.btn--sm {
  padding: var(--spacing-md) var(--spacing-3xl);
  font-size: var(--text-sm);
  line-height: var(--line-text-md);
}