/* =========================================
   ============== BUTTONS ==================
   ========================================= */

/* ---- Primary Button ---- */
.button,
button,
input[type="submit"],
input[type="button"] {
  background-color: var(--brand-primary);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 0.2em 1em;
  border: none;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.button:hover,
button:hover {
  background-color: var(--brand-primary-hover);
  transform: none;
}

/* ---- Secondary Button ---- */
.secondary {
  background-color: var(--brand-secondary);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 0.2em 1em;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.secondary:hover {
  background-color: var(--brand-secondary-hover);
  transform: none;
}