/* Button styles */
.btn {
  font: var(--button-text);
  display: flex;
  align-items: center;
  gap: var(--spacing-s4);
  padding: var(--spacing-s4) var(--spacing-s16);
}
/* primary button */
.btn-primary {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  transition: all 0.3s ease-in;
}

.btn-primary:hover {
  background: var(--color-btn-primary-hover);
  color: var(--color-btn-primary-text);
}
.btn-primary.active {
  background: var(--color-btn-secondary-active);
}

/* secondary button */
.btn-secondary {
  background: var(--color-btn-secondary-bg);
  border: 1px solid var(--color-btn-secondary-border);
  color: var(--color-btn-secondary-text);
  transition: all 0.3s ease-in;
}
.btn-secondary:hover {
  background: var(--color-btn-secondary-hover);
  border-color: var(--color-border-hover);
}
.btn-secondary.active {
  background: var(--color-btn-secondary-active);
}

/* Accent button */
.btn-accent {
  background: var(--color-btn-accent-bg);
  color: var(--color-btn-accent-text);
  transition: all 0.3s ease-in;
}
.btn-accent:hover {
  background: var(--color-btn-accent-hover);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-accent);
}
.btn-accent.active {
  background: var(--color-btn-accent-active);
}